Ссылки на элементы в модульных и селеновых тестах, когда «класс» недоступен

Question

Я занимаюсь разработкой проектов с использованием javascript (React).Я использую модульную CSS, которая рандомизирует имя class, поэтому я не могу удержать его, используя селекторы CSS позже в тестах.

Какие есть варианты, если я хочу упростить ссылки на элементы пользовательского интерфейса в тестах (это единица или селен)?

Answer 1

Я нахожу элементы DOM с помощью специальных атрибутов, добавляемых в HTML-элемент, который всегда следует определенной схеме именования.

Пример (HTML): <div class="randomClass" data-testing-locator="test-locator-attr-example">

Мой локатор: element(by.css('div[data-testing-locator="test-locator-attr-example"]'))

Я избегаю использования локаторов на основе классов.Мы использовали их интенсивно в большом производственном приложении, и незначительные изменения в HTML (например, добавление нового имени класса к элементу) могли сломать локаторы.Переключаясь на поиск атрибутов, наши тесты больше не ломались, когда дизайнер вносил относительно небольшие изменения.Это действительно раздражало необходимость исправлять локаторы каждый второй день или около того.