Руководство
Начало работы с кипарисом
Руководство для начинающих по сквозному тестированию
Cypress — это основанная на JavaScript универсальная платформа для сквозного тестирования, в которой уже есть все встроенные функции, которые могут вам понадобиться.
Но что такое сквозное тестирование?
E2E (или цепное тестирование) — это метод тестирования программного обеспечения, при котором тестируется весь продукт от начала до конца, чтобы убедиться, что поток приложений ведет себя надлежащим образом. ожидал.
Каковы встроенные функции?
Ну, у вас будет доступ к среде тестирования (Mocha) и библиотеке утверждений (Chai). Насмешки и заглушки (Синон) также включены. В отличие от Selenium, вы можете писать тесты только на JavaScript. Итак, если вы хотите использовать Cypress, вам нужно хотя бы немного знать JS.
Настройка проекта
В этом руководстве мы будем использовать простой список дел. Вы можете найти репозиторий здесь. После того, как вы клонировали его, откройте его в нужном вам редакторе кода.
Установка Cypress
В папке проекта запустите:
npm i cypress --save-dev
Чтобы открыть пользовательский интерфейс, используйте эту команду:
npx cypress open
Вы увидите кучу примеров в разных папках.
А пока вернемся к нашему проекту.
Начало работы
Убедитесь, что установлена более новая версия Node.js, а также пакет NPM serve, и запустите:
npx serve
Это запустит сервер разработки, и вы сможете увидеть приложение.
Напишите свой первый тестовый пример
В папке нашего проекта/Cypress/Integration/todolist создайте новый файл с именем todolist.spec.js .
Каждый раз, когда вы начинаете писать новый набор тестов, оборачивайте его в блок describe. Этот метод заимствован из Mocha и предназначен для содержания одного или нескольких связанных тестов. Как видите, для описания набора тестов и функции обратного вызова требуется строка.
beforeEach() выполняется перед каждым тестовым случаем.
В третьей строке cy относится к самому Cypress, а visit — это метод просмотра по заданному пути.
Далее мы собираемся встретиться с реальным тестовым блоком, который называется it.
Имейте в виду, что вы должны помещать каждый тестовый блок в файл describe.
get — это метод выбора элементов на странице. При его использовании мы говорим Cypress «захватить идентификатор заголовка на странице».
А теперь давайте посмотрим на наш первый тест!
Запуск теста
Откройте терминал и выполните:
npx cypress open
Вы должны увидеть открытие пользовательского интерфейса Cypress.
Из списка выберите todolist.spec.js, чтобы начать тест.
После этого вы увидите, как Cypress открывает браузер и просматривает страницу.
Вот ваш первый пройденный тест с помощью Cypress!
Как мы обсуждали ранее, и visit(), и get() являются командами Cypress, и их также называют неявными утверждениями. Эти команды не являются независимыми и всегда зависят от ранее связанной родительской команды. Также, если элемент находится на странице, Cypress посчитает проверку пройденной.
Теперь давайте посмотрим на другую команду из нашего предыдущего фрагмента кода: should(). Он создает утверждение и используется в различных случаях. Например, мы проверили, виден ли определенный элемент на странице. Другой пример:
Давайте продолжим с новым тестовым случаем:
Если вы хотите проверить более одного условия, вы можете использовать команду and(). Это псевдоним should(), и он работает как связующее звено между утверждениями.
В Cypress есть много команд с самоописанием, и type() также является одной из них. Неудивительно, что он будет введен в выбранный нами элемент.
Текст, введенный в type(), может включать специальные символы, такие как backspace, esc, enter и т. д. В документации Cypress представлено множество других.
check() используется для флажков или переключателей. Эти элементы должны быть типа <input>.
Полезные инструменты
И наконец, в пользовательском интерфейсе Cypress есть два очень удобных инструмента, которые я хотел бы вам показать.
Одно из них называется путешествие во времени. Команды интерактивны, и когда мы наводим курсор на событие click(), это дает нам возможность вручную проверить DOM нашего тестируемого приложения во время создания моментального снимка. Cypress также выделяет элементы.
Другой — целевая метка рядом с кнопкой обновить. Когда выбрано, вы можете выбрать элементы на странице. Это упрощает тестирование, так как вам не нужно искать каждый элемент в исходном коде.
На этом мы можем завершить это базовое руководство для начинающих. Отличная работа!
Заключение
Надеюсь, вы узнали что-то новое из этой статьи!
С Cypress тестирование E2E становится еще более приятным, чем когда-либо прежде, а со всеми инструментами — еще проще. Попробуйте, если еще не пользовались!
Подробнее об этом можно узнать в замечательной Cypress Docs.
Если вы хотите увидеть весь код этого руководства; здесь вы можете найти его.
Спасибо за чтение!
