Все зависит от проекта... или как выбрать локатор для тестов на WebDriver?


(Дмитрий Жарий) #1

Зачастую меня немного подтролливают, когда я произношу фразу “все зависит от проекта”. Ну действительно же, зависит. И не только от проекта, но от фреймвоков, на котором реализуется проект.

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

Начнем с клиент-сайда

Голый HTML или Bootstrap + JQuery

В этом случае, обычно очень хорошо работает идентификация по HTML id и CSS селекторам.
Ведь программисты сами обращаются к элементам по id, и учитывая то, что переименование id элемента грозит поиском и заменой по всем файлам… программисты не будут менять его часто, и будут следить, чтобы этот ID был уникальным на странице, как завещает нам великий стандарт HTML.
Тоже относится и к именам CSS классов. Они, конечно же, могут менятся со временем, но… это болезненно для разработчика, следовательно – метятся будут не часто.
Зачастую, для таких страниц, хорошо работает поиск FindElementById или CSS.

Вы еще не уснули?

Фреймворк Knockout

B вот вам сразу пример приложения.
Если исследовать типичный элемент накаута – текстовое поле, то что же мы увидим?

<input data-bind="value: firstName">

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

<input type="text" name="firstName" id="firstName"data-bind="value: firstName">

Но где же это все? где name? где id? где в конце концов type=“text”.
Вы не поверите. Этого всего нет. И это в официальном примере. Вы думаете, что обычный (ленивый) разработчик будет заводить атрибуты name или id специально для вас?
Ведь разработчику – они не нужны.

Knockout сам разруливает все привязки. Для этого, ему достаточно строки:
data-bind="value: firstName"

Следовательно, и локаторы в тестах нужно привязывать к этой строке:

CSS: input[data-bind="value: firstName"]
или
CSS: input[data-bind*="firstName"] (менее предсказуемо)

Фреймворк ExtJS

Если с Knockout (а также AngularJS) – все ясно – можно использовать их кастомные атрибуты, то ExtJS – это абсолютно другое дело. В ExtJS для каждого HTML элемента присваивается свой ID!
(А вот и примеры)
Ура?

Только… при следующем обновлении страницы, эти ID (все) будут меняться.
В таком случае, без JavaScript не обойтись. Вот что мне порекомендовали:
Ссылка на оригинал

Если в кратце, то наберите в отладчике на указанной вами странице это:

Ext.ComponentManager.each(function (id, item){console.log(id, item.getXTypes(), item.initialConfig)})

В консоль выведется весь список компонентов. Из них уже можно вытянуть Id DOM узла, или ссылку на него (Ext.getCmp(‘id’).body.dom — например). Далее этот Id или ссылку (да, да, именно ссылку на DOM) можно передать в Selenium.

Тут все более менее понятно. Вопрос как найти нужный компонент.

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

Кто может продолжить эту тему боли автоматизатора? :smiley:


CSS vs XPath - кто сильнее?
Сборник полезных ссылок по локаторам
Дайджест полезных ссылок для тестировщиков-автоматизаторов #010
(Сергей Блохин) #2

Я прос оставлю это http://rubygems.org/gems/selenium-extjs здесь.