M

MLOG

Русский

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

Cypress: Полное руководство по сквозному тестированию веб-приложений

В современной быстро развивающейся среде веб-разработки обеспечение качества и надежности веб-приложений имеет первостепенное значение. Сквозное (E2E) тестирование играет решающую роль в проверке того, что все компоненты приложения безупречно работают вместе с точки зрения пользователя. Cypress стал ведущим фреймворком для E2E тестирования, предлагая удобный для разработчиков интерфейс, мощные функции и отличную производительность. Это всеобъемлющее руководство проведет вас через все, что вам нужно знать, чтобы начать работу с Cypress и эффективно тестировать ваши веб-приложения.

Что такое Cypress?

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

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

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

Начать работу с Cypress очень просто. Вот как его установить:

  1. Предварительные условия: Убедитесь, что в вашей системе установлены Node.js и npm (Node Package Manager). Вы можете скачать их с официального сайта Node.js.
  2. Установите Cypress: Откройте свой терминал или командную строку, перейдите в каталог своего проекта и выполните следующую команду:
    3. npm install cypress --save-dev
  3. Откройте Cypress: После завершения установки вы можете открыть Cypress Test Runner, выполнив:
    4. npx cypress open

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

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

Давайте создадим простой тест, чтобы проверить, правильно ли загружается домашняя страница веб-сайта. Создайте новый файл с именем `example.cy.js` в каталоге `cypress/e2e` вашего проекта.


// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Давайте разберем этот тест:

Запустите этот тест в Cypress Test Runner, чтобы увидеть его в действии. Вы должны увидеть, как браузер переходит на веб-сайт Cypress Kitchen Sink, щелкает ссылку «type» и проверяет URL.

Команды Cypress

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

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

Утверждения в Cypress

Утверждения используются для проверки ожидаемого поведения вашего приложения. Cypress предоставляет богатый набор встроенных утверждений, которые можно использовать для проверки состояния элементов, URL-адреса, заголовка и многого другого. Утверждения связываются после команд Cypress с помощью метода `.should()`.

Вот несколько распространенных примеров утверждений:

Вы также можете создавать собственные утверждения в соответствии со своими конкретными потребностями.

Рекомендации по написанию тестов Cypress

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

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

Заглушки и макеты

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

Чтобы заглушить сетевой запрос, вы можете использовать команду `cy.intercept()`. Например, приведенный ниже код заглушает GET-запрос к `/api/users` и возвращает макетный ответ:


cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Затем вы можете дождаться перехваченного запроса с помощью `cy.wait('@getUsers')` и убедиться, что ваше приложение правильно обрабатывает макетный ответ.

Работа с локальным хранилищем и файлами cookie

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

Чтобы установить элемент локального хранилища, вы можете использовать команду `cy.window()` для доступа к объекту window, а затем использовать метод `localStorage.setItem()`. Например:


cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Чтобы получить элемент локального хранилища, вы можете использовать команду `cy.window()`, а затем использовать метод `localStorage.getItem()`. Например:


cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Чтобы установить файл cookie, вы можете использовать команду `cy.setCookie()`. Например:


cy.setCookie('myCookie', 'myCookieValue')

Чтобы получить файл cookie, вы можете использовать команду `cy.getCookie()`. Например:


cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Обработка загрузки файлов

Cypress предоставляет плагин под названием `cypress-file-upload`, который упрощает загрузку файлов в ваших тестах. Чтобы установить плагин, выполните следующую команду:

npm install -D cypress-file-upload

Затем добавьте следующую строку в свой файл `cypress/support/commands.js`:


import 'cypress-file-upload';

Затем вы можете использовать команду `cy.uploadFile()` для загрузки файла. Например:


cy.get('input[type="file"]').attachFile('example.txt')

Работа с IFrames

Тестирование IFrames может быть сложным, но Cypress предоставляет способ взаимодействия с ними. Вы можете использовать команду `cy.frameLoaded()` для ожидания загрузки IFrame, а затем использовать команду `cy.iframe()` для получения объекта документа IFrame.


cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress и непрерывная интеграция/непрерывное развертывание (CI/CD)

Интеграция Cypress в ваш конвейер CI/CD имеет важное значение для обеспечения качества вашего приложения. Вы можете запускать тесты Cypress в автономном режиме в своей среде CI/CD. Вот как:

  1. Установите Cypress: Убедитесь, что Cypress установлен как зависимость в вашем проекте.
  2. Настройте CI/CD: Настройте свой конвейер CI/CD для запуска тестов Cypress после каждой сборки.
  3. Запустите Cypress в автономном режиме: Используйте команду `cypress run` для запуска тестов Cypress в автономном режиме.

Пример конфигурации CI/CD (с использованием GitHub Actions):


name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Эта конфигурация будет запускать тесты Cypress всякий раз, когда код отправляется в ветку `main` или создается запрос на включение в ветку `main`. Действие `cypress-io/github-action` упрощает процесс запуска тестов Cypress в GitHub Actions.

Отладка тестов Cypress

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

Cypress и другие фреймворки тестирования

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

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

Реальные примеры Cypress в действии

Давайте рассмотрим несколько реальных примеров того, как Cypress можно использовать для тестирования различных типов веб-приложений:

Тестирование приложения для электронной коммерции

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

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


it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Тестирование приложения для социальных сетей

Вы можете использовать Cypress для тестирования взаимодействия пользователей в приложении для социальных сетей, такого как:

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


it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

Тестирование банковского приложения

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

Тест для проверки перевода средств может выглядеть следующим образом (с соответствующей заглушкой для безопасности):


it('Transfers funds successfully', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Заключение

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

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