Переиспользование компонентов

Основные принципы

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

Пользовательские команды Cypress

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

Пример пользовательской команды:

// cypress/support/commands.js
Cypress.Commands.add('login', (username, password) => {
  cy.get('#username').type(username)
  cy.get('#password').type(password)
  cy.get('button[type="submit"]').click()
})

Использование команды в тесте:

describe('Авторизация', () => {
  it('успешный вход в систему', () => {
    cy.visit('/login')
    cy.login('admin', '123456')
    cy.url().should('include', '/dashboard')
  })
})

Преимущества пользовательских команд:

Централизованное управление повторяющейся логикой.
Легкость модификации: изменения в одном месте применяются ко всем тестам.
Улучшение читаемости тестов за счет абстрагирования деталей реализации.

Фикстуры для данных

Фикстуры позволяют переиспользовать тестовые данные без необходимости дублирования JSON или других структур в каждом тесте. Они хранятся в папке cypress/fixtures и подключаются с помощью команды cy.fixture().

Пример использования фикстуры:

// cypress/fixtures/user.json
{
  "username": "admin",
  "password": "123456"
}

// cypress/integration/login_spec.js
describe('Авторизация через фикстуру', () => {
  beforeEach(() => {
    cy.fixture('user').as('userData')
  })

  it('успешный вход', function() {
    cy.visit('/login')
    cy.get('#username').type(this.userData.username)
    cy.get('#password').type(this.userData.password)
    cy.get('button[type="submit"]').click()
    cy.url().should('include', '/dashboard')
  })
})

Фикстуры обеспечивают единообразие данных и упрощают поддержку тестов при изменении тестовых наборов.

Функции-хелперы

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

Пример функции-хелпера для проверки таблицы:

// cypress/support/helpers.js
export const checkTableRow = (rowSelector, expectedValues) => {
  cy.get(rowSelector).within(() => {
    expectedValues.forEach((value, index) => {
      cy.get(`td:eq(${index})`).should('contain', value)
    })
  })
}

Использование:

import { checkTableRow } from '../support/helpers'

describe('Проверка таблицы', () => {
  it('содержит корректные данные', () => {
    cy.visit('/orders')
    checkTableRow('tr:first', ['123', 'Иванов', 'Оплачено'])
  })
})

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

Стратегии организации переиспользуемых компонентов

Слои по назначению: разделение компонентов на слои помогает поддерживать чистоту кода. Например:
- commands.js — пользовательские команды.
- helpers.js — функции-хелперы.
- fixtures/ — тестовые данные.
- pages/ — Page Object модели для элементов интерфейса.
Page Object Model (POM): создаёт абстракцию над страницей приложения. Каждый Page Object содержит методы для взаимодействия с элементами страницы. Это снижает связность тестов и облегчает их поддержку.

Пример Page Object:

// cypress/pages/LoginPage.js
class LoginPage {
  visit() {
    cy.visit('/login')
  }

  fillUsername(username) {
    cy.get('#username').type(username)
  }

  fillPassword(password) {
    cy.get('#password').type(password)
  }

  submit() {
    cy.get('button[type="submit"]').click()
  }
}

export default new LoginPage()

Использование в тесте:

import LoginPage from '../pages/LoginPage'
import userData from '../fixtures/user.json'

describe('Авторизация через POM', () => {
  it('вход с валидными данными', () => {
    LoginPage.visit()
    LoginPage.fillUsername(userData.username)
    LoginPage.fillPassword(userData.password)
    LoginPage.submit()
    cy.url().should('include', '/dashboard')
  })
})

Композиция компонентов: объединение нескольких пользовательских команд или функций в более сложные сценарии. Например, команда cy.completePurchase() может использовать cy.login(), cy.addItemToCart() и cy.checkout() внутри одной цепочки.