Тестирование с cypress

22 июня 2023 г.

Документация cypress https://www.cypress.io/

Документация у cypress понятная, поэтому я опишу конфигурационные моменты.

Установка

npm install cypress --save-dev

(Также можно с их сайта скачать файлы и установить в проект)

После установки добавляем следующий скрипт в package.json.

1"scripts": {
2  <...>
3  "cypress:open": "cypress open"
4} 
5

(Также можно использовать команду "cypress:run": "cypress run" - она сразу запускает тесты)

Мне больше нравится использовать команду "cypress:open": "cypress open", так как после запуска тестов в панели cypress нет необходимости перезапускать их каждый раз, видно все ошибки и можно проследить все пути к элементам, которые указал.

Запускаем npm run cypress:open

Появится следующее окно:

Выбираем необходимый вариант тестирования, браузер для тестирования. После этого в проекте создаются все необходимые файлы и папки.

Можно переходить к написанию тестов.

В конфигурационном файле можно указать путь, отличный от папки, созданной cypress.

Мой файл конфигурации выглядел так:

1import { defineConfig } from "cypress";
2const supportFile = 'tests/e2e/support.js';
3
4export default defineConfig({
5  fixturesFolder: "tests/e2e/fixtures",
6  screenshotsFolder: "tests/e2e/screenshots",
7  videosFolder: "tests/e2e/videos",
8  chromeWebSecurity: true,
9  viewportWidth: 1366,
10  viewportHeight: 850,
11  e2e: {
12    setupNodeEvents(on, config) {
13      // implement node event listeners here
14    },
15    baseUrl: 'http://localhost:3000/',
16    specPattern: 'tests/e2e/specs/**/*.{js,jsx,ts,tsx}',
17    supportFile,
18  },
19  env: {
20    coverage: false
21  },
22  defaultCommandTimeout: 30000,
23  pageLoadTimeout: 30000,
24  requestTimeout: 30000
25});
26

Написание теста

Файл теста должен находится в папке specs и называться в формате test_name.cy.js (или ts).

Тело теста (Cypress должен создать файл шаблон при том способе, который я описала).

1describe('Page tests', () => {
2    beforeEach(() => {
3        cy.visit(URL);
4        cy.wait(4000);
5    })
6
7    it('Test block', () => {
8  })
9})
10

Функция beforeEach() - позволяет выполнять указанные в ней действия перед каждым блоком теста.

Также есть функция before() - Эти действия будут выполнятся лишь один раз в начале теста.

Возможности cypress можно изучить здесь: https://docs.cypress.io/api/table-of-contents

Возможности

Далее непоследовательно отмечу некоторые команды, которые мне пригодились в работе:

Проверка кнопки, что она disabled

cy.get('button').should('be.disabled')

cy.get('button').should('not.be.enabled')

(Есть еще такой вариант, его пока еще не пробовала использовать
cy.get('button').invoke('prop', 'disabled', false))

Проверка кнопки, что она enabled

cy.get('button').should('not.be.disabled')

cy.get('button').should('be.enabled')

Проверка на количество элементов

Проверка, что количество элементов, больше чем указанное количество (Например, 0)
cy.get(“tr”).its('length').should('be.gt', 0);

Получение атрибута элемента и работа с ним

1cy.get('tr').invoke('attr', 'data-value').then(val => {
2      expect(+val).to.be.eq((amountValue + 0.01))
3
4	if(+val > 1) {
5      some…
6    }
7 })
8

C помощью .then() можно работать не только с атрибутами
Например, с длинной

1cy.get(tr).its('length').then(len => {
2  if(+len > 0) {
3      Some…
4  } else {                        
5  }
6}
7

Проверка значения атрибута

cy.get(a').invoke('attr', 'href').should('eq', 'some url');

(Еще не использовала
cy.get('button').should('have.attr', 'aria-disabled', 'true')
cy.get('button').should('have.attr', 'aria-disabled', 'false'))

Действия со скрытым элементом

Опция { force: true } позволяет совершать действия с элементом, если он скрыт, или его накрывает другой элемент.
Клик
cy.get(“button”).click({ force: true });
Ввести значение в инпут
cy.get(“input”).type("some text", { force: true });

Функция для считывания path

1expectLocationByPathname(pathname) {
2    cy.location().should((loc) => {
3       expect(loc.pathname).to.eq(pathname)
4    })
5}
6

Определить, что элемент виден

cy.get(“button”).should('be.visible');

Определить, что элемент скрыт

cy.get(“button”).should('be.hidden');

Проверить, что текст правильный

cy.get(‘h1’).should('have.text', "Some title");

Код на GitHub