testomat.io управление авто тестамиЗачастую меня немного подтролливают, когда я произношу фразу “все зависит от проекта”. Ну действительно же, зависит. И не только от проекта, но от фреймвоков, на котором реализуется проект.
Когда мы выбираем локатор для идентификации элемента страницы, мы же ведь хотим, чтобы он был стабильным, ведь так? А стабильность… это дело относительное… по крайней мере, относительно между различными фреймворками.
Начнем с клиент-сайда
Голый 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.
Тут все более менее понятно. Вопрос как найти нужный компонент.
Как правило в компонент добавляют какие-то дополнительные данные для реализации прикладного назначения этого компонента. Например имя сущности, идентификатор формы, или адрес поставки данных для хранилища списка. Зная что и где искать можно без труда найти целевой компонент.
Кто может продолжить эту тему боли автоматизатора? 