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

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

Cypress построен на основе Electron, который используется текстовым редактором Atom и многими другими приложениями. Он прост в установке и имеет простой и понятный API.

Что такое тестирование программного обеспечения?

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

Почему важно тестирование программного обеспечения

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

Преимущества автоматизированных тестов программного обеспечения

Автоматизированное тестирование программного обеспечения имеет множество преимуществ:

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

Что такое Cypress?

Cypress — это современный набор тестов с открытым исходным кодом для веб-приложений. Он построен на основе Electron, который используется текстовым редактором Atom и многими другими приложениями. Cypress прост в установке и имеет простой и понятный API.

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

Особенности Cypress

Некоторые функции, которые делают Cypress привлекательным вариантом для автоматизированных тестов:

• Простая установка: Cypress можно установить с помощью npm или Yarn. Нет необходимости устанавливать какие-либо другие зависимости.
• Четкий API: API, предоставляемый Cypress, прост и понятен. Все команды объединяются в цепочки, что упрощает чтение кода и написание тестов.
• Автоматическое ожидание: Cypress автоматически ожидает появления элементов, прежде чем выполнять над ними какие-либо действия. Это делает код более надежным и простым в написании.
• Параллельное выполнение: тесты можно запускать параллельно в нескольких браузерах и устройствах с помощью Cypress Test Runner. Это ускоряет выполнение тестов.

Начало работы с тестированием Cypress

Cypress работает с Node.js 12 или 14 и выше, поэтому вам необходимо установить Node.js на свой компьютер, прежде чем вы сможете установить и использовать Cypress.

Cypress Installation

Вы можете установить Cypress через npm:

npm install cypress --save-dev

Или вы можете установить его с помощью Yarn:

yarn add cypress --dev

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

$(npm bin)/cypress open

Это откроет средство запуска тестов Cypress. Затем вы можете запустить свои тесты отсюда.

Cypress Configuration

Cypress можно настроить с помощью cypress.jsonфайла. Этот файл должен находиться в корне вашего проекта. Ниже приведен базовый пример:

{
  "baseUrl": "http://localhost:8080",
  "viewportWidth": 1200,
  "viewportHeight": 800,
  "fixturesFolder": "tests/e2e/fixtures",
  "integrationFolder": "tests/e2e/specs",
  "pluginsFile": "cypress/plugins.js",
  "supportFile": false,
  "screenshotsFolder": ".cypress/screenshots"  
}

Writing Cypress Tests

Тест Cypress написан с использованием JavaScript и запускается в браузере. Это упрощает написание и понимание тестов.

Каждый тест Cypress организован в виде «спецификаций». Спецификация — это набор тестов для определенной функции или функции. Спецификации находятся в папке integrationFolder(по умолчанию tests/e2e/specs). Файл спецификации или теста может содержать один или несколько тестов.

Вот базовый пример файла спецификации:

describe('My App', function() {

  it('does something', function() {
    // Some test code here
  });

  it('does something else', function() {
    // Some test code here
  });  

});

Пример тестирования Cypress 1: тестирование формы входа

В этом примере мы напишем Cypress для проверки формы входа. Предположим, что форма имеет два поля usernameи passwordкнопку отправки.

Во-первых, нам нужно открыть страницу, содержащую форму входа. Мы можем сделать это с помощью cy.visit() команды:

describe('My App', function() {

  it('does something', function() {
    cy.visit('http://localhost:8080/login');
  });

  // More tests here...  
});

Далее нам нужно заполнить поля usernameи passwordи нажать кнопку отправки. Мы можем сделать это с помощью команд cy.get(), cy.type() и :cy.click()

describe('My App', function() {

  it('does something', function() {
    cy.visit('http://localhost:8080/login');
    cy.get('#username').type('testuser');
    cy.get('#password').type('secret');    
    cy.get('.btn-submit').click();    

  });  

  // More tests here...  
});

Пример тестирования Cypress 2: тестирование корзины для покупок

В этом примере мы напишем спецификацию для тестирования функции корзины покупок. Предположим, что в корзине есть два поля quantityи itemкнопка «добавить в корзину».

Во-первых, нам нужно открыть страницу, содержащую форму корзины покупок. Мы можем сделать это с помощью cy.visit()команды:

describe('My App', function() {

  it('does something', function() {
    cy.visit('http://localhost:8080/cart');
  });

  // More tests here...  
});

Далее нам нужно заполнить поля quantityи itemи нажать кнопку «добавить в корзину». Мы можем сделать это с помощью команд cy.get(), cy.type()и :cy.click()

