Введение
Чтобы протестировать свои приложения, вам потребуется сделать следующие шаги:
Повторение этих шагов снова и снова становится утомительным и отнимает у вас слишком много времени и энергии. Что, если бы мы могли автоматизировать этот процесс тестирования Благодаря этому вы можете сосредоточиться на более важных вещах и не тратить время на тестирование пользовательского интерфейса снова и снова.
Именно здесь в игру вступает Cypress. При использовании Cypress единственное, что вам нужно сделать, это:
Только и всего! Библиотека Cypress выполняет все тесты за вас. И самое приятное, что она не только сообщает вам все ли ваши тесты успешны или нет, но также сообщает вам, какой тест не удался.
Помимо этого, тестирование вашего кода — отличная практика, поэтому вам придется позже изучить соответствующий фреймворк. Cypress позволяет запускать тесты за считанные минуты.
Теперь, когда мы обсудили преимущества Cypress, давайте узнаем об основах этой библиотеки.
Написание утверждений основанных на тестировании(test-driven assertions) с явным использованием assert
Мы даже можем писать утверждения на основе TDD с использованием assert.
В вашем файле basicTest.js напишите следующий код:
Запустите код. Результатом будет:
Отлично! Наш код работает. В следующем разделе мы научимся работать с сайтами через Cypress.
Сейчас наш basicTest.jsдолжен выглядеть так:
Основы cypress: проверка атрибутов, значений и текста
Автор: Филип Рик (Filip Hric)
Оригинал статьи
Перевод: Ольга Алифанова
Привет, и с вами снова цикл статей по основам Cypress!
Получение текста элемента
Чтобы получить правильные атрибуты элемента, хорошо бы понимать основы различных HTML-элементов. Приведу пример. Допустим, у нас два элемента:
<div>Пожалуйста, введите имя:</div>
<input type="text"></input>
В ходе теста я заполню это поле и затем проверю, верен ли текст у этого поля. Оба элемента позволяют увидеть текст на странице, но если я хочу проверить текст этих элементов, мне придется использовать слегка различные подходы:
cy
.get('div')
.should('have.text', ' Пожалуйста, введите имя:')
cy
.get('input')
.type('Rick Sanchez')
.should('have.value', 'Rick Sanchez')
Разница в том, что div-элемент содержит определенный текст, но элементы input используются в HTML для ввода значений. Очень советую изучить документацию и разобраться в различных типах полей ввода.
Получение атрибута
Вы можете оказаться в ситуации, когда вам нужно проверить ссылки. В этом случае полезно будет получение атрибута href из элемента. Допустим, у нас есть ссылка:
<a href="https://docs.cypress.io">Read the docs!</a>
Для проверки атрибута href можно написать примерно такой тест:
cy
.get('a')
.invoke('attr', 'href')
.should('eq', 'https://docs.cypress.io')
К тому же можно проверить, что ссылка валидна, сделав http-запрос:
cy
.get('a')
.invoke('attr', 'href')
.then(href => {
cy
.request(href)
.its('status')
.should('eq', 200);
});
Вызов свойств
Используя .invoke(‘prop’), можно получить доступ к различным свойствам выбранного элемента. Полный список этих свойств можно найти в Chrome DevTools. Для доступа к ним кликните по элементу и откройте панель свойств.
Как можно видеть, вариантов тут много. К примеру, можно воспользоваться командой .invoke(), чтобы проверить, отмечен ли чекбокс:
cy
.get('input')
.invoke('prop', 'checked')
.then(state => {
console.log(`checkbox is ${state ? 'checked' : 'not checked'}`)
});
Помните, как мы тестировали значение конкретного ввода? Используя .invoke(), мы можем передать это значение другой функции, вот так:
cy
.get('input')
.type('Rick Sanchez')
.invoke('val')
.then(val => {
const inputValue = val;
});
Раньше у меня в приложении был плохой input-элемент, который рендерился в ходе теста заново, удаляя введенные данные. Я написал специальную команду “напечатать и проверить”, которая пробовала повторный ввод, если input неверно работал.
Cypress.Commands.add('typeAndCheck', { prevSubject: true }, (subject, input) => {
cy
.wrap(subject)
.type(input);
cy
.wrap(subject)
.then(($subj) => {
if ($subj[0].value !== input) {
cy
.wrap(subject)
.clear({ force: true })
.typeAndCheck(input);
}
});
});Это довольно грязное решение. Рекомендую прочитать эту отличную статью об идентификации проблем кода (вышеописанная ситуация – одна из них!), или статью Глеба Бахмутова о том, когда тесту надо разрешать печатать.
Другая интересная штука с .invoke() в том, что передача второго аргумента этой функции позволит вам изменить значение и (типа) имитировать вставку текста в текстовую область. Я писал об этом недавно, можно ознакомиться. Простой пример будет выглядеть так:
cy
.get("input")
.invoke('val', 'paste this text')
Надеюсь, вам понравилось!
Обсудить в форуме
Component
You can also use Cypress to mount components from some web frameworks and
execute component tests.
Cypress ecosystem
Cypress consists of a free,
open source,
locally installed Test Runner
and a Dashboard Service for
recording your tests.
Cypress in the real world
Cypress makes it quick and easy to start testing, and as you begin to test your
app, you’ll often wonder if you’re using best practices or scalable
strategies.
To guide the way, the Cypress team has created the facebookinstagramtwitterpinterestvklinkedin We would like to inform you that the operation of the CyprusFlightPass platform may be partially interrupted on Thursday 2/12/2021 from 17:30 to 19:30 (UTC 3) due to a scheduled upgrade. During that time, electronic payments for the Special Permissions through the CyprusFllightPass platform, will NOT be available. We apologize for any inconvenience and thank you for your understanding.
Debugging tests
Readable error messages help you to debug quickly. You also have access to all
the developer tools you know and love.
Features
Cypress comes fully baked, batteries included. Here is a list of things it can
do that no other testing framework can:
In a nutshell
Cypress is a next generation front end testing tool built for the modern web. We
address the key pain points developers and QA engineers face when testing modern
applications. We make it possible to:
Other
Finally, through a large number of
official and 3rd party plugins you can write Cypress
a11y,
visual,
email
and other types of tests.
Our mission
Our mission is to build a thriving, open source ecosystem that enhances
productivity, makes testing an enjoyable experience, and generates developer
happiness. We hold ourselves accountable to champion a testing process that
actually works.We believe our documentation should be approachable. This means enabling our
readers to understand fully not just the what but the why as well. We want to help developers build a new generation of modern applications faster,
better, and without the stress and anxiety associated with managing tests. We know that in order for us to be successful we must enable, nurture, and
foster an ecosystem that thrives on open source. Every line of test code is an
investment in your codebase, it will never be coupled to us as a paid
service or company. Tests will be able to run and work independently, always.We believe testing needs a lot of and we are here to
build a tool, a service, and a community that everyone can learn and benefit
from. We’re solving the hardest pain points shared by every developer working on
the web. We believe in this mission and hope that you will join us to make
Cypress a lasting ecosystem that makes everyone happy.
Running tests
Cypress runs as fast as your browser can render content. You can watch tests run
in real time as you develop your applications. TDD FTW!
Setting up tests
There are no servers, drivers, or any other dependencies to install or
configure. You can write your first passing test in 60 seconds.
Test types
Cypress can be used to write several different types of tests. This can provide
even more confidence that your application under test is working as intended.
Writing tests
Tests written in Cypress are meant to be easy to read and understand. Our API
comes fully baked, on top of tools you are familiar with already.
Автотесты на CypressПервое впечатление и встречающиеся проблемы
Дмитрий Кочергин, Lead Software Developer LuxoftПрежде всего хочу отметить, что я не профессиональный автотестер, а Java-программист. Но однажды поступила задача сделать smoke тесты для базовой проверки основных функций приложения, которое недавно поломали изменением в API зависимого сервиса без предупреждения.Статья будет интересна всем, кто интересовался автотестированием с нуля на JS, но боялся спросить. Начну с того, что по автотестированию я ничего никогда не читал. Основной преконсепшн был, что автотесты это сложно, потому что по отзывам пока этот Selenium настроишь… Плюс надо учить XPath и PageObject, чего делать вообще не хотелось. Быстрый поиск по интернету дал более молодые и перспективные инструменты: WebDriver.IO, Pupeteer (а сейчас лучше Playwright) и Cypress. Выбрал последний, купился на красивые обещания и несколько комментов из холиваров по лучшим инструментам для автотестов.Так выглядит окно браузера запущенного теста. Слева выполненные команды теста и статус, справа просмотр приложение во время исполнения теста: Вот так выглядит код теста (в Cypress — весь код на JS, а селекторы – это обычные CSS селекторы): В runtime выглядит так: Пока искал инструмент для автотестов – в голове у меня была картинка, что тесты можно создавать прямо в браузере, чтобы просто «нажал на запись скрипта» – система записала мои действия (CSS селекторы элементов, на которые я нажимал). Потом я смотрю сгенерированный тест, подправляю селекторы если нужно, и сохраняю в Test Suite. Эх…Сказка оказалась тогда недостижимой и таких инструментов я не нашел (возможно кто-то в комментах подскажет правильный путь). Но в Cypress подкупило то, что тесты выполняются в настоящем браузере, и даже можно параллельно с выполнением теста исследовать DOM любимыми инструментами разработчика Chrome (если например селектор не сработал – можно открыть консоль и сразу при исполнении теста посмотреть почему).
Ввод текста
В этом разделе мы будем использовать страницу The-Internet’s login. Нам нужен способ сначала идентифицировать элементы. Скриншот сайта для тестированияСкриншот из DeveloperToolsСкриншот из DeveloperTools
Держите тесты изолированными
Рассмотрим ситуацию, когда вы тестируете свое приложение. Структура вашего проекта будет выглядеть примерно так: Не самая лучшая структураВ вашем Test Runner это будет выглядеть так: Отображение тестовой структуры в Test RunnerКоманда Cypress утверждает, что структура вашего проекта должна быть организована как можно лучше. Лучше всего перегруппировать ваши файлы проекта в другие папки, например: Хорошая структура проектаСледовательно, это выглядело бы так:
Запуск веб-сайтов
Здесь мы попробуем запустить Demoblaze , сайт, созданный для проведения тестов. В своей папке /cypress/integration/ создайте файл с именем basicCommandsTest.js. В этом файле напишите следующий код: Код для basicCommandsTest.jsСохраните свой код и нажмите на basicCommandsTest.js в меню Test Runner: Клик по basicCommandsTest.js вTest RunnerРезультат запуска: Отлично! Наш код работает. В следующем разделе мы более глубоко погрузимся в тестирование с помощью Cypress. В итоге basicCommandsTest.jsдолжен выглядеть так:
Избегайте «атомарных» тестов
Взгляните на этот фрагмент кода: Здесь мы повторно выполняем тесты на HTML элементе с id равным first. Cypress не одобряет такого поведения. Это неэффективно, и есть способ лучше переписать этот код, например: Мы можем использовать метод and для связывания дополнительных команд should с нашим элементом.
Как идентифицировать элементы
Cypress использует селекторы JQuery для идентификации компонентов на веб-странице. Например, чтобы получить элемент myButton используя id, мы должны написать следующий код: Получение элемента через id элементаВ качестве альтернативы, чтобы идентифицировать элемент myButton используя имя класса, могли бы использовать следующую строку: Получение элемента через имя классаДавайте теперь поработаем с взаимодействием с пользовательским интерфейсом нашего сайта.
Команда each
Взгляните еще раз на The-Internet’s Add Elements page: Скриншот тестового сайтаЧтобы удалить все эти элементы, мы можем вручную прокликать все кнопки Delete. Это возможно; однако рассмотрим ситуацию, когда кнопок Delete больше сотни. Следовательно, удаление всех их вручную займет много времени. Вот здесь-то и появляется команда each. Она позволяет вам перебирать серию элементов, а затем выполнять любую функцию для каждого из них. В этом случае мы хотим перебрать все наши кнопки Delete и запустить функцию click на всех них.Откройте Developer Tools: Все наши кнопки Delete имеют свойство class равное added-manually. В этом случае мы будем использовать селектор классов и соединять его с командой each, например: Получение элемента и использование each затемПерейдите в /cypress/integration/runningClickCommand.jsи добавьте следующий фрагмент кода: Код для runningClickCommand.jsРезультат выполнения кода должен быть следующим: Результат выполнения кодаНаш код работает! Поскольку наш тест был быстрым, давайте попробуем добавить на страницу больше элементов. Найдите следующий фрагмент кода: Измените это так: Запустите код еще раз. Результат должен быть таким: Результат выполнения кодаКак видите, наша программа автоматически удалила все элементы на странице без каких-либо ручных усилий. Отлично! В следующей части статьи мы узнаем о том, что можно и чего нельзя делать при тестировании с Cypress. В итоге cypress/integration/runningClickCommand.jsдолжен выглядеть так:
Нажатие кнопки
В этом разделе мы будем использовать страницу The-Internet для запуска наших тестов. На этом веб-сайте мы будем использовать раздел добавления/удаления элементов. Давайте сначала попробуем идентифицировать нашу кнопку «Добавить элемент». Страница для тестированияИспользуя DevTools, заметьте, что у buttonесть свойство onclick, имеющее значение addElement(). Скриншот из DeveloperToolsСоответствующий селектор для этой кнопки будет выглядеть так: Идентификация элементаВ папке /cypress/integration создайте файл с именем runningClickCommand.js. В этом файле напишите следующий код: Запустите код. Результат: Вывод результатаОтлично, наш код работает! Обратите внимание, что как только страница загрузилась, в нашем тесте автоматически происходит нажатие на кнопку Add Element. Давайте теперь поработаем с вводом текста в текстовое поле.
Не запускайте сервер в Cypress
Командаexec присутствует для запуска команд в терминале. Но запускать сервер с помощью этой команды крайне не рекомендуется. Если вы хотите протестировать свое приложение на localhost, сначала запустите сервер, а затем запустите свой тест Cypress. Команды терминала
Неявные утверждения
Ранее мы выполняли утверждения для переменных и объектов. Однако в реальном мире мы хотели бы выполнять утверждения для текста, расположенного в нашем элементе HTML, или проверять, есть ли у нашего элемента ul дочерние элементы li или нет.Для выполнения таких утверждений мы будем использовать ключевое слово should. В этом разделе мы будем делать неявные утверждения на странице добавления элемента — The-Internet’s Add Element Скриншот тестируемой страницыDeveloper ToolsНаша кнопка Delete имеет класс added-manually. Мы хотим выполнить следующее утверждение для этого элемента button: Наше утверждениеДля этого мы должны использовать следующий синтаксис: Получение элемента и за тем утверждениеАльтернативно, можем выполнить такое утверждение: Наше утверждениеМы можем использовать эту строку кода: Получение элемента и затем утверждениеПерейдите в /cypress/integration/runningClickCommand.jsи добавьте следующий код: Код для runningClickCommand.jsЗапустите код. Результат в конце теста должен быть следующим: Результат запускаОтлично! Наш код работает. Теперь перейдем к изучению команды each. В итоге cypress/integration/runningClickCommand.js должен выглядеть так:
Переключение чекбоксов
В этом разделе мы будем использовать раздел чекбоксов на странице The-Internet . Давайте сначала посмотрим на DevTools: Developer ToolsОба этих чекбокса имеют свойство type со значениемcheckbox. Кроме того, они также являются дочерними элементами для элементаform с id равным checkboxes. В этом случае мы бы использовали селектор JQuery родитель-потомок:Идентификация наших чекбоксовВ каталоге /cypress/integration/ создайте файл с именем runningCheckCommand.js и напишите следующий код: Запустите код. Результат: Результат запуска тестаОтлично! Наш код работает. Давайте теперь поработаем над неявными утверждениями с помощью Cypress.
По возможности используйте собственные команды
Взгляните на этот фрагмент кода: Пример кодаОбратите внимание, что мы вынуждены многократно использовать команды getи type. Здесь мы можем реализовать собственные команды, чтобы сделать их короче. В вашем cypress/support/commands.jsнапишите этот код: Примечание . Считается хорошей практикой записывать свои собственные команды в файл /cypress/support/commands.js. Теперь вернитесь в свой тестовый файл и замените его вот так: Пример кодаКак видите, наш код выглядит значительно короче.
Простые тесты с утверждением и ожиданием значения
В вашем файле /cypress/integration/basicTest.js напишите следующий код: Код к файлу basicTest.jsЧтобы запустить вашу программу, щёлкните по basicTest.js в вашем сервере Cypress. Щелчок по basicTest.js в Test RunnerРезультат запуска: Результат запуска тестаОтлично! Значит, наше утверждение было успешным. Что, если мы сделаем заведомо ложное утверждение? Теперь в /cypress/integration/basicTest.js добавьте следующий код в пределах функции describe: Код для добавление в basicTest.jsСнова запустите код. Результат будет: Результат нашего второго тестаОбратите внимание, как наш второй тест не удался. Если бы результат был правильным, тест прошел бы успешно. Давайте больше поиграем с утверждениями. Добавьте в basicTest.js следующий код: Код для добавления в basicTest.jsРезультат выполнения теста: Результат теста: успешно!Отлично! Наш тест прошел. Функция expect выполняет BDD (behavior-driven) утверждения. В следующем разделе мы выполним утверждения, основанные на тестировании(test-driven assertions). Сейчас /cypress/integration/basicTest.jsдолжен выглядеть так:
Создание файла
Cypress требует, чтобы все наши тесты находились в каталоге cypress/integration. Сначала перейдите в этот каталог: Переход к cypress/integrationТеперь создайте файл JavaScript с именем basicTest.js: Создание JavaScript файлаЕсли вы не отключили сервер Cypress, ваши новые файлы появятся в Test Runner в реальном времени: Обновление структуры файлов в реальном времениТеперь давайте напишем наш первый тест.
Установка и настройка Cypress
Сначала создайте отдельную папку для вашего проекта, а затем инициализируйте ее: Инициализация проектаНаконец, чтобы установить библиотеку Cypress: Установка CypressПримечание . Если вы используете дистрибутив Linux, перейдите к этим инструкциям, прежде чем продолжить установку Cypress через NPM. Теперь, когда Cypress установлен, попробуйте запустить его с помощью следующей команды: Открытие CypressОна открывает запускалку тестов(Test Runner): Интерфейс Test RunnerА теперь давайте перейдём к написанию тестов.
Заключение
Тестирование — ключевой шаг в процессе разработки, поскольку он обеспечивает правильную работу вашего приложения. Некоторые программисты предпочитают вручную тестировать свои программы, поскольку написание тестов требует значительного количества времени и энергии. К счастью, Cypress решил эту проблему, позволив разработчику писать тесты в короткие сроки.Спасибо, что дожили до конца! Если вы почувствовали какое-либо замешательство, я советую вам поиграть с кодом и разобрать примеры.