как установить cypress на windows

Русские Блоги

Установите Cypress с NPM в среде Windows

Введение

В последние несколько лет мы сначала подумали, что первый инструмент Selenium первой мысли, но с модернизацией технологии веб-боковых, множеством интерфейсных испытательных структур, эти рамки не полагаются на Selenium, поэтому тест кипариса Рамки ушли в тенденцию этого технологического обновления.

Во-вторых, кипарис

(1) Cypress решает основные болевые точки, которые разработчики и качественные инженеры столкнулись с разработчиками и качественными инженерами в современной сети.

(2) Cypress основан на Front-End Test-инструменте JavaScript, который можно проверить в любом контент, работающем в браузере.

(3) Cypress сравнивается с инструментом селена, принципиально и архитектуры различны, и кипарис не ограничен Selenium, и протокол в основе кипариса не использует WebDriver.

(4) Cypress отличается от других тестовых инструментов автоматизации UI, который обеспечивает полный конец теста, который может писать все типы тестов (тесты на единиц, тесты в интеграции) и могут настроить тест, тест записи, тест на выполнение, Испытание отладки.

Примечания: Мы также можем обратиться к учителю CAI CHAO «Cypress от начала начала к влаждению»

В-третьих, экологические требования

Операционная система: версия Windows 7 или более высокая операционная система.

Версия Nodejs: требуют Node.js 8 или выше.

В-четвертых, установка NPM

NPM интегрирован в новую версию Node.js, может решить многие проблемы на развертывании кода Node.js, и общие сценарии использования имеют следующее:

(1) Разрешить пользователям загрузки третьих лиц, подготовленных с сервера NPM к локальному использованию.

(2) Разрешить пользователям загружать и установить программу командной строки, написанную другими с сервера NPM к локальному использованию.

(3) Разрешить пользователям загружать свои собственные пакеты или команды на серверы NPM для других для использования.

◎ Поскольку новая версия Node.js была интегрирована с NPM, вы можете убедиться, что NPM успешно установлен, введя следующую команду, введя следующую команду в окне Cmd.

◎ Если версия NPM слишком низкая, вы можете обновить версию NPM по следующим инструкциям.

V. Установка кипариса

Сначала создайте каталог папок Cypress (например,: D: \ Software \ Cypress) на вашем локальном компьютере, а затем в окне CMD, CD входит в созданный каталог Cypress, вы можете установить Cypress

6. Cypress Starts

(2) Вы также можете начать через NPX, поэтому вам не нужно вводить каталог Node_Modules.bin без CD. Команда выполнения выглядит следующим образом:

Семь, решайте проблему предупреждения по установке кипариса

При установке спереди вы увидите отсутствующий файл NPM Warn SaveError Enont: нет такого файла или каталога, откройте «D: \ Software \ Cypress \ package.json» Это предупреждение

Решение:

(1) Создание файла Package.json под корневым каталогом D: \ Software \ Cypress.

(2) Введите следующее в файле Package.json

(3) Вы можете начать кипарис обычно в каталоге Cypress.

Источник

Cypress для начинающих: начало работы со сквозным тестированием

Базовый требования

Чтобы продолжить, вам понадобится рабочая установка Node.js в вашей системе. Кроме того, полезно иметь базовое понимание нового синтаксиса JavaScript.

Что такое Cypress? Что такое сквозное тестирование?

Сквозное тестирование (End to End Testing), или тестирование пользовательского интерфейса, — это один из многих подходов к тестированию веб-приложений.

Сквозной тест проверяет, работает ли веб-приложение должным образом, путем тестирования так называемого пользовательского потока — user flow.

Важно ли сквозное тестирование? Да, это так. Но никто не любит тесты E2E. Они могут быть медленными, громоздкими и дорогими в написании.

С другой стороны, тестирование вселяет уверенность в то что ваше приложение работает должным образом. Вы бы специально отправили своим пользователям неисправный продукт?

Настройка проекта

Создадим новую папку cypress-tutorial, зайдем в нее и инициализируем новый проект JavaScript:

Внутри этой папки создадим два новых файла.

HTML-документ index.html:

Это HTML-форма с набором входных данных и текстовым полем textarea.

Затем создайте файл JavaScript form.js с минимальной логикой для обработки отправки формы:

Обратите внимание, что я не добавил стили для простоты примера. Теперь, мы готовы установить Cypress.

Установка Cypress

Чтобы установить Cypress, все еще находясь в папке проекта, запустите:

