如何区分具有相同ID的两个WebElement？

Question

我在一个HTML页面上有两个具有相同ID的字段（使用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 attribute

进行区分。

选择器示例：

1. 第一个元素：

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

   

2. 第二个元素

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

   

更多信息：

• XPath Syntax
• XPath Operators & Functions