Как выбирать локаторы/селекторы для стабильных e2e-тестов

1️⃣ Как кратко ответить

Для стабильных e2e-тестов выбирайте локаторы, которые минимально зависят от изменений в структуре и стиле страницы. Используйте уникальные идентификаторы, такие как data-* атрибуты, избегайте селекторов по классу или тегу, так как они подвержены изменениям. Предпочтительно использовать селекторы, которые отражают бизнес-логику, а не визуальные аспекты.

2️⃣ Подробное объяснение темы

В e2e-тестировании (end-to-end) важно, чтобы тесты были стабильными и не ломались при малейших изменениях в коде или структуре страницы. Для этого необходимо правильно выбирать локаторы/селекторы, которые будут использоваться для взаимодействия с элементами на странице.

Зачем это нужно

Локаторы — это способ, с помощью которого тесты находят элементы на веб-странице. Если локаторы ненадежны, тесты могут часто ломаться, что приводит к ложным срабатываниям и увеличению времени на их поддержку. Надежные локаторы делают тесты более устойчивыми к изменениям в коде и облегчают их поддержку.

Где применяется

Локаторы используются в инструментах для автоматизации тестирования, таких как Selenium, Cypress, Playwright и других. Они позволяют тестам взаимодействовать с элементами на странице, такими как кнопки, поля ввода, ссылки и т.д.

Как выбирать локаторы

1. Используйте уникальные идентификаторы:

   • Наиболее надежный способ — использовать уникальные идентификаторы, такие как id или data-* атрибуты. Они должны быть уникальными для каждого элемента и не изменяться при изменении стилей или структуры страницы.

   <button id="submit-button" data-test-id="submit">Submit</button>
   

   В этом примере id="submit-button" и data-test-id="submit" могут быть использованы как надежные локаторы.

2. Избегайте селекторов по классу или тегу:

   • Классы и теги часто меняются при изменении стилей, поэтому они менее надежны. Например, изменение CSS может привести к изменению классов, что сломает тесты.

   <button class="btn primary">Submit</button>
   

   В этом случае, если класс btn изменится, тесты, использующие этот селектор, могут сломаться.

3. Используйте атрибуты, отражающие бизнес-логику:

   • Атрибуты, которые отражают бизнес-логику, такие как data-role, data-type, могут быть более устойчивыми к изменениям.

   <input type="text" data-role="username" />
   

   Здесь data-role="username" может быть использован для надежного поиска элемента.

4. Избегайте использования текстовых селекторов:

   • Текстовые селекторы могут быть ненадежными, так как текст может измениться в процессе локализации или редактирования контента.

   <button>Click me</button>
   

   Если текст кнопки изменится, тесты, использующие текст как селектор, могут перестать работать.

5. Используйте XPath или CSS-селекторы с осторожностью:

   • XPath и сложные CSS-селекторы могут быть мощными, но они также могут быть хрупкими и сложными для поддержки. Используйте их только в случае необходимости и старайтесь делать их как можно более простыми и специфичными.

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

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

// Пример теста с использованием Cypress
describe('Login Test', () => {
  it('should log in successfully', () => {
    // Переход на страницу логина
    cy.visit('/login');
​
    // Ввод имени пользователя
    cy.get('[data-test-id="username-input"]').type('testuser');
​
    // Ввод пароля
    cy.get('[data-test-id="password-input"]').type('password123');
​
    // Нажатие на кнопку входа
    cy.get('[data-test-id="login-button"]').click();
​
    // Проверка успешного входа
    cy.url().should('include', '/dashboard');
  });
});

• cy.visit('/login'): Переход на страницу логина.
• cy.get('[data-test-id="username-input"]').type('testuser'): Поиск поля ввода имени пользователя по data-test-id и ввод текста.
• cy.get('[data-test-id="password-input"]').type('password123'): Поиск поля ввода пароля по data-test-id и ввод текста.
• cy.get('[data-test-id="login-button"]').click(): Поиск кнопки входа по data-test-id и клик по ней.
• cy.url().should('include', '/dashboard'): Проверка, что после входа URL содержит /dashboard, что подтверждает успешный вход.

Выбор надежных локаторов делает тесты более устойчивыми и снижает затраты на их поддержку.