Selectors: best practices

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

Пример: я хочу перейти на страницу описания товара. Для этого можно в тесте кликнуть на тайтле продукта, и я вижу, что это элемент с классом class="card-title". Но если введу в поиске .card-title, то логично найдется 9 элементов, так как у каждого товара есть этот класс:

Если же воспользоваться Cypress Selector Playgroud, результат будет уникальным, но абсолютно нечитабельным:

cy.get(':nth-child(1) > .card > .card-block > .card-title > .hrefch')

А когда несколько подобных команд идут друг за другом, получается такая простыня:

cy.get('#page-wrapper > div > div.col-lg-1 > button').click()  
cy.get ('#orderModal > .modal-dialog > .modal-content > .modal-footer > .btn-primary').click()

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

Что нужно делать на проекте, к которому у вашей команды есть доступ к исходному коду – добавлять data аттрибуты к тем HTML элементам, с которыми вы будете взаимодействовать в тестах. Это на данный момент самый надежный способ получить то, что нам нужно: однозначный, по желанию краткий и устойчивый к рефакторингу кода селектор.

Обратите внимание, что это общий совет, в рамках данных уроков у нас нет доступа к коду demoblaze.com, поэтому этот метод неприменим

data-cy: cy это вариация Cypress, можно использовать что-то свое, мы абстрагируемся от названия фреймворка и добавляем просто data-test.

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

cy.get('[data-cy="submit"]').click()

или даже

cy.getBySel('submit').click()

где getBysel это просто обертка для обычного cy.get:

cy.get(`[data-cy='${selector}']`, ...args));

Если вам по душе xpath, то есть современное решение, которое поддерживается многими фреймворками, включая Cypress - Testing Library, там код выглядит вот так:

Если data атрибуты вам по какой-то причине не подходят, попробуйте этот вариант.

https://testing-library.com/docs/cypress-testing-library/intro/#examples

1. Прочитать документацию от Cypress про селекторы
2. Пролистать продвинутые примеры Querying | Cypress examples
3. Пройти мини-курс Web Element Locator Strategies
4. Опционально: улучшить селекторы своих тестов по итогу получения новых знаний из курса выше
5. Для тех, кто занимается в группе: напишите о прохождении в чат с соответствующим топиком.