Алиасы для элементов

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

Создание алиасов

Алиас создается с помощью метода .as(), который применяется к цепочке команд Cypress. Стандартная форма выглядит так:

cy.get('селектор').as('имяАлиаса')

Пример:

cy.get('#login-button').as('loginBtn')

После этого к элементу можно обращаться через @имяАлиаса:

cy.get('@loginBtn').click()

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

Алиасы для сложных элементов

Для элементов с динамическими селекторами или вложенной структурой удобно комбинировать алиасы с методами .find(), .children(), .eq():

cy.get('.form').as('loginForm')
cy.get('@loginForm').find('input[name="username"]').as('usernameInput')
cy.get('@usernameInput').type('admin')

Такой подход улучшает читаемость и делает тесты более структурированными.

Алиасы для асинхронных данных

Алиасы могут использоваться не только для элементов, но и для данных, полученных через cy.request() или другие команды Cypress. Пример:

cy.request('/api/users').as('usersData')
cy.get('@usersData').then((response) => {
  expect(response.status).to.eq(200)
  expect(response.body).to.have.length.greaterThan(0)
})

Использование алиасов для данных позволяет обращаться к результатам асинхронных операций без необходимости повторно вызывать API-запрос.

Область видимости алиасов

Алиасы имеют область видимости в пределах одного теста (it) или блока beforeEach. Попытка обратиться к алиасу из другого теста приведет к ошибке:

describe('Тестирование формы', () => {
  beforeEach(() => {
    cy.get('#login-button').as('loginBtn')
  })

  it('кликает по кнопке', () => {
    cy.get('@loginBtn').click()
  })

  it('проверяет видимость кнопки', () => {
    cy.get('@loginBtn').should('be.visible')
  })
})

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

Использование алиасов с cy.wrap

Иногда нужно создать алиас для объекта, который не является результатом команд Cypress. В таких случаях используется cy.wrap():

const user = { name: 'Alice', age: 25 }
cy.wrap(user).as('userData')
cy.get('@userData').then((u) => {
  expect(u.name).to.eq('Alice')
})

cy.wrap() превращает любой объект в цепочку команд Cypress, делая возможным использование всех стандартных методов работы с алиасами.

Практические рекомендации

  • Использовать алиасы для часто повторяющихся элементов и данных, чтобы уменьшить дублирование cy.get() и cy.request().
  • Придерживаться читаемых и однозначных имен алиасов (@loginButton, @usernameInput), чтобы сразу было понятно, к чему они относятся.
  • Не хранить старые элементы напрямую. Всегда получать элемент через алиас, чтобы тест оставался устойчивым к изменениям DOM.
  • Комбинировать алиасы с методами .find(), .eq(), .children() для работы со сложными компонентами.

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

describe('Форма логина', () => {
  beforeEach(() => {
    cy.visit('/login')
    cy.get('form#loginForm').as('loginForm')
    cy.get('@loginForm').find('input[name="username"]').as('usernameInput')
    cy.get('@loginForm').find('input[name="password"]').as('passwordInput')
    cy.get('@loginForm').find('button[type="submit"]').as('submitBtn')
  })

  it('вводит данные и логинится', () => {
    cy.get('@usernameInput').type('admin')
    cy.get('@passwordInput').type('12345')
    cy.get('@submitBtn').click()
    cy.url().should('include', '/dashboard')
  })
})

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

Алиасы в Cypress — это ключевой инструмент для упрощения тестирования, особенно в крупных проектах с повторяющимися элементами и асинхронными данными. Они повышают устойчивость тестов к изменениям DOM и улучшают структуру кода.

Оглавление