Автоматизация тестирования с Cypress

Cypress — это фреймворк с открытым исходным кодом для создания сквозных и компонентных тестов для веб-приложений. Он работает на Node.js, а это значит, что код для наших тестов написан на JavaScript (JS). Инструмент предлагает богатый набор возможностей для создания автоматизированных тестов. Используя JS, мы можем писать наши тесты в простой, короткой и разборчивой форме, используя один из самых популярных языков программирования в мире.

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

Структура папок

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

• Fixtures — здесь мы можем размещать статические данные, которые будем использовать при тестировании,
• E2E (расшифровывается как end to end) — по умолчанию Cypress ищет здесь тесты, мы можем разместить здесь дополнительные каталоги для отдельных файлов,
• Плагины — используются для изменения поведения Cypress, запускаются перед каждым тестовым файлом,
• Поддержка — используется для определения поведения, которое является общим для всех тестов и должно запускаться перед тестами.

Использование дополнительных библиотек тестирования

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

• Mocha — позволяет построить отчет JUnit или TeamCity. Для библиотеки Mocha существует множество плагинов, поэтому мы можем быть уверены, что сгенерируем отчет в нужном нам формате,
• Chai — встроенная библиотека для утверждений,
• Sinon — фреймворк, методы которого Cypress использует в cy.spy, cy.stub, то есть мониторинг вызовов функций.

Также есть несколько плагинов, которые не являются встроенными, но их стоит установить:

• Cypress-recurse — плагин, упрощающий написание рекурсивных функций,
• Cypress-tab — плагин, добавляющий возможность отправлять в браузер клавишу «TAB»,
• Cypress-plugin-snapshots — этот плагин для визуального тестирования сравнивает исходное и текущее изображения рядом, если разница в пикселях превышает пороговое значение.

Недостатки кипариса.

Cypress, несомненно, отличный инструмент для тестирования внешнего интерфейса; однако он не лишен недостатков.

Проблемы с iFrame

Работать с фреймами действительно сложно. У Cypress гораздо больше проблем, чем у Selenium. У нас есть возможность использовать дополнительные библиотеки для помощи в работе с iframe, такие как «cypress-iframe», но эти решения не всегда работают должным образом.

Поддерживает только JS/TS

Это недостаток не для всех. Я отношу это к недостаткам, потому что Selenium WebDriver поддерживает практически все языки программирования. Еще одна вещь, о которой стоит упомянуть, это то, что JS часто является более сложным языком программирования для начинающих.

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

Тестовый интерфейс, позаимствованный у Mocha, предоставляет функции describe(), context(), it() и specify().

context() идентичен describe(), а specify() идентичен it(), поэтому любой терминология будет работать.

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

Чтобы запустить указанный пакет или тест, добавьте к функции .only(). Все вложенные наборы также будут выполнены. Это дает нам возможность запускать один тест за раз и является рекомендуемым способом написания набора тестов.

Чтобы пропустить указанный набор или тест, добавьте к функции .skip(). Все вложенные наборы также будут пропущены.

Автоматическое (А) ожидание

Cypress автоматически ждет, пока элемент не достигнет ожидаемого нами состояния. В мире автоматизированного тестирования это не так очевидно.

В случаях утверждений (например, .should('be.disabled')) Cypress будет автоматически ждать определенное время, пока наш элемент не достигнет ожидаемого состояния, так что нам не о чем беспокоиться о том, чтобы точно указать, когда элемент должен соответствовать установленному требованию. Многие функции имеют встроенные неявные требования, например, .get() и .find() ожидают, что элемент существует в DOM, .type() ожидает, что элемент позволяет печатать, а .click() элемент для взаимодействия. Вышеуказанные требования покрываются автоматическим ожиданием, например, при использовании функции .click() Cypress гарантирует, что с элементом можно взаимодействовать. Если нет, то он будет ждать, пока элемент: не будет скрыт, не закрыт, не отключен, не находится в стадии анимации.

Пример теста

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

describe('My First Test', () => { 
    it('Go to the get page, check correct url and visibility of the button', () => { 
      cy.visit('https://example.cypress.io') 
      cy.contains('get').click() 
      cy.url().should('include', '/commands/querying') 
      cy.get('#query-btn').should('be.visible') 
    }) 
  }
)

В этом тесте мы проверяли правильность предопределенного URL-адреса, когда мы нажимали на ссылку, которая ведет нас на новую страницу, а также мы проверяли, что элемент, ожидаемый на этой странице, виден.

Заключительные слова

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

Первоначально опубликовано на https://www.itmagination.com.