Алиасы элементов с .as()

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

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

Метод .as() используется для присвоения алиаса. Например, если на странице есть кнопка отправки формы:

cy.get('button[type="submit"]').as('submitButton');

Теперь этот элемент можно использовать повторно, ссылаясь на алиас:

cy.get('@submitButton').click();

Ключевые моменты:

  • Символ @ перед именем алиаса обязателен при использовании.
  • Алиасы действуют только в рамках текущего теста (it). Для использования между тестами необходимы другие подходы (например, хранение в Cypress.env).

Алиасы для часто используемых элементы

Если в тесте требуется многократно взаимодействовать с одним и тем же элементом, алиас позволяет избежать повторного вызова cy.get():

cy.get('input[name="email"]').as('emailField');
cy.get('@emailField').type('user@example.com');
cy.get('@emailField').should('have.value', 'user@example.com');

Это упрощает поддержку тестов: при изменении селектора достаточно обновить только строку с .get(), остальные ссылки через алиас останутся рабочими.

Алиасы для запросов и ответов

Метод .as() применим не только к DOM-элементам, но и к сетевым запросам. Например, для перехвата POST-запроса при отправке формы:

cy.intercept('POST', '/api/login').as('loginRequest');
cy.get('button[type="submit"]').click();
cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);

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

  • Позволяет явно ожидать завершения запроса.
  • Облегчает проверку данных ответа.
  • Делает код теста более читабельным и структурированным.

Алиасы для элементов с цепочкой команд

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

cy.get('form').find('input[name="password"]').as('passwordField');
cy.get('@passwordField').type('Secret123!');

Такой подход позволяет присваивать алиасы именно нужному уровню вложенности элементов и сохраняет контекст поиска.

Доступ к алиасу через this

При использовании функций function() вместо стрелочных функций в тестах, алиасы становятся доступными через this:

beforeEach(function() {
  cy.get('input[name="username"]').as('usernameField');
});

it('вводит данные в поле username', function() {
  this.usernameField.type('testuser'); // доступ через this
});

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

  • Алиасы, присвоенные через as(), автоматически сохраняются в контексте this только при обычных функциях, не стрелочных.
  • Стрелочные функции не имеют собственного this, поэтому доступ через this невозможен.

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

Если требуется многократное использование элемента в разных тестах, алиасы можно создавать в beforeEach:

beforeEach(() => {
  cy.visit('/login');
  cy.get('input[name="username"]').as('usernameField');
  cy.get('input[name="password"]').as('passwordField');
});

it('вводит логин и пароль', () => {
  cy.get('@usernameField').type('user1');
  cy.get('@passwordField').type('pass1');
});

it('проверяет, что поле username пустое по умолчанию', () => {
  cy.get('@usernameField').should('have.value', '');
});

Это улучшает организацию тестов и уменьшает дублирование кода.

Ограничения и нюансы

  • Алиас сохраняет только ссылку на объект Cypress, а не на DOM элемент. При изменении DOM элемент через алиас может перестать быть актуальным.
  • Если элемент динамически изменяется на странице, рекомендуется заново получать элемент через cy.get() или использовать .should() для ожидания состояния.
  • Алиасы нельзя напрямую использовать вне тестового блока (it) — их контекст ограничен циклом выполнения теста.

Резюме ключевых возможностей .as()

  • Повышает читаемость кода и снижает дублирование.
  • Работает с DOM-элементами, сетевыми запросами и функциями.
  • Поддерживает цепочки команд.
  • Доступен через cy.get('@alias') или через this.alias при обычных функциях.
  • Эффективно используется для элементов и запросов, которые повторно применяются в рамках одного теста.

Использование .as() является стандартной практикой для организации Cypress-тестов, упрощает поддержку и делает сценарии более предсказуемыми и понятными.

Оглавление