t.me/atinfo_chat Telegram группа по автоматизации тестирования

Помощь в "правильном" локаторе и пути для элемента

locators
webdriver
selenide
Теги: #<Tag:0x00007f9c4fc944e0> #<Tag:0x00007f9c4fc94238> #<Tag:0x00007f9c4fc94288>

(Яна Телегина) #1

Элемент который хочу найти :
http://joxi.ru/brR5GLYh780XZA
ресурс https://agorafreight.com/book/wizard
Нет id для элемента, класс тоже не уникальный, раньше искала по содержимому текста вот так :
$(byText(“Контейнеры”)).click();
но по тексту искать не очень хочу, так как тест буду запускать на разных языках ресурса
как правильно написать путь до элемента используя xpath и css (не абсолютный)

Заранее спасибо за помощь.


(Vasiliy Rakshin) #2

.container:nth-child(2) .form-check:nth-child(2) input
или
.wizard__cargo-from_header_location .form-check:nth-child(2) input


(Яна Телегина) #3

1.А сможете пошагово объяснить, как такой путь составить? ну саму логику и действия \ куда смотреть
2.как например смотря на код элемента узнать что я смотрю именно на второй элемент такого класса ?
3.а как будет такой же путь выглядеть на xpath ?
4. :nth-child(2) это выбор второго дочернего элемента ? а почему .last не сработает в данном случае ?
у меня были попытки найти элемент вот так
SelenideElement selectorArea = $(className(“wizard__cargo-from_header_location”));
selectorArea.$(“form-check-label.last”).click();
было бы здорово если бы вы объяснили в чем я ошиблась и что делаю не так
Спасибо.


(Vasiliy Rakshin) #4

Вам нужен инпут, сначала ищем инпут - видим что на странице таких элементов 48. Надо сузить поиск. Смотрим какие блоки есть, Откуда-куда-Груз - пробуем найти сначала эти блоки, выше я привёл пример что можно найти просто по номеру, либо, да как вы оказались правы, по классу, хороший уникальный класс, именно для этого блока. Теперь найдя блок можно ещё раз поискать инпут в нём - получается уже только 2 элемента. Опять же можно обращаться по номеру, т.к. элементов может стать больше и ваш локатор .Ласт уже может ссылаться на не тот элемент.
И я смотрю вы используете селенид - тогда лучше элементы радио-баттоны - делать .selectRadio(true) а не кликать по ним.


(Яна Телегина) #5

а где в инструментах разработчика можно глянуть что инпутов 48 ? или любых других элеметов\классов? в хроме например


(Vasiliy Rakshin) #6

- в фаефоксе/хроме вызывается по F12.
В хроме на первой закладке надо ещё вызвать строку поиска - Контрол+F


(Яна Телегина) #8

и последний вопрос)
что если я вижу в чужом коде какой-то путь предположим что он слишком сложно написан
можно ли как-то в инструментах разработчика найти элемент вставить путь до него в какую нибудь поисковую строку.

я помню такая штука прокатывала с плагином для фф FireBug, но там можно было в поисковую строку положить xpath только


(Vasiliy Rakshin) #9

Я же выделил вам поисковую строку на скрине (ну и в хроме она же есть) - туда вставляете и он вам находит на странице этот элемент.


(Яна Телегина) #10

только я у себя в инструментах , что-то не нахожу информацию о кол-ве элементов


(Vasiliy Rakshin) #11


(Viktor) #12

Также будет полезно для выпадающих списков и подсказок которые открываются по наведению, через F8 в хроме можно запаузить сессию и список не будет скрываться когда захотите подсветить его инспектором. Но иногда нужно помучатся чтобы вовремя запаузить


(zub_test) #13

Привет! Вот классная обучалка по css selectors в игровой форме: https://flukeout.github.io/

Может поможет ответить на часть вопросов.


(Dima Mayboroda) #14

Я юзаю весьма полезную вещь аддон для DevTools в Chrome https://bit.ly/2GhYgOZ
Очень помогает выбрать нужный элемент.

А вообще для таких целей полезно попросить FE чтобы добавили к элементу атрибут по типу [data-testid=‘checkboxname’], так как после редизайна жлемент может уйти в другой блок ну или поменяется местами с другим элементом, приедтся делать много лишней работы.