https://github.com/itwillwork/cypress-reflex
https://github.com/itwillwork/cypress-reflex
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/itwillwork/cypress-reflex
- Owner: itwillwork
- Created: 2022-12-20T16:33:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T02:01:42.000Z (about 3 years ago)
- Last Synced: 2025-04-19T18:13:46.705Z (11 months ago)
- Language: TypeScript
- Size: 1.36 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[WIP] cypress-reflex
=============
Для чего создан
-------
Хочу писать один простой e2e тест, и генерировать из него все возможных варианты и тем самым детально фиксировать поведение интерфейса.
**Например:**
Форма с именем и возрастом, с кнопкой submit (дергающая запрос).
Можно вместо имени вписать: " ", " name ", " name🤡 "
Вместо возраста можно вписать: "0", "-1", "--1", "e", " {age} ", "notnumber"
Таким образом получается: 1 + 3 + 6 = 10 вариантов заполнения формы.
Которые не хочется писать вручную(
Еще пример:
**Для всех тестов хочется:**
1. Фиксировать как выглядит интерфейс (визуальный регресс, через сравнение скриншотов);
2. Фиксировать что отправляется при этом на бекенд, проверять форму запроса (body, query, url, headers и т.п.);
**Основные концепции:**
1. Нам не всегда важно правильное ли поведение, а только отслеживаем его изменение, через скриншоты и слепки запросов.
2. Пишем тесты исходя из дизайн системы. То есть размечаем интерфейс на компоненты, пишем какие варианты использования этого компонента есть, и из этой информации один тест превращается во множество.
Quick start
-------
1. Установить зависимость
```
npm i --save-dev cypress-reflex
```
2. В файл `cypress/support/e2e.js` добавить строку:
```
import "cypress-reflex/cypress-integration/commands";
```
3. В файл `cypress.config.js` добавить строки:
```
const { getCypressReflexEnv } = require("cypress-reflex/cypress-integration/env");
const { registrateCypressReflexTasks } = require("cypress-reflex/cypress-integration/tasks");
// ...
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// ...
registrateCypressReflexTasks(on, config);
// ...
return {
...config,
...getCypressReflexEnv(config),
}
},
},
});
```
4. Добавить необходимые конфиги
5. Добавить в `package.json` комманду для генерации тестов
```
"generate-tests": "rm -rf cypress/e2e/generated && cypress-reflex --cases=cypress-reflex-cases --commands=cypress-reflex-cases/commands.js --output=cypress/e2e/generated"
```
### Road map
- [ ] Вкрутить prettier в примеры и в сам код
- [ ] Переименовать пакет cypress-reflex => cypress-reflex-cli
- [ ] Накидать инструкцию