Best practices выбора локаторов

Эффективное тестирование в Protractor зависит от правильного выбора локаторов. Локаторы определяют элементы на веб-странице и обеспечивают стабильность и надежность тестов. Неправильный выбор локаторов приводит к частым поломкам тестов при изменении интерфейса и усложняет поддержку тестового кода.

Ключевые критерии при выборе локаторов

1. Надежность. Локатор должен оставаться рабочим даже при изменении визуального оформления страницы. Например, изменение CSS-классов ради стилизации не должно ломать тест.

2. Уникальность. Локатор должен однозначно идентифицировать элемент на странице. Если локатор совпадает с несколькими элементами, тест может дать ложноположительный результат или упасть.

3. Читаемость. Код должен быть понятен другим разработчикам и тестировщикам. Локаторы, явно описывающие элемент (например, id или data-test), повышают читаемость.

4. Производительность. Некоторые локаторы, такие как сложные XPath выражения, могут работать медленнее, чем простые CSS-селекторы. Для больших страниц это становится критично.

Наиболее эффективные типы локаторов

1. id Использование id — наилучший вариант, если элемент имеет уникальный идентификатор:

element(by.id('submit-button')).click();

Преимущества: уникальность, высокая скорость поиска, простота чтения.

2. name Локатор по имени используется для форм и полей ввода:

element(by.name('username')).sendKeys('admin');

Подходит для элементов форм, но необходимо убедиться в уникальности имени на странице.

3. CSS-селекторы CSS-селекторы дают гибкость при комбинировании классов, тегов и атрибутов:

element(by.css('.form-group input[type="text"]')).sendKeys('test');

Преимущества: высокая производительность и читаемость при правильной структуре. Недостаток: если классы часто меняются, локатор становится ненадежным.

4. XPath XPath позволяет выбирать элементы по сложной структуре документа:

element(by.xpath('//div[@class="menu"]/ul/li[2]/a')).click();

Используется, когда другие локаторы невозможны. Недостатки: сложность поддержки, снижение скорости выполнения тестов.

5. binding и model (для Angular-приложений) Protractor поддерживает локаторы, специфичные для Angular:

element(by.model('user.name')).sendKeys('John');
element(by.binding('user.name')).getText().then(console.log);

Эти локаторы обеспечивают тесную интеграцию с Angular и делают тесты более устойчивыми к изменениям разметки.

6. tagName и className Используются реже, преимущественно для выборки множества элементов:

element.all(by.tagName('li')).count().then(console.log);
element(by.className('alert')).getText().then(console.log);

Важно проверять уникальность элементов, иначе выборка может вернуть массив, а не один элемент.

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

  1. Стараться использовать уникальные id и data-test атрибуты. Эти атрибуты не зависят от визуального оформления и редко меняются.
  2. CSS предпочтительнее XPath, если задача может быть решена с помощью CSS. CSS-селекторы проще читать и быстрее выполняются.
  3. Избегать сложных и глубоко вложенных XPath выражений, они хрупки при изменении структуры DOM.
  4. Использовать локаторы Angular только для Angular-приложений. В чистом HTML они будут бесполезны.
  5. Минимизировать использование className и tagName, если нет гарантии уникальности элемента.
  6. Сохранять локаторы в отдельные переменные или Page Objects, чтобы централизованно управлять изменениями:
const loginButton = element(by.id('login-button'));
loginButton.click();
  1. Проверять стабильность локатора на разных разрешениях экрана и при разных данных страницы, чтобы убедиться в его надежности.

Вывод

Правильный выбор локаторов — ключевой фактор стабильности тестов в Protractor. Следует отдавать предпочтение уникальным, читаемым и производительным локаторам, минимизируя зависимость от изменчивых атрибутов. Использование Page Object и централизованного хранения локаторов значительно облегчает поддержку тестов при изменении интерфейса.

Оглавление