Дайте ему минуту (ему нужно скачать двоичный файл), а затем запустите:

Cypress запустится в первый раз, и в вашем проекте появится куча новых папок. Вы можете безопасно удалить папку с примерами (examples).

Закроем окно и перейдем к следующему разделу.

Запуск проекта

Для запуска проекта на локальном компьютере убедитесь, что у вас установлена новая версия Node.js, а затем запустите команду:

Она запустит сервер разработки по адресу http://localhost:5000/. Перейдя по ссылке вы увидите нашу форму:

Теперь пора написать наш первый тест!

Написание первого теста

Создайте новый файл в cypress/integration/form.spec.js и напишите свой первый блок:

describe — это метод Cypress (заимствованный из Mocha) для хранения одного или нескольких связанных тестов. Каждый раз, когда вы начинаете писать новый набор функциональных тестов, оборачивайте его в блок describe.

Как видите, он принимает два аргумента: строку для описания набора тестов и функцию обратного вызова для обертывания фактического теста.

Далее мы встретимся с другой функцией, называемой it, которая является фактическим тестовым блоком:

Если вы знаете Jest, вы можете вспомнить, что он использует it или test взаимозаменяемо. В случае с Cypress дело обстоит иначе. it единственный возможный блок.

А теперь время для дымового теста (smoke test)! В блоке it напишите:

Здесь cy — сам Cypress. visit — это метод Cypress для перехода по заданному пути.

get — это метод выбора элементов на странице. С помощью этого кода мы говорим Cypress «иди, и возьми форму на странице».

Через минуту мы увидим Cypress в действии, но сначала немного настроек!

Настройка Cypress

Чтобы немного упростить работу, мы собираемся настроить Cypress. Для начала откройте package.json и создайте скрипт с именем e2e, указывающий на двоичный файл Cypress:

Команда open запускает визуальное отображение прохождения тестов (в браузере видимое для программиста). Есть еще команда run которая запускает прохождение тестов в консоле.

Затем откройте cypress.json и настройте базовый URL:

