Что такое кипарис?
Cypress – это интерфейсный тестирующий инструмент. Cypress позволяет вам проверить все, что работает в браузере. С Cypress вы можете написать тесты подразделения, тесты интеграции и сквозные тесты. Cypress Architectory позволяет вам полный контроль над вашим приложением.
Cypress направлен на то, чтобы помочь вам написать быстрее, проще и надежные испытания. Вместо того, чтобы выбирать кучу различных структур, библиотеки утверждений и других инструментов для начала, кипарис сделал эти варианты для вас и позволит вам сразу же писать тесты. Cypress также работает для любой рамки или веб-сайта. Реагировать, Vue, Ember, Vue, Elm … Cypress использует инструменты, которые вы, скорее всего, уже знаете, такие как jQuery, Mocha, Chai и Sinon.js … Стабильные инструменты, которые доказали свою ценность, все объединенные в кипарис.
Теперь, когда мы немного говорим о том, что это так, давайте использовать его!
Системные Требования
Cypress использует настольное приложение, установленное на вашем компьютере. Чтобы использовать его, у вас должны быть следующие операционные системы:
- MacOS 10,9 и выше (только 64-битная)
- Linux Ubuntu 12.04 и выше, Fedora 21 и Debian 8 (только 64-битная)
- Windows 7 и выше
Установка кипариса
В этой статье мы напишем наши тесты в приложении React. Итак, прежде чем что-нибудь еще мы создадим приложение React с Create-raction-app Отказ Давайте запустим следующую команду: Create-React-App First-Cypress-tests Отказ
Если у вас нет установленного приложения Create-ract-App, вы можете найти инструкции, чтобы получить его здесь Отказ Как только ваше приложение настроено, переместите внутреннюю папку New New Application: CD First-Cypress-Tests Отказ Далее мы установим пакет кипариса. Я буду использовать пряжу для этой статьи и запустить пряжа Добавить кипарис --dev Отказ Если вы являетесь пользователем NPM, вы можете запустить NPM установить кипарис --save-dev Отказ
Теперь, когда был установлен Cypress, мы можем запустить кипарис-тестовый бегун с командой пряжа запускает кипарис открытым . Или, с NPM, вы можете запустить $ (NPM Bin)/Cypress Open . Теперь вы должны на экране следующее окно.
Вы увидите, что кипарис создал для вас папку. Там вы найдете несколько полезных примеров о том, как писать тесты и некоторые примеры того, что вы можете сделать с кипарисом. Испытания примеров будут в кипарис/интеграция/примеры .
Запуск вашего первого теста
После нажатия на Хорошо понял! Зеленая кнопка, вы увидите пробег кипариса.
Есть несколько вещей, которые мы можем видеть здесь. Во-первых, вы можете увидеть все тестовые файлы, перечисленные в окне. Cypress автоматически найдет ваши тестовые файлы внутри кипарис/интеграция папка. Обратите внимание, как каждый файл заканчивается spec.js Отказ Я буду держать это название по всей статье, но вам не нужно. Справа, у вас немного раскрывается.
Это список доступных браузеров, найденных проведением кипариса-тестового бегуна. Когда кипарис запускает тесты, он запускает для вас браузер. Как видите, у меня есть только два варианта. Если вы хотите знать, какие браузеры можно использовать, и как их добавить, вы можете прочитать Документы Отказ Я буду придерживаться хрома на данный момент.
Хорошо, давайте запустим некоторые тесты! Есть два способа сделать это. Вы можете нажать Запустите все спецификации Кнопка справа или нажмите на имя файла. Если вы выполняете последнее, пройдут только тесты этого файла. Когда тесты начнут работать, вы будете открываться браузером, в зависимости от того, какой из них вы выбрали в Runner Cypress Test. Нам придется подробно вернуться к этому позже, потому что я хочу написать свои собственные пользовательские тесты сейчас.
Написание вашего первого теста
Возможно, вы уже догадались, что нужно, чтобы запустить тест в Cypress:
- Создайте тестовый файл в
кипарис/интеграция - Пусть Cypess обновляет список тестовых файлов в бегун тестирования кипариса в режиме реального времени
- Запустить тест
Давайте создадим папку под названием Пользовательский внутри нашего кипарис/интеграция папка. Я тогда создаю файл под названием first_tests.spec.js Внутри этой новой папки. Если вы вернетесь к The Cypress Test Runner, вы увидите, что наша папка и наш файл были добавлены в список! Реальное время !!
Отлично, теперь давайте напишем наш первый пропускной тест.
describe("First custom test", function() {
it("does something!", function() {
expect(5).to.equal(5);
});
});
Очень просто на данный момент. Вернитесь к The Cypress Test Runner и нажмите на наше имя файла, чтобы запустить наш новый тест. Вы увидите, что окно браузера открывается (Chrome для меня), и наш тест успешно запущен!
Вы разблокировали Напишите проходящий тест в Cypress! значок. Хорошая работа, молодой TDD падаван. Давайте теперь напишем сбой теста и посмотрите в действии в реальном времени.
Начнем с написания неудачного теста, который мы можем видеть в красном в браузере. Cypress Watches Тестовые файлы тестирования изменяются и обновляют результаты тестовых искров соответствующим образом. Довольно сладко!
Синтаксис испытаний может быть вам знакомым. Опишите () приходит от моча Например, и Ожидайте () приходит от Чай Отказ Как я уже упоминал ранее, они являются частью инструментов, которые выходят запеченные с кипарисом.
Хорошо, давайте напишем некоторые реальные тесты, вещи, которые мы могли бы фактически использовать в реальной жизни. Мы создаем приложение React Reaction ранее. У нас нет многого, но скелет, который у нас, даст нам написать несколько вещей.
Посещение нашей страницы приложения
Мое приложение React будет служить на порту 3000. Первое, что мы можем проверить, убедился, что он не сражается, когда я посещаю http://localhost: 3000 Отказ Давайте создадим файл под названием rage_app.spec.js внутри Cypress/Integration/Custom держать наши тесты. Нам также нужно будет запустить наше приложение. Беги Пряжа начать или NPM начать Чтобы запустить наше приложение React. Вы должны увидеть это, когда вы посетите http://localhost: 3000 :
Давайте напишем наш тест и посмотрите тестовый бегун ручка:
Несколько вещей происходят:
- Вы увидите Посетить Войдите в левую сторону.
- С правой стороны ваше приложение React загружается в предварительный просмотр приложения.
- Тест зеленый, даже если бы не было утверждений. Если запрос вернулся с кодом состояния 404 или 500, тест не удался.
- Посетить Тест имеет синий фон, пока страница загружается. Это указывает на ожидаемое состояние.
Примечание: Убедитесь, что вы проверяете приложения, которые вы управляете. Не проверяйте веб-сайты, которые вы не контролируете. Они могут измениться в любой момент, или некоторые функции безопасности были включены, чтобы помешать функционированию кипариса.
Проверка на существование элемента
Я запустил приложение React, созданное из Create-raction-app команда. Из этого я знаю две вещи о состоянии HTML в нашем приложении: должен быть изображение и ссылка на домашней странице.
Для изображения я хочу проверить две вещи:
- Изображение имеет класс App-logo.
- Изображение имеет атрибут ALT логотип
Во-первых, давайте напишем сбой теста.
it("finds an image", function() {
cy.visit("http://localhost:3000");
cy.get("image");
});
Это терпит неудачу, но замечает время, чтобы пойти в красный цвет.
Больше чем 4 секунды Действительно 4.39 в моем случае. То есть потому, что кипарис автоматически ждет и повторный тест. Cypress ожидает найти элемент в какой-то момент в доме. Итак, это не будет терпеть неудачу сразу.
До чего-либо еще давайте изменим это, чтобы сделать наш тест-пропуск:
it("finds an image", function() {
cy.visit("http://localhost:3000");
cy.get("img");
});
И конечно, достаточно, он становится зеленым:
Отлично, по крайней мере, мы можем быть уверены, что есть Элемент на нашей странице. Далее мы проверим, если название класса App-logo используется изображением. Вот как ты это сделаешь:
it("finds an image", function() {
cy.visit("http://localhost:3000");
cy.get("img").should("have.class", "App-logo");
});
И это проходящий тест!
Наконец, мы хотим убедиться, что изображение имеет атрибут, равный логотип . Потому что cy.get () Возвращает объект jQuery, мы можем использовать Вызвать () метод, чтобы получить любой атрибут, который мы хотим.
it("finds an image", function() {
cy.visit("http://localhost:3000");
cy.get("img")
.should("have.class", "App-logo")
.invoke("attr", "alt")
.should("equal", "logo");
});
Теперь запустите тест, и это все еще зеленое.
DOM Snapshot
Я также хочу показать вам, как вы можете PIN-код DOM Snapshot, чтобы получить информацию в консоли. Откройте консоль разработчиков внутри браузера Cypress открыт для вас. Затем нажмите на Вызывать Линия в журналах слева. Вы должны увидеть серый пин-булавку фиолетовый. И посмотрите, что происходит в консоли? Насколько велика, чтобы иметь всю эту информацию? Это делает отладку ваших испытаний намного проще.
Примечание: Мы могли бы пойти дальше с нашим последним тестом, убедившись, что у нас есть только одно изображение в DOM с этими атрибутами или проверьте атрибут SRC. Я оставлю это тебе 😉
Нажав на элемент
Мы также знаем, что наше приложение React имеет ссылку. С Cypress мы можем взаимодействовать с этим элементом и убедиться, что он забирает нас, где он претендует на. Во-первых, я изменю Разметка элемента в нашем HTML, чтобы облегчить тестирование. Вот как это должно быть:
Я изменил атрибут Href, чтобы убедиться, что он остается внутри приложения, где у меня полный контроль над тем, что происходит. Давайте напишем тест, чтобы получить наш элемент:
it("clicks a link", function() {
cy.visit("http://localhost:3000");
cy.get("a.App-link")
.invoke("attr", "href")
.should("equal", "/about");
});
Я искал элемент с классом App-link и атрибут Href /о . Хорошо, теперь мы можем назвать щелчок методом на нашем элементе. Затем мы проверим, что новый URL – тот, который мы ожидаем.
it("clicks a link", function() {
cy.visit("http://localhost:3000");
cy.get("a.App-link")
.should($link => {
expect($link)
.attr("href")
.to.equal("/about");
})
.click();
cy.url().should("contain", "/about");
});
Этот тест может выглядеть немного сложнее. Давайте сломаемся.
- Во-первых, мы получаем наш элемент.
- Тогда мы используем должен () метод. Этот метод принимает обратный вызов с результатом предыдущего Получить () Отказ
- За пределами этого обратного вызова, прикованного к должен () это наш Нажмите () метод.
Зачем использовать обратный вызов? Ну, Нажмите () Метод взаимодействует с результатами последнего результата. Итак, если мы привязали метод к вызывать (). Должен () Метод, как мы использовали ранее, у нас будет ошибка, потому что результат этого цепочка не является элементом DOM. Вот почему мы должны сделать наш тест атрибута Href снаружи
Наконец, после всего этого мы проверяем, содержит ли URL-адрес строки /о Используя cy.url () функция.
Как видите, предварительный просмотр обновляет URL на основе Нажмите () мероприятие. Журналы показывают нам все разные шаги: Нажмите , Страница нагрузка , Новый URL Отказ
Заключение
Я надеюсь, что эта первая статья показала вам, что Power Cypress приносит в таблицу. Мы видели, как:
- Установите кипарис
- Запустите кипарис тестирования бегуна
- Проверьте приложение React
Я действительно обнаружил, что кипарис облегчает написание тестов на интерфейс, чем я всегда борелся. Используя инструменты, которые уже знают, что многие разработчики, кипарис легко начнется, и есть много других классных вещей, которые я покажу вам в будущем.
Веселиться ❤️.
Оригинал: “https://dev.to/damcosset/testing-react-with-cypress-io-5b4j”