describe('My App', function() {

  it('does something', function() {
    cy.visit('http://localhost:8080/cart');
    cy.get('#quantity').type(5);
    cy.get('#item').type('pants');    
    cy.get('.btn-add-to-cart').click();    

  });  

  // More tests here...  
});

Пример тестирования Cypress 3: Тестирование одностраничного приложения

В этом примере мы протестируем одностраничное приложение (SPA), использующее интерфейсную структуру React. Приложение представляет собой простой диспетчер задач, который позволяет пользователям добавлять, редактировать и удалять задачи.

Во-первых, нам нужно установить некоторые зависимости. Нам понадобится следующее:

• React
• Create React App
• Cypress

Мы можем установить эти зависимости с помощью npm :

npm install --save react react-dom create-react-app cypress   # Install React and Create React App dependencies, as well as Cypress itself

Теперь мы можем создать новое приложение React, используя Create React App:

create-react-app my-app   # Create a new React app in the my-app folder

Далее нам нужно установить некоторые дополнительные зависимости Cypress:

cd my-app                          # Change directory into the new app folder
npm install --save-dev cypress     # Install Cypress as a development dependency

Теперь, когда наши зависимости установлены, мы можем написать наши тесты. Создайте новый файл с именем tasks.spec.jsв cypress/integrationпапке со следующим содержимым:

describe('Tasks', function() {

  beforeEach(function() {           // This runs before each test in the suite
    cy.visit('http://localhost:3000');  // Visit the base URL of the app before each test    
  });

  it('should add a task', function() {   // This is a test case - replace with your own    

    // Enter task details into form and submit     
    cy.get('input[name="taskName"]').type('My Task');
    cy.get('textarea[name="taskDescription"]').type('My Description');
    cy.get('form').submit();       

    // Assert that the task appears in the list
    expect(cy.get('.tasks li').its('length')).to.equal(1);
   });
});