С помощью этой опции мы говорим Cypress посещать только наш URL-адрес разработки. (5000 — порт по умолчанию для пакета serve

Теперь мы готовы запустить ваш первый тест!

Запускаем тест

Готовы? Когда сервер разработки все еще работает в терминале:

откройте другой терминал и запустите:

Вы должны увидеть, как Cypress откроет браузер и отобразить страницу. После запуска теста на странице будет что то типа такого:

Это был ваш первый запуск теста! И visit, и get — это команды Cypress, которые также действуют как неявные утверждения (implicit assertions), то есть, если элемент находится на странице, Cypress будет считать, что тест пройден.

Теперь давайте продолжим расширять наш тест, чтобы увидеть, может ли пользователь заполнить форму:

Вот еще одна команда Cypress: type, которая, что неудивительно, вводит в наш input элемент указанный текст. Также обратите внимание на селектор CSS для получения элемента ввода.

А пока давайте добавим еще одну команду: should. Эта команда создает утверждение и используется, например, для проверки того, обновляет ли input элемент свое состояние должным образом:

Обратите внимание на have.value. Если вы новичок в этой концепции, вы можете узнать больше об утверждениях здесь.

Проведя минимальный тест, продолжим в следующем разделе.

Больше тестов и Submit

Чтобы продолжить наш тест, мы можем проверить ввод электронной почты:

Также мы можем проверить текстовую область textarea:

Если вы оставили Cypress открытым, тест должен отслеживать ваши изменения и запускаться автоматически:

Как мило! В качестве вишенки на торте давайте протестируем отправку формы с помощью submit:

Тест должен пройти без проблем. Вы можете заметить одну вещь: все используемые команды с самоописанием: type, submit. Это простой английский.

Теперь давайте немного пофантазируем в следующем разделе с тестированием запросов XHR.

Заглушка запросов XHR с помощью Cypress

Помимо всего прочего, Cypress также может перехватывать запросы AJAX и имитировать ответы. Этот подход известен как stubbing (заглушка).

Чтобы понять разницу между mocking и stubbing, прочтите этот пост.

Stubbing удобен при разработке, когда вам нужен возврат фальшивого ответа на ваши запросы AJAX.

Чтобы продемонстрировать эту возможность, давайте добавим в наш тест следующий фрагмент кода:

Здесь cy.server запускает «виртуальный» сервер, в то время как cy.route настраивает поддельную конечную точку API.

Теперь давайте добавим еще один тест для проверки: после того, как пользователь отправит форму, мы хотим проверить, отвечает ли поддельное API.

Использование stubbing полезно, потому что мы можем полностью обойти настоящее API в процессе разработки. Давайте расширим тест с помощью cy.contains:

Ожидается, что тест завершится неудачно, потому что нет логики для отправки формы в API. В следующем разделе мы поправим тест.

Отправка данных формы в API

На момент написания Cypress не мог перехватывать запросы Fetch. Начиная с версии 4.9.0 Cypress имеет экспериментальную поддержку Fetch stubbing. Чтобы включить его, настройте experimentalFetchPolyfill в cypress.json:

В этом примере, написанном до 4.9.0, мы будем использовать XMLHttpRequest. Откройте form.js и реализуйте следующую логику:

В этом фрагменте я использую событие formdata, вызываемое, когда мы вызываем new FormData.

В прослушивателе событий мы создаем объект с fromEntries (ECMAScript 2019). Далее мы отправляем данные в API.

Чтобы пройти тест, нам также необходимо получить ответ от API и сохранить его в документе. Для этого мы можем прослушивать событие onload XMLHttpRequest:

Наконец, мы можем что опасно (но мы это сделаем просто для простоты) сохранить ответ на странице (пожалуйста, не делайте этого в вашей кодовой базе):

Пришло время посмотреть на прохождение теста!

Заглушка запросов XHR с помощью Cypress: успешный тест

Подведем итоги полного теста в cypress/integration/form.spec.js:

Вот полный код для form.js:

Следует иметь в виду, что настоящее API вряд ли вернет ту же форму, что и наша фальшивая заглушка. При разработке реального приложения вам действительно необходимо адаптировать свои тесты к реальной системе.

На данный момент у нас все в порядке, и если вы оставили Cypress открытым, вы уже должны увидеть успешное прохождение теста:

Вы можете увидеть раздел маршрутов вверху слева и заглушку XHR в тестовых выходных данных, это означает, что Cypress перехватил запрос POST.

Это одна из лучших особенностей Cypress, не считая десятков готовых к использованию команд и утверждений.

Данной заглушкой можно закончить урок. Прекрасная работа!

Выводы

Я надеюсь, что вы узнали что-то новое из этого урока, и вы примените эти концепции в своем следующем проекте! Тестирование важно!

Сквозное тестирование не должно быть трудным: Cypress делает его приятным и приятным. Команда Cypress действительно справилась с этим.

Кроме того, есть очень подробная документация: Cypress Docs наполненная передовыми практиками и примерами.

Источник

Как проводить сквозное (end-to-end) тестирование вашего приложения используя Cypress.io

В этой статье вы узнаете:

Что такое Cypress и когда его стоит использовать

Основы тестирования с использованием Cypress

Расширенные команды Cypress

Взаимодействие с элементами пользовательского интерфейса

Лучшие практики с использованием Cypress

Введение

Чтобы протестировать свои приложения, вам потребуется сделать следующие шаги:

Подождать пока сервер запустится

Провести ручное тестирование приложения(нажать на кнопки, ввести случайные текст в поля ввода или отправить форму)

Проверить, что результат вашего теста корректен(изменения заголовка, части текста и т.д.)

Повторить эти шаги ещё раз после простых изменений кода

Повторение этих шагов снова и снова становится утомительным и отнимает у вас слишком много времени и энергии. Что, если бы мы могли автоматизировать этот процесс тестирования Благодаря этому вы можете сосредоточиться на более важных вещах и не тратить время на тестирование пользовательского интерфейса снова и снова.

Именно здесь в игру вступает Cypress. При использовании Cypress единственное, что вам нужно сделать, это:

Написать код вашего теста(нажатие на кнопку, ввод текста в поля ввода и т.п.)

Запустить или перезапустить тест

Только и всего! Библиотека Cypress выполняет все тесты за вас. И самое приятное, что она не только сообщает вам все ли ваши тесты успешны или нет, но также сообщает вам, какой тест не удался.

Помимо этого, тестирование вашего кода — отличная практика, поэтому вам придется позже изучить соответствующий фреймворк. Cypress позволяет запускать тесты за считанные минуты.

Теперь, когда мы обсудили преимущества Cypress, давайте узнаем об основах этой библиотеки.

Начало

Установка и настройка Cypress

Сначала создайте отдельную папку для вашего проекта, а затем инициализируйте ее:

Инициализация проекта

Наконец, чтобы установить библиотеку Cypress:

Установка Cypress

Теперь, когда Cypress установлен, попробуйте запустить его с помощью следующей команды:

Открытие Cypress

Она открывает запускалку тестов(Test Runner):

Интерфейс Test Runner

А теперь давайте перейдём к написанию тестов.

Основы Cypress

Создание файла

Переход к cypress/integration

Теперь создайте файл JavaScript с именем basicTest.js :

Создание JavaScript файла

Если вы не отключили сервер Cypress, ваши новые файлы появятся в Test Runner в реальном времени:

Обновление структуры файлов в реальном времени

Теперь давайте напишем наш первый тест.

Простые тесты с утверждением и ожиданием значения

В вашем файле /cypress/integration/basicTest.js напишите следующий код:

Код к файлу basicTest.js

Строка 1: Функция describe сообщает Cypress название набора наших тестов.

Чтобы запустить вашу программу, щёлкните по basicTest.js в вашем сервере Cypress.

Щелчок по basicTest.js в Test Runner

Результат запуска теста

Отлично! Значит, наше утверждение было успешным.

Что, если мы сделаем заведомо ложное утверждение? Теперь в /cypress/integration/basicTest.js добавьте следующий код в пределах функции describe :

Код для добавление в basicTest.js

Строка 2: Если сумма 4 и 5 равна 10, тест будет пройден. В противном случае, незамедлительно остановлен.

Снова запустите код. Результат будет:

Результат нашего второго теста

Обратите внимание, как наш второй тест не удался. Если бы результат был правильным, тест прошел бы успешно.

Давайте больше поиграем с утверждениями. Добавьте в basicTest.js следующий код:

Код для добавления в basicTest.js

Строка 2: Если сумма 5 и 5 не равна 100, то тест должен пройти.

Результат выполнения теста:

Результат теста: успешно!

Отлично! Наш тест прошел. Функция expect выполняет BDD (behavior-driven) утверждения. В следующем разделе мы выполним утверждения, основанные на тестировании(test-driven assertions).

Сейчас /cypress/integration/basicTest.js должен выглядеть так:

Написание утверждений основанных на тестировании(test-driven assertions) с явным использованием assert

В вашем файле basicTest.js напишите следующий код:

Строка 10: Убеждаемся, что переменная name содержит строковое значение.

Строка 14: Убеждаемся, что переменная name не является целым числом.

Запустите код. Результатом будет:

Результат запуска нашего теста

Отлично! Наш код работает. В следующем разделе мы научимся работать с сайтами через Cypress.

Сейчас наш basicTest.js должен выглядеть так:

Запуск веб-сайтов

Код для basicCommandsTest.js

Сохраните свой код и нажмите на basicCommandsTest.js в меню Test Runner:

Клик по basicCommandsTest.js вTest Runner

Отлично! Наш код работает. В следующем разделе мы более глубоко погрузимся в тестирование с помощью Cypress.

В итоге basicCommandsTest.js должен выглядеть так:

Cypress: Расширенные команды

В этом разделе мы попытаемся взаимодействовать с элементами на странице. Однако, прежде чем продолжить этот процесс, нам нужно сначала научиться идентифицировать элементы HTML в Cypress.

Как идентифицировать элементы

Cypress использует селекторы JQuery для идентификации компонентов на веб-странице.

Получение элемента через id элемента

В качестве альтернативы, чтобы идентифицировать элемент myButton используя имя класса, могли бы использовать следующую строку:

Получение элемента через имя класса

Давайте теперь поработаем с взаимодействием с пользовательским интерфейсом нашего сайта.

Нажатие кнопки

В этом разделе мы будем использовать страницу The-Internet для запуска наших тестов. На этом веб-сайте мы будем использовать раздел добавления/удаления элементов.

Давайте сначала попробуем идентифицировать нашу кнопку «Добавить элемент».

Страница для тестирования

Скриншот из DeveloperTools

Соответствующий селектор для этой кнопки будет выглядеть так:

Идентификация элемента

Строка 2: Переходим на веб-страницу.

Строка 6: Связываем в одну цепочку получение элемента button и нажатие на эту кнопку.

Запустите код. Результат:

Вывод результата

Давайте теперь поработаем с вводом текста в текстовое поле.

Ввод текста

В этом разделе мы будем использовать страницу The-Internet’s login. Нам нужен способ сначала идентифицировать элементы.

Скриншот сайта для тестирования Скриншот из DeveloperTools Скриншот из DeveloperTools

Идентификация элемента через его id

Строка 3: Переходим на страницу входа в систему.

Строка 10: Нажимаем на кнопку «Отправить».

Запустите код. Результатом будет:

Вывод результата запуска кода

И мы закончили! В следующем разделе мы узнаем о работе с чекбоксами.

Переключение чекбоксов

Давайте сначала посмотрим на DevTools:

Developer Tools

Идентификация наших чекбоксов

В каталоге /cypress/integration/ создайте файл с именем runningCheckCommand.js и напишите следующий код:

Строка 7: Просим Cypress приостановить процесс тестирования на одну секунду.

Запустите код. Результат:

Результат запуска теста

Отлично! Наш код работает. Давайте теперь поработаем над неявными утверждениями с помощью Cypress.

Неявные утверждения

Ранее мы выполняли утверждения для переменных и объектов. Однако в реальном мире мы хотели бы выполнять утверждения для текста, расположенного в нашем элементе HTML, или проверять, есть ли у нашего элемента ul дочерние элементы li или нет.

Скриншот тестируемой страницы Developer Tools

Наше утверждение

Для этого мы должны использовать следующий синтаксис:

Получение элемента и за тем утверждение

Альтернативно, можем выполнить такое утверждение:

Наше утверждение

Мы можем использовать эту строку кода:

Получение элемента и затем утверждение

Перейдите в /cypress/integration/runningClickCommand.js и добавьте следующий код:

Код для runningClickCommand.js

Запустите код. Результат в конце теста должен быть следующим:

Результат запуска

В итоге cypress/integration/runningClickCommand.js должен выглядеть так:

Команда each

Скриншот тестового сайта

Откройте Developer Tools:

Получение элемента и использование each затем

Перейдите в /cypress/integration/runningClickCommand.js и добавьте следующий фрагмент кода:

Код для runningClickCommand.js

Строка 3: Обёртываем этот элемент, чтобы мы могли выполнять с ним команды Cypress. Здесь мы отправляем команду щёлкнуть по этим элементам.

Результат выполнения кода должен быть следующим:

Результат выполнения кода

Наш код работает! Поскольку наш тест был быстрым, давайте попробуем добавить на страницу больше элементов.

Найдите следующий фрагмент кода:

Строка 2: Запускаем цикл, чтобы сообщить Cypress, что нужно нажать кнопку Add Element 20 раз.

Запустите код еще раз. Результат должен быть таким:

Результат выполнения кода

Как видите, наша программа автоматически удалила все элементы на странице без каких-либо ручных усилий. Отлично!

В следующей части статьи мы узнаем о том, что можно и чего нельзя делать при тестировании с Cypress.

В итоге cypress/integration/runningClickCommand.js должен выглядеть так:

Лучшие практики

Держите тесты изолированными

Рассмотрим ситуацию, когда вы тестируете свое приложение. Структура вашего проекта будет выглядеть примерно так:

Не самая лучшая структура

В вашем Test Runner это будет выглядеть так:

Отображение тестовой структуры в Test Runner

Команда Cypress утверждает, что структура вашего проекта должна быть организована как можно лучше. Лучше всего перегруппировать ваши файлы проекта в другие папки, например:

Хорошая структура проекта

Следовательно, это выглядело бы так:

По возможности используйте собственные команды

Взгляните на этот фрагмент кода:

Пример кода

В вашем cypress/support/commands.js напишите этот код:

Строка 2: Получаем элемент с соответствующим идентификатором, а затем вводим в него данные.

Теперь вернитесь в свой тестовый файл и замените его вот так:

Пример кода

Как видите, наш код выглядит значительно короче.

Избегайте «атомарных» тестов

Взгляните на этот фрагмент кода:

Cypress не одобряет такого поведения. Это неэффективно, и есть способ лучше переписать этот код, например:

Мы можем использовать метод and для связывания дополнительных команд should с нашим элементом.

Не запускайте сервер в Cypress

Команда exec присутствует для запуска команд в терминале. Но запускать сервер с помощью этой команды крайне не рекомендуется.

Команды терминала

Репозиторий GitHub и дополнительные ресурсы

Код GitHub

Дальнейшее чтение

Заключение

Тестирование — ключевой шаг в процессе разработки, поскольку он обеспечивает правильную работу вашего приложения. Некоторые программисты предпочитают вручную тестировать свои программы, поскольку написание тестов требует значительного количества времени и энергии. К счастью, Cypress решил эту проблему, позволив разработчику писать тесты в короткие сроки.

Спасибо, что дожили до конца! Если вы почувствовали какое-либо замешательство, я советую вам поиграть с кодом и разобрать примеры.

Источник