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

Элемент который хочу найти :
http://joxi.ru/brR5GLYh780XZA
ресурс Калькулятор расчета стоимости доставки грузов онлайн | Ведущий цифровой экспедитор Agora Freight
Нет id для элемента, класс тоже не уникальный, раньше искала по содержимому текста вот так :
$(byText(“Контейнеры”)).click();
но по тексту искать не очень хочу, так как тест буду запускать на разных языках ресурса
как правильно написать путь до элемента используя xpath и css (не абсолютный)

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

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

2 Likes

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

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

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

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

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

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

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

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

1 Like

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

2 Likes

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

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

3 Likes

Я юзаю весьма полезную вещь аддон для DevTools в Chrome CSS Selector Helper - Chrome Web Store
Очень помогает выбрать нужный элемент.

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

1 Like