![Изображение от https://unsplash.com/@kellysikkema Изображение от https://unsplash.com/@kellysikkema](https://habrastorage.org/getpro/habr/upload_files/cc9/31c/4bb/cc931c4bb6b1078caf0284e1de5a30a0.jpeg)
В этой статье вы узнаете:
Что такое Cypress и когда его стоит использовать
Основы тестирования с использованием Cypress
Расширенные команды Cypress
Взаимодействие с элементами пользовательского интерфейса
Лучшие практики с использованием Cypress
Введение
Чтобы протестировать свои приложения, вам потребуется сделать следующие шаги:
Запустить приложение
Подождать пока сервер запустится
Провести ручное тестирование приложения(нажать на кнопки, ввести случайные текст в поля ввода или отправить форму)
Проверить, что результат вашего теста корректен(изменения заголовка, части текста и т.д.)
Повторить эти шаги ещё раз после простых изменений кода
Повторение этих шагов снова и снова становится утомительным и отнимает у вас слишком много времени и энергии. Что, если бы мы могли автоматизировать этот процесс тестирования Благодаря этому вы можете сосредоточиться на более важных вещах и не тратить время на тестирование пользовательского интерфейса снова и снова.
Именно здесь в игру вступает Cypress. При использовании Cypress единственное, что вам нужно сделать, это:
Написать код вашего теста(нажатие на кнопку, ввод текста в поля ввода и т.п.)
Запустить сервер
Запустить или перезапустить тест
Только и всего! Библиотека Cypress выполняет все тесты за вас. И самое приятное, что она не только сообщает вам все ли ваши тесты успешны или нет, но также сообщает вам, какой тест не удался.
Помимо этого, тестирование вашего кода — отличная практика, поэтому вам придется позже изучить соответствующий фреймворк. Cypress позволяет запускать тесты за считанные минуты.
Теперь, когда мы обсудили преимущества Cypress, давайте узнаем об основах этой библиотеки.
Начало
Установка и настройка Cypress
Сначала создайте отдельную папку для вашего проекта, а затем инициализируйте ее:
![Инициализация проекта Инициализация проекта](https://habrastorage.org/getpro/habr/upload_files/f3f/929/784/f3f929784a8ed31d99f2ada0e3e4021d.png)
Наконец, чтобы установить библиотеку Cypress:
![Установка Cypress Установка Cypress](https://habrastorage.org/getpro/habr/upload_files/b5d/ca6/2af/b5dca62afa65a99a22e9ab23974c1f8f.png)
Примечание . Если вы используете дистрибутив Linux, перейдите к этим инструкциям, прежде чем продолжить установку Cypress через NPM.
Теперь, когда Cypress установлен, попробуйте запустить его с помощью следующей команды:
![Открытие Cypress Открытие Cypress](https://habrastorage.org/getpro/habr/upload_files/cfb/813/e50/cfb813e503bf2efe3fe60f59246b06f4.png)
Она открывает запускалку тестов(Test Runner):
![Интерфейс Test Runner Интерфейс Test Runner](https://habrastorage.org/getpro/habr/upload_files/ead/29d/1c6/ead29d1c66ea0ed9d7f122402f644a46.png)
А теперь давайте перейдём к написанию тестов.
Основы Cypress
Создание файла
Cypress требует, чтобы все наши тесты находились в каталоге cypress/integration
. Сначала перейдите в этот каталог:
![Переход к cypress/integration Переход к cypress/integration](https://habrastorage.org/getpro/habr/upload_files/3c4/89a/bb0/3c489abb04fb5b06b7c0b43fd75db7f3.png)
Теперь создайте файл JavaScript с именем basicTest.js
:
![Создание JavaScript файла Создание JavaScript файла](https://habrastorage.org/getpro/habr/upload_files/1cc/5a6/7d0/1cc5a67d08f169cd5b1b13c20a30e91e.png)
Если вы не отключили сервер Cypress, ваши новые файлы появятся в Test Runner в реальном времени:
![Обновление структуры файлов в реальном времени Обновление структуры файлов в реальном времени](https://habrastorage.org/getpro/habr/upload_files/6e0/783/1bd/6e07831bda591de1bf176ba587e42e14.gif)
Теперь давайте напишем наш первый тест.
Простые тесты с утверждением и ожиданием значения
В вашем файле /cypress/integration/basicTest.js
напишите следующий код:
![Код к файлу basicTest.js Код к файлу basicTest.js](https://habrastorage.org/getpro/habr/upload_files/835/0c9/90b/8350c990b2f37c0d58cc4e817570727a.png)
Строка 1: Функция
describe
сообщает Cypress название набора наших тестов.Строка 2: Функция
it
, обозначает название теста.Строка 3: Создаём утверждение. Здесь мы подтверждаем, что 2 + 2 равно 4. Если тест вернёт
false
, то он будет немедленно остановлен.
Чтобы запустить вашу программу, щёлкните по basicTest.js
в вашем сервере Cypress.
![Щелчок по basicTest.js в Test Runner Щелчок по basicTest.js в Test Runner](https://habrastorage.org/getpro/habr/upload_files/ccf/fe8/54f/ccffe854f1372c8e13cd82b2b3db0dfb.png)
Результат запуска:
![Результат запуска теста Результат запуска теста](https://habrastorage.org/getpro/habr/upload_files/fc4/62e/165/fc462e16574de8f09d6d1383dfcfab2a.png)
Отлично! Значит, наше утверждение было успешным.
Что, если мы сделаем заведомо ложное утверждение? Теперь в /cypress/integration/basicTest.js
добавьте следующий код в пределах функции describe
:
![Код для добавление в basicTest.js Код для добавление в basicTest.js](https://habrastorage.org/getpro/habr/upload_files/10f/d37/10a/10fd3710a165ed9ee9732d2d49f3a2a9.png)
Строка 2: Если сумма 4 и 5 равна 10, тест будет пройден. В противном случае, незамедлительно остановлен.
Снова запустите код. Результат будет:
![Результат нашего второго теста Результат нашего второго теста](https://habrastorage.org/getpro/habr/upload_files/44a/2a1/92f/44a2a192ffaeb5cee5d10de9c704189a.png)
Обратите внимание, как наш второй тест не удался. Если бы результат был правильным, тест прошел бы успешно.
Давайте больше поиграем с утверждениями. Добавьте в basicTest.js
следующий код:
![Код для добавления в basicTest.js Код для добавления в basicTest.js](https://habrastorage.org/getpro/habr/upload_files/63e/ec7/5df/63eec75dfcc1ac67435c3a32f350ae62.png)
Строка 2: Если сумма 5 и 5 не равна 100, то тест должен пройти.
Результат выполнения теста:
![Результат теста: успешно! Результат теста: успешно!](https://habrastorage.org/getpro/habr/upload_files/4a5/0df/1be/4a50df1be6dabf77ba6f66a582938075.png)
Отлично! Наш тест прошел. Функция expect
выполняет BDD (behavior-driven) утверждения. В следующем разделе мы выполним утверждения, основанные на тестировании(test-driven assertions).
Сейчас /cypress/integration/basicTest.js
должен выглядеть так:
Написание утверждений основанных на тестировании(test-driven assertions) с явным использованием assert
Мы даже можем писать утверждения на основе TDD с использованием assert
.
В вашем файле basicTest.js
напишите следующий код:
Строка 2: Создаём объект со свойствами
name
иage
.Строка 6: Функция
isObject
подтверждает, что переменнаяperson
является объектом. Если результатtrue
, то будет напечатаноvalue is object
. В противном случае будет показано, что этот тест не прошел.Строка 10: Убеждаемся, что переменная
name
содержит строковое значение.Строка 14: Убеждаемся, что переменная
name
не является целым числом.
Запустите код. Результатом будет:
![Результат запуска нашего теста Результат запуска нашего теста](https://habrastorage.org/getpro/habr/upload_files/2ac/c5d/fdb/2acc5dfdb1cff028d05c5efc4c789516.png)
Отлично! Наш код работает. В следующем разделе мы научимся работать с сайтами через Cypress.
Сейчас наш basicTest.js
должен выглядеть так:
Запуск веб-сайтов
Здесь мы попробуем запустить Demoblaze , сайт, созданный для проведения тестов.
В своей папке /cypress/integration/
создайте файл с именем basicCommandsTest.js
. В этом файле напишите следующий код:
![Код для basicCommandsTest.js Код для basicCommandsTest.js](https://habrastorage.org/getpro/habr/upload_files/9d9/6aa/654/9d96aa6543f736814fbd61bfdb4ba9b9.png)
Строка 3: Используем метод
visit
, чтобы сообщить Cypress о переходе на веб-сайт Demoblaze.
Сохраните свой код и нажмите на basicCommandsTest.js
в меню Test Runner:
![Клик по basicCommandsTest.js вTest Runner Клик по basicCommandsTest.js вTest Runner](https://habrastorage.org/getpro/habr/upload_files/987/bff/1f7/987bff1f7b03f71042e337fc77e7ed66.png)
Результат запуска:
![](https://habrastorage.org/getpro/habr/upload_files/4a4/8b5/adb/4a48b5adbf53d3c53e3b1d86190e6e63.png)
Отлично! Наш код работает. В следующем разделе мы более глубоко погрузимся в тестирование с помощью Cypress.
В итоге basicCommandsTest.js
должен выглядеть так:
Cypress: Расширенные команды
В этом разделе мы попытаемся взаимодействовать с элементами на странице. Однако, прежде чем продолжить этот процесс, нам нужно сначала научиться идентифицировать элементы HTML в Cypress.
Как идентифицировать элементы
Cypress использует селекторы JQuery для идентификации компонентов на веб-странице.
Например, чтобы получить элемент myButton
используя id
, мы должны написать следующий код:
![Получение элемента через id элемента Получение элемента через id элемента](https://habrastorage.org/getpro/habr/upload_files/e27/8dc/82a/e278dc82a8bc20e6ac09f9c3ded39890.png)
В качестве альтернативы, чтобы идентифицировать элемент myButton
используя имя класса, могли бы использовать следующую строку:
![Получение элемента через имя класса Получение элемента через имя класса](https://habrastorage.org/getpro/habr/upload_files/01e/c55/db2/01ec55db290aa208043513dc03c45f5c.png)
Давайте теперь поработаем с взаимодействием с пользовательским интерфейсом нашего сайта.
Нажатие кнопки
В этом разделе мы будем использовать страницу The-Internet для запуска наших тестов. На этом веб-сайте мы будем использовать раздел добавления/удаления элементов.
Давайте сначала попробуем идентифицировать нашу кнопку «Добавить элемент».
![Страница для тестирования Страница для тестирования](https://habrastorage.org/getpro/habr/upload_files/025/3f9/291/0253f9291a7508016a7f41abf75d8bf4.png)
Используя DevTools, заметьте, что у button
есть свойство onclick
, имеющее значение addElement()
.
![Скриншот из DeveloperTools Скриншот из DeveloperTools](https://habrastorage.org/getpro/habr/upload_files/58b/3d8/127/58b3d812753f0ffb2ba013c953e44523.png)
Соответствующий селектор для этой кнопки будет выглядеть так:
![Идентификация элемента Идентификация элемента](https://habrastorage.org/getpro/habr/upload_files/b93/60c/f28/b9360cf281fbbae3b0a1e8122d37e473.png)
В папке /cypress/integration
создайте файл с именем runningClickCommand.js
. В этом файле напишите следующий код:
Строка 2: Переходим на веб-страницу.
Строка 6: Связываем в одну цепочку получение элемента
button
и нажатие на эту кнопку.
Запустите код. Результат:
![Вывод результата Вывод результата](https://habrastorage.org/getpro/habr/upload_files/b06/257/255/b0625725544d95801c56306d43be24f2.gif)
Отлично, наш код работает! Обратите внимание, что как только страница загрузилась, в нашем тесте автоматически происходит нажатие на кнопку Add Element
.
Давайте теперь поработаем с вводом текста в текстовое поле.
Ввод текста
В этом разделе мы будем использовать страницу The-Internet’s login. Нам нужен способ сначала идентифицировать элементы.
![Скриншот сайта для тестирования Скриншот сайта для тестирования](https://habrastorage.org/getpro/habr/upload_files/06e/6dd/106/06e6dd106f48ea235749f73d66cd20f0.png)
![Скриншот из DeveloperTools Скриншот из DeveloperTools](https://habrastorage.org/getpro/habr/upload_files/5c6/b89/d3e/5c6b89d3e2df2c4a10edcafd38d98a71.png)
![Скриншот из DeveloperTools Скриншот из DeveloperTools](https://habrastorage.org/getpro/habr/upload_files/f0e/4c5/a40/f0e4c5a40e5ce6659780a18bbd1c9c0a.png)
Поле username
имеет id
равное username
, а поле password
имеет id
равное password
. Кроме того, кнопка Login
имеет свойство type
равное submit
. Таким образом, для определения полей username
и password
, нам понадобится селектор JQuery id
:
![Идентификация элемента через его id Идентификация элемента через его id](https://habrastorage.org/getpro/habr/upload_files/15c/bf9/1f3/15cbf91f39cc524fadd5204085ec8667.png)
Более того, чтобы получить кнопку button
, нам понадобится селектор атрибутов , например:
![](https://habrastorage.org/getpro/habr/upload_files/7a0/e81/c41/7a0e81c41729f28a65c7a8122519ef38.png)
В своей папке /cypress/integration
создайте файл с именем runningTypeCommand.js
. В этом файле напишите следующий код:
Строка 3: Переходим на страницу входа в систему.
Строка 6: Переходим в поле
username
и добавляем методtype
в цепочку вызовов, чтобы напечатать в этом текстовом поле значениеtomsmith
.Строка 7: Переходим в поле
password
и вводимSuperSecretPassword
.Строка 10: Нажимаем на кнопку «Отправить».
Запустите код. Результатом будет:
![Вывод результата запуска кода Вывод результата запуска кода](https://habrastorage.org/getpro/habr/upload_files/80c/bd2/2d5/80cbd22d5460db4829ae95fa238b4fe9.gif)
И мы закончили! В следующем разделе мы узнаем о работе с чекбоксами.
Переключение чекбоксов
В этом разделе мы будем использовать раздел чекбоксов на странице The-Internet .
Давайте сначала посмотрим на DevTools:
![Developer Tools Developer Tools](https://habrastorage.org/getpro/habr/upload_files/226/054/0d7/2260540d78e0a1de363240daa4e05ef5.png)
Оба этих чекбокса имеют свойство type
со значениемcheckbox
. Кроме того, они также являются дочерними элементами для элементаform
с id
равным checkboxes
. В этом случае мы бы использовали селектор JQuery родитель-потомок:
![Идентификация наших чекбоксов Идентификация наших чекбоксов](https://habrastorage.org/getpro/habr/upload_files/ae7/5a6/9fc/ae75a69fc48c517b33a7b230f8b7b9dd.png)
В каталоге /cypress/integration/
создайте файл с именем runningCheckCommand.js
и напишите следующий код:
Строка 4: Находим обе группы чекбоксов, а затем используем метод
check
, чтобы отметить их выбранными.Строка 7: Просим Cypress приостановить процесс тестирования на одну секунду.
Строка 8: Получаем список отмеченных чекбоксов. Затем используем метод
uncheck
, чтобы снять выбор.
Запустите код. Результат:
![Результат запуска теста Результат запуска теста](https://habrastorage.org/getpro/habr/upload_files/9c0/4d7/47f/9c04d747f7545d6960f8420a3dc3db5d.gif)
Отлично! Наш код работает. Давайте теперь поработаем над неявными утверждениями с помощью Cypress.
Неявные утверждения
Ранее мы выполняли утверждения для переменных и объектов. Однако в реальном мире мы хотели бы выполнять утверждения для текста, расположенного в нашем элементе HTML, или проверять, есть ли у нашего элемента ul
дочерние элементы li
или нет.
Для выполнения таких утверждений мы будем использовать ключевое слово should
. В этом разделе мы будем делать неявные утверждения на странице добавления элемента — The-Internet’s Add Element
![Скриншот тестируемой страницы Скриншот тестируемой страницы](https://habrastorage.org/getpro/habr/upload_files/475/27f/d05/47527fd0533795bc0232edc3a6f50b4e.png)
![Developer Tools Developer Tools](https://habrastorage.org/getpro/habr/upload_files/8ea/57f/c93/8ea57fc937e50ea759f091c12cd78ce3.png)
Наша кнопка Delete
имеет класс added-manually
. Мы хотим выполнить следующее утверждение для этого элемента button
:
![Наше утверждение Наше утверждение](https://habrastorage.org/getpro/habr/upload_files/a61/ecf/4d6/a61ecf4d6d951a0f97824fb0adca9986.png)
Для этого мы должны использовать следующий синтаксис:
![Получение элемента и за тем утверждение Получение элемента и за тем утверждение](https://habrastorage.org/getpro/habr/upload_files/6db/aba/fef/6dbabafefc3923a8d34230c48ba4a030.png)
Альтернативно, можем выполнить такое утверждение:
![Наше утверждение Наше утверждение](https://habrastorage.org/getpro/habr/upload_files/c90/674/942/c90674942020bfc6b3f436c3123e0bd0.png)
Мы можем использовать эту строку кода:
![Получение элемента и затем утверждение Получение элемента и затем утверждение](https://habrastorage.org/getpro/habr/upload_files/f4a/29b/ad8/f4a29bad85927793ac0cac75b765719e.png)
Перейдите в /cypress/integration/runningClickCommand.js
и добавьте следующий код:
![Код для runningClickCommand.js Код для runningClickCommand.js](https://habrastorage.org/getpro/habr/upload_files/a55/515/5a1/a555155a14780ef478b05f35afeb73e7.png)
Строка 1: Получаем элементы с классом
added-manually
. Затем проверяем, что их количество(have.length)
равно единице.Строка 3: Получаем кнопку
Add Element
, а затем проверяем, что текст на кнопке(have.text)
действительно будетAdd Element
.
Запустите код. Результат в конце теста должен быть следующим:
![Результат запуска Результат запуска](https://habrastorage.org/getpro/habr/upload_files/7c4/aa4/f48/7c4aa4f4840d7a10a5df19db78c40f4b.png)
Отлично! Наш код работает. Теперь перейдем к изучению команды each
.
В итоге cypress/integration/runningClickCommand.js
должен выглядеть так:
Команда each
Взгляните еще раз на The-Internet’s Add Elements page:
![Скриншот тестового сайта Скриншот тестового сайта](https://habrastorage.org/getpro/habr/upload_files/00a/8cb/b9f/00a8cbb9f0098c2870c0c748216eb383.png)
Чтобы удалить все эти элементы, мы можем вручную прокликать все кнопки Delete
. Это возможно; однако рассмотрим ситуацию, когда кнопок Delete
больше сотни. Следовательно, удаление всех их вручную займет много времени.
Вот здесь-то и появляется команда each
. Она позволяет вам перебирать серию элементов, а затем выполнять любую функцию для каждого из них. В этом случае мы хотим перебрать все наши кнопки Delete
и запустить функцию click
на всех них.
Откройте Developer Tools:
![](https://habrastorage.org/getpro/habr/upload_files/1c1/7c5/23f/1c17c523f3a59d18d63a2d07ffbd176c.png)
Все наши кнопки Delete
имеют свойство class
равное added-manually
. В этом случае мы будем использовать селектор классов и соединять его с командой each
, например:
![Получение элемента и использование each затем Получение элемента и использование each затем](https://habrastorage.org/getpro/habr/upload_files/17d/b12/86f/17db1286fd69218b0b1775f5847a19b3.png)
Перейдите в /cypress/integration/runningClickCommand.js
и добавьте следующий фрагмент кода:
![Код для runningClickCommand.js Код для runningClickCommand.js](https://habrastorage.org/getpro/habr/upload_files/ad3/792/c20/ad3792c2008431cbb2725d74c00665bf.png)
Строка 2: Получаем все элементы, у которых есть класс
.added-manually
. Каждый элемент в серии будет представлен параметром$el
.Строка 3: Обёртываем этот элемент, чтобы мы могли выполнять с ним команды Cypress. Здесь мы отправляем команду щёлкнуть по этим элементам.
Результат выполнения кода должен быть следующим:
![Результат выполнения кода Результат выполнения кода](https://habrastorage.org/getpro/habr/upload_files/7f7/600/e60/7f7600e60da27ad37b41ba7d82fddbd0.gif)
Наш код работает! Поскольку наш тест был быстрым, давайте попробуем добавить на страницу больше элементов.
Найдите следующий фрагмент кода:
![](https://habrastorage.org/getpro/habr/upload_files/7f3/829/7d6/7f38297d6df301f801e103827d8fc66a.png)
Измените это так:
![](https://habrastorage.org/getpro/habr/upload_files/984/7df/d69/9847dfd6985eef41da6843ee8a580667.png)
Строка 2: Запускаем цикл, чтобы сообщить Cypress, что нужно нажать кнопку
Add Element
20 раз.
Запустите код еще раз. Результат должен быть таким:
![Результат выполнения кода Результат выполнения кода](https://habrastorage.org/getpro/habr/upload_files/20b/06e/cec/20b06ececb4d2ad4b27fec59e5fff67c.gif)
Как видите, наша программа автоматически удалила все элементы на странице без каких-либо ручных усилий. Отлично!
В следующей части статьи мы узнаем о том, что можно и чего нельзя делать при тестировании с Cypress.
В итоге cypress/integration/runningClickCommand.js
должен выглядеть так:
Лучшие практики
Держите тесты изолированными
Рассмотрим ситуацию, когда вы тестируете свое приложение. Структура вашего проекта будет выглядеть примерно так:
![Не самая лучшая структура Не самая лучшая структура](https://habrastorage.org/getpro/habr/upload_files/d42/4d1/292/d424d1292627fb282a4acbd8e827fc50.png)
В вашем Test Runner это будет выглядеть так:
![Отображение тестовой структуры в Test Runner Отображение тестовой структуры в Test Runner](https://habrastorage.org/getpro/habr/upload_files/9b8/475/13b/9b847513bad398fe1c71ffdf9ce0540e.png)
Команда Cypress утверждает, что структура вашего проекта должна быть организована как можно лучше. Лучше всего перегруппировать ваши файлы проекта в другие папки, например:
![Хорошая структура проекта Хорошая структура проекта](https://habrastorage.org/getpro/habr/upload_files/7bb/998/68a/7bb99868ae72da155ef98af12b104b97.png)
Следовательно, это выглядело бы так:
![](https://habrastorage.org/getpro/habr/upload_files/6b2/9fa/bd2/6b29fabd22d85530c857fc20e98cfc59.png)
По возможности используйте собственные команды
Взгляните на этот фрагмент кода:
![Пример кода Пример кода](https://habrastorage.org/getpro/habr/upload_files/65a/ee7/e51/65aee7e51635c02c2b51d1415a027792.png)
Обратите внимание, что мы вынуждены многократно использовать команды get
и type
. Здесь мы можем реализовать собственные команды, чтобы сделать их короче.
В вашем cypress/support/commands.js
напишите этот код:
![](https://habrastorage.org/getpro/habr/upload_files/75a/af2/b5c/75aaf2b5c87441de288fc3f594f2612e.png)
Строка 1: Создаём собственную команду, которая будет иметь два параметра
identifier
иdata
.Строка 2: Получаем элемент с соответствующим идентификатором, а затем вводим в него данные.
Примечание . Считается хорошей практикой записывать свои собственные команды в файл /cypress/support/commands.js
.
Теперь вернитесь в свой тестовый файл и замените его вот так:
![Пример кода Пример кода](https://habrastorage.org/getpro/habr/upload_files/679/e97/f17/679e97f1798c04764cdfdba6f10369cd.png)
Как видите, наш код выглядит значительно короче.
Избегайте «атомарных» тестов
Взгляните на этот фрагмент кода:
Здесь мы повторно выполняем тесты на HTML элементе с id
равным first
.
Cypress не одобряет такого поведения. Это неэффективно, и есть способ лучше переписать этот код, например:
Мы можем использовать метод and
для связывания дополнительных команд should
с нашим элементом.
Не запускайте сервер в Cypress
Команда exec
присутствует для запуска команд в терминале. Но запускать сервер с помощью этой команды крайне не рекомендуется.
Если вы хотите протестировать свое приложение на localhost
, сначала запустите сервер, а затем запустите свой тест Cypress.
![Команды терминала Команды терминала](https://habrastorage.org/getpro/habr/upload_files/865/1bd/bca/8651bdbca2d9d4ba47d1724cf7222755.png)
Репозиторий GitHub и дополнительные ресурсы
Код GitHub
Дальнейшее чтение
End-To-End Testing With Cypress by codedamn
Заключение
Тестирование — ключевой шаг в процессе разработки, поскольку он обеспечивает правильную работу вашего приложения. Некоторые программисты предпочитают вручную тестировать свои программы, поскольку написание тестов требует значительного количества времени и энергии. К счастью, Cypress решил эту проблему, позволив разработчику писать тесты в короткие сроки.
Спасибо, что дожили до конца! Если вы почувствовали какое-либо замешательство, я советую вам поиграть с кодом и разобрать примеры.
david2tm
Мы используем в нашем проекте testim.io
Если коротко:
1) записывается тест. Причём это не код, а сам тул регистрирует куда кликнули, например.
2) после, или во время, записи можно wysiwyg дабовить ассерты. Например такой-то текст в таком-то месте.
3) когда тест бежит, все шаги скриншотятся, например для поверки.
4) тул довольно толерантен к лёгким изменяем вёрстки, и сообщит вам если изменения слишком велики.
Очень удобно. Наш QA, один на всех, имеет кучу свободного времени. И даже делает лёгкие фиксы багов и тд.
kvothe Автор
david2tm
Именно так
вот тут можно просмотреть небольшое демо
https://www.youtube.com/watch?v=3YNhYhXWMsY