Как отличить два WebElements с одинаковым идентификатором?

Question

У меня есть два поля с одинаковым идентификатором на одной HTML-странице (с использованием Angular). Как различать два поля без создания коллекции и обращения к индексам>

Пример одного поля приведен ниже.

Я пробовал это

#content-container > inv-sidebar-layout-content > ng-component > ng-component > section > div.row.tab-container > as-split > as-split-area:nth-child(1) > article > inv-people-tabs > inv-vertical-tabs-list > div.tab-content-container > div > inv-tab:nth-child(7) > div > inv-people-contact-details-tab > section > div.left-column > inv-person-contact-details > section > inv-address-edit > section > div:nth-child(2) > input

, но он слишком длинный и громоздкий

HTML-код для первого поля:

<input _ngcontent-gec-c113="" class="inv-input" id="towncity" formcontrolname="TownCity">

и длявторой это

<input _ngcontent-gec-c113="" class="inv-input ng-pristine ng-valid ng-touched" id="towncity" formcontrolname="TownCity" ng-reflect-name="TownCity">

Answer 1

Элементы имеют разные классы, поэтому вы можете различать их, используя атрибут class

Примеры селекторов:

1. Первый элемент:

   //input[@id='towncity' and not(contains(@class,'touched'))]
   

   

2. Второй элемент

   //input[@id='towncity' and contains(@class,'touched')]
   

   

Дополнительная информация:

• Синтаксис XPath
• Операторы и функции XPath