Функция beforeEachзапускается перед каждым тестом в спецификации. В данном случае мы посещаем базовый URL-адрес нашего приложения ( http://localhost:3000).

Функция it содержит наш фактический тестовый код. Первый аргумент — это описание тестового примера, а второй аргумент — это функция обратного вызова, содержащая наш тестовый код. В этом примере мы проверяем, что наше приложение диспетчера задач правильно добавляет задачи в список, когда они отправляются с помощью формы. Мы делаем это, сначала вводя некоторые данные в поля формы, а затем отправляя их. Наконец, мы утверждаем, что теперь в списке есть одна задача, использующая expect.

Вы можете запускать тесты из кода Visual Studio, открыв интеграционные тесты в обозревателе тестов ( View -> Test Explorer ).

Кроме того, вы можете запустить их из окна терминала с помощью npm:

npm run e2e                            # Run all tests in headless mode (Chrome)
npm run e2e:open                       # Run all tests with GUI ( Electron)

Cypress Test Runner

Есть два способа запуска каждого теста Cypress: локально и в облаке.

Локальное тестирование Cypress

Вы можете открыть Cypress Test Runner, выполнив следующую команду:

node_modules/.bin/cypress open

Test Runner откроется в новом окне. Отсюда вы можете запустить все тесты или отдельные тесты, нажав кнопку » Выполнить все спецификации » или » Выполнить тестовый файл«.

Тестирование Cypress в облаке

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

Чтобы использовать облачный сервис тестирования Cypress, сначала необходимо зарегистрировать бесплатную учетную запись на странице https://www.cypress.io/. Если у вас есть учетная запись, вы можете подключить свой репозиторий GitHub и выбрать, какую ветку вы хотите протестировать. Затем Cypress будет автоматически запускать ваши тесты при каждой фиксации в этой ветке.

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

Непрерывная интеграция

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

Доступно множество различных инструментов CI, но мы сосредоточимся на трех самых популярных: Travis CI, CircleCI и Jenkins.

Travis CI

 

Travis CI — это популярный размещенный сервис CI, который предоставляется бесплатно для проектов с открытым исходным кодом. Он интегрируется с GitHub, что упрощает настройку и использование.

Чтобы использовать Travis CI с Cypress, вам нужно создать travis.ymlфайл в корневом каталоге вашего проекта. Этот файл сообщает Трэвису, как создавать и тестировать ваш проект. Вот простой пример:

# tell Travis we're using Node.js
language: node_js

# specify which versions of Node to use
node_js: 10

# run our tests
script:
  # or yarn test if you're using Yarn instead of NPM
  - npm run test

# set the base URL environment variable for Cypress
env: CYPRESS_BASE_URL=https://example.com

Этот файл указывает Трэвису использовать Node v10 для тестирования и запускать npm run testкоманду (или yarn test, если вы используете Yarn вместо npm). Он также устанавливает CYPRESS_BASE_URLпеременную окружения, которую Cypress будет использовать при запуске тестов.

CircleCI

 

CircleCI — еще одна популярная размещенная служба CI, которая предлагает бесплатный план для проектов с открытым исходным кодом. Как и Travis, он интегрируется с GitHub, что упрощает настройку и использование.

Чтобы использовать CircleCI с Cypress, вам нужно создать circleci/config.ymlфайл в корневом каталоге вашего проекта. Этот файл сообщает CircleCI, как создавать и тестировать ваш проект.

Вот простой пример:

version: 2.0
jobs:
  build:
    docker:
      # specify the version of Node.js to use
      - image: circleci/node:10

    steps:
      # run our tests
      - run: npm run test

      # set the base URL environment variable for Cypress
      - run: echo "CYPRESS_BASE_URL=https://example.com" >> $BASH_ENV

  deploy:
    # ... deployment steps here ...

Этот файл указывает CircleCI использовать Node v10 для тестирования и запуска npm run testкоманды. Он также устанавливает CYPRESS_BASE_URLпеременную окружения, которую Cypress будет использовать при запуске тестов.

Jenkins

 

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

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

В конфигурации вашего проекта Jenkins вам нужно будет добавить шаг сборки «Cypress» и указать путь к файлу вашего проекта cypress.json. Вам также потребуется установить для baseUrlсвойства в этом файле URL-адрес вашего приложения (например, https://example.com). Вот пример cypress.jsonфайла:

{
  "baseUrl": "https://example.com"
}

Отладочные тесты

Отладка тестов Cypress проста и понятна. Есть два способа отладки тестов: с помощью командной строки или с помощью браузерных DevTools.

Тестирование Cypress с помощью командной строки

Интерфейс командной строки Cypress (CLI) имеет встроенный отладчик, который можно использовать для отладки тестов. Чтобы использовать отладчик CLI, просто запустите cypressкоманду с —debug флагом. Это откроет графический интерфейс Cypress с включенным отладчиком.

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

Тестирование Cypress с помощью инструментов разработчика браузера

Если вы не используете интерфейс командной строки, вы все равно можете отлаживать тесты Cypress с помощью DevTools браузера. Для этого просто откройте консоль DevTools и войдите cypressв консоль. Это даст вам доступ ко всем тем же функциям отладки, что и отладчик CLI, включая установку точек останова и проверку переменных.

Обновление набора тестов Cypress

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

Полезные ресурсы

Если вы хотите узнать больше о Cypress, вот несколько полезных ресурсов:

• Cypress.io : официальный сайт Cypress.
• Documentation : официальная документация для Cypress
• Блог Cypress : официальный блог Cypress
• GitHub : репозиторий Cypress на GitHub.
• Examples : пример приложения, созданного с помощью Cypress.
• Video Tutorials : серия видеоуроков по Cypress

Миграция с Selenium

Если вы в настоящее время используете Selenium для тестирования веб-приложений, вы можете подумать о переходе на Cypress. Есть несколько причин, по которым вы можете захотеть это сделать:

У Cypress более простой и интуитивно понятный API, чем у Selenium.
Тесты Cypress выполняются в той же среде, что и тестируемое приложение, что упрощает отладку.
Cypress может автоматически ожидать появления элементов в DOM, прежде чем взаимодействовать с ними, что делает тесты более надежными.

Существует два основных варианта перехода с Selenium на Cypress: WebDriverIO и Protractor.

WebDriverIO

WebDriverIO — это библиотека Node.js, которая работает с Selenium WebDriver API. Он имеет API, аналогичный Cypress, что упрощает перенос существующих тестов Selenium на WebDriverIO. На веб-сайте WebdriverIO есть руководство о том, как это сделать.

Protractor

Protractor — это сквозная тестовая среда для приложений Angular, в которой используется Selenium WebDriver API. Он имеет архитектуру, аналогичную Cypress, что упрощает перенос существующих тестов Selenium на Protractor. На веб-сайте Protractor есть руководство о том, как это сделать.

Заключение

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

Хотя может показаться заманчивым полагаться исключительно на автоматические тесты, ручное тестирование по-прежнему важно. Автоматические тесты могут выявить некоторые ошибки, но не все. Человеческий глаз по-прежнему необходим, чтобы улавливать такие вещи, как опечатки, проблемы с макетом и проблемы с пользовательским интерфейсом.

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