Cypress — это надежная среда комплексного тестирования, созданная для веб-приложений. Он разработан, чтобы сделать тестирование простым и надежным, позволяя разработчикам и инженерам по контролю качества тестировать все: от простых взаимодействий до сложных рабочих процессов пользователей. С помощью Cypress вы можете создавать тесты, которые имитируют действия пользователя, проверяют поведение интерфейса и обеспечивают функциональность пользовательского интерфейса с минимальной настройкой.

Для чего используется кипарис?

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

• Автоматизация пользовательских потоков: протестируйте сложные пользовательские процессы, такие как аутентификация, отправка форм и транзакции электронной коммерции.

• Тестирование адаптивного дизайна: Cypress позволяет тестировать область просмотра разных размеров, что делает его идеальным для тестирования адаптивного дизайна.

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

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

Cypress предоставляет мощную панель управления и интерфейс командной строки, которые обеспечивают плавную интеграцию в конвейеры CI/CD, что делает его идеальным выбором для автоматического непрерывного тестирования в современной веб-разработке.

Запуск тестов с Cypress

Тесты можно запускать в Cypress двумя основными способами: с помощью Test Runner (GUI) и интерфейса командной строки (CLI).

Вот краткое руководство по обоим методам:

Использование Test Runner (GUI):

Чтобы использовать Cypress Test Runner в интерактивном режиме с приложением Cypress Real World, выполните следующие действия. Это приложение представляет собой убедительный пример тестов Cypress в действии со сценариями регистрации пользователей, входа в систему и потоков транзакций.

В качестве примера возьмем пример приложения Cypress «Cypress Real World App».

Настройте и запустите приложение Cypress Real World локально:

Это начальные шаги по настройке примера приложения

git clone https://github.com/cypress-io/cypress-realworld-app
cd cypress-realworld-app
yarn

//run the app
yarn dev

Открытый тест-раннер Cypress:

Теперь, чтобы открыть Cypress Test Runner в интерактивном режиме:

Выполните команду:

npx cypress open

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

Нажав E2E, вы увидите эту панель управления, содержащую весь список тестов в разделе cypress/tests.

Давайте создадим новый тест под названием custom.spec.ts в нашем каталоге cypress/tests/ui/custom.spec.ts

