Как использовать алиасы в Cypress для навигации и кликов по элементам

Что проверяют

Понимаете ли вы асинхронную модель Cypress: команды ставятся в очередь, а не возвращают элементы, поэтому обычная переменная тут не работает. Следом обычно просят показать алиас на сетевой запрос и объяснить, чем cy.wait('@alias') лучше фиксированной паузы.

Как отвечать

Алиас создаётся командой .as('name'), а читается через @. Типовых применений три:

• элементы: cy.get('[data-cy=submit]').as('submit'), затем cy.get('@submit').click(). С 12-й версии алиас на запрос к DOM хранит саму цепочку и перезапрашивает элемент, если старый уже удалён из DOM. Зафиксировать именно найденный элемент можно через .as('name', { type: 'static' });
• сетевые запросы: cy.intercept('GET', '/api/orders*').as('orders'), затем клик по ссылке и cy.wait('@orders').its('response.statusCode').should('eq', 200). Это главный инструмент для навигации: тест ждёт ровно тот ответ, после которого страница готова, а не угаданные секунды;
• данные: cy.fixture('user').as('user') в beforeEach, дальше доступ через cy.get('@user') или this.user внутри function () {}.

Переход после клика проверяйте через cy.location('pathname').should('eq', '/orders'): утверждение повторяется до таймаута, пока роутер не сменит адрес. Селекторы для алиасов берите по data-cy или data-testid, а не по классам вёрстки, которые меняются при каждом редизайне.

Где спотыкаются

Пишут const btn = cy.get('.btn') и ждут элемент. В переменной окажется объект цепочки, а не DOM-узел. Для работы со значением есть алиас или .then().

Обращаются к this.user в стрелочной функции и получают undefined. Там же забывают, что алиасы сбрасываются перед каждым тестом, и объявляют их в before вместо beforeEach.

Считают алиас кэшем, который экономит обращения к DOM. Смысл алиаса в читаемости и в явном ожидании запросов, скорость тестов он не меняет. И рядом с ним всё равно ставят cy.wait(3000), хотя достаточно ждать алиас запроса.