css - 有两个同名的类。如何在 Webdriver.IO 中使用 css/xpath 选择其中一个元素？

Question

我使用 Webdriver.io 并想要选择“text-fields-container”类中的一个元素(它是一个密码字段)。两个类具有相同的名称。如何选择具有 type="password"的第二类。

<form>
	<div class="text-fields-container">
		<div>
			<input type="text" class="text-field" placeholder="Email" required stype="margin-bottom: 1.125rem;">
		</div>
		<div>
			<input type="password" class="text-field" placeholder="Password" required stype="margin-bottom: 5px;">
		</div>
	</div>
</form>

Answer 1

要选择具有type="password"的第二个类别，您可以使用以下任一定位器策略:

• css选择器:

  "input.text-field[type='password']"
  

• cssSelector(粒度):

  "input.text-field[type='password'][placeholder='Password']"
  

• xpath

  "//input[@class='text-field' and @type='password']"
  

• xpath(粒度):

  "//input[@class='text-field' and @type='password' and @placeholder='Password']"