describe("User Sign-up and Login", function () {
    beforeEach(function () {
      // Seed the database before each test
      cy.task("db:seed");

      // Intercept signup and login API calls
      cy.intercept("POST", "/users").as("signup");
      cy.intercept("POST", "/graphql").as("gqlRequests");
    });

    it("should redirect unauthenticated user to signin page", function () {
      cy.visit("/personal");
      cy.location("pathname").should("equal", "/signin");
    });

    it("should allow a visitor to sign-up, login, and logout", function () {
        const userInfo = {
          firstName: "Bob",
          lastName: "Ross",
          username: "PainterJoy90",
          password: "s3cret",
        };

      // Sign-up User
      cy.visit("/signup");

      cy.getBySel("signup-first-name").type(userInfo.firstName);
      cy.getBySel("signup-last-name").type(userInfo.lastName);
      cy.getBySel("signup-username").type(userInfo.username);
      cy.getBySel("signup-password").type(userInfo.password);
      cy.getBySel("signup-confirmPassword").type(userInfo.password);
      cy.visualSnapshot("About to Sign Up");
      cy.getBySel("signup-submit").click();
      cy.wait("@signup");

      // Login User
      cy.visit("/signin");
      cy.login(userInfo.username, userInfo.password);


      // Verify successful login
      cy.location("pathname").should("equal", "/");

1. Настройка (beforeEach): перед каждым тестом база данных заполняется для запуска с согласованным состоянием, а вызовы API для регистрации и запросы GraphQL перехватываются для мониторинга.

2. Тесты:

* **Redirect for Unauthenticated User**: Checks if an unauthenticated user visiting a restricted page (`/personal`) is redirected to the `/signin` page.

* **Sign-up, Login**: A new user is signed up, logged in, and logged out. The test verifies the user can register, sign in by being redirected to `/signin`.

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

Примечание. Попробуйте добавить к этому процессу выхода из системы и неправильному имени пользователя

Выполнение тестов из CLI:

В средах CI или при выполнении пакетного тестирования интерфейс командной строки предлагает упрощенный подход. Запустите все тесты или укажите отдельные тестовые файлы:

npx cypress run

npx cypress run --spec "cypress/tests/ui/custom.spec.ts"

Преимущества кипариса

Cypress известен своим быстрым выполнением, простотой настройки и мощными функциями тестирования. Вот некоторые основные преимущества:

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

• Тестирование без ошибок: благодаря своей уникальной архитектуре Cypress снижает нестабильность тестов, делая результаты ваших тестов более надежными.

• Автоматическое ожидание: Cypress ожидает загрузки, ответа и рендеринга элементов, поэтому вам не нужно добавлять явные ожидания.

• Встроенные утверждения и имитация: Cypress поставляется с богатым набором утверждений и инструментов для имитации ответов API и моделирования взаимодействия с пользователем.

Подобно тому, как Cypress поддерживает эффективное E2E-тестирование за счет автоматизации взаимодействия с пользователем, Keploy привносит в тестирование мощный аспект, уделяя особое внимание серверной части.

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

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

• Платформа автоматического тестирования: Keploy фокусируется на автоматическом создании тестов для серверных служб, особенно для взаимодействия API и базы данных.

• Захват и воспроизведение: Keploy захватывает реальный трафик и воспроизводит его в тестовых средах, создавая реальные тестовые примеры.

• Генерация тестов без кода: разработанный для простоты, он генерирует тесты без необходимости использования специальных сценариев.

E2E-тестирование с помощью Keploy:

• API-ориентированное E2E-тестирование: автоматизирует сквозное тестирование внутренних компонентов, гарантируя, что функциональность серверной части проверяется как единое целое.

• Обнаружение и воспроизведение ошибок: захватывает запросы/ответы API, воспроизводит взаимодействия и заранее обнаруживает регрессии.

• Последовательная проверка данных: отслеживает ответы и изменения в потоке данных, обеспечивая точность при развертывании.

• Бесшовная интеграция: легко интегрируется с конвейерами CI/CD, помогая командам автоматизировать E2E-проверки изменений в серверной части.

В этой области существует множество инструментов, каждый из этих инструментов предоставляет возможности, подходящие для различных типов сред тестирования: от тестов для конкретного браузера в Puppeteer до кроссбраузерной совместимости в Playwright и Selenium.

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

Часто задаваемые вопросы

Можно ли использовать Cypress для серверного тестирования?

Cypress — это прежде всего инструмент тестирования интерфейса. Хотя он может взаимодействовать с серверными API и имитировать ответы, он не предназначен для обширного внутреннего тестирования. Для бэкэнд-тестов такие инструменты, как Keploy, могут дополнять Cypress, предоставляя возможности модульного и интеграционного тестирования для серверных функций.

Поддерживает ли Cypress кроссбраузерное тестирование?

Да, Cypress поддерживает Chrome, Edge и Firefox. Однако его поддержка ограничена по сравнению с такими инструментами, как Selenium или Playwright, которые предлагают более широкую кроссбраузерную совместимость.

Как Cypress проводит тестирование API?

Cypress может выполнять тесты API, отправляя HTTP-запросы непосредственно из тестового кода. Вы можете использовать cy.request() для проверки ответов API, что упрощает тестирование API в одной и той же среде сквозного тестирования.

Как я могу отладить неудачные тесты Cypress?

Cypress по умолчанию предоставляет подробные журналы и снимки экрана, а Test Runner позволяет вам визуально взаимодействовать с тестами. Вы можете добавить .only, чтобы изолировать неудачные тесты, использовать cy.pause(), чтобы остановить выполнение, и использовать Chrome DevTools для дальнейшей отладки.