获取由 JavaScript 生成的 HTML 元素

Question

我有一个由 JavaScript 生成的输入字段<input class="postal-code form-text required form-control" autocomplete="postal-code" data-drupal-selector="edit-field-client-address-0-address-postal-code" type="text" id="edit-field-client-address-0-address-postal-code--bwzakXWpxR0" name="field_client_address[0][address][postal_code]" value="" size="10" maxlength="128" required="required" aria-required="true">正如你所看到的，每次 id 字符串都不同：id="edit-field-client-address-0-address-postal-code--bwzakXWpxR0"使用 Selenium 定位此 id 的正确方法是什么？

Answer 1

你可以尝试使用以下

driver.findElement(By.className("postal-code")).sendKeys("your value");

Answer 2

由于所需元素是一个<input>元素，因此接下来移动您将调用click()或sendKeys()，因此要定位您需要使用的元素elementToBeClickable()，您可以使用以下定位器策略之一：

• cssSelector:

  WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.postal-code[id*='address-postal-code'][name^='field_client_address']")));

• xpath:

  WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[@class='postal-code form-text required form-control' and contains(@id, 'address-postal-code')][starts-with(@name, 'field_client_address')]")));

Answer 3

有很多看似独特的属性。你尝试过其中的任何一个吗？潜在的 CSS 选择器

input[autocomplete='postal-code']

input[data-drupal-selector='edit-field-client-address-0-address-postal-code']

input[name='field_client_address[0][address][postal_code]']

或者你可以尝试 ID 开头，例如

input[id^='id="edit-field-client-address-0-address-postal-code--']

Answer 4

如果 id 是动态的，您可以尝试使用其他定位器。

CSS 选择器：

driver.findElement(By.cssSelector(input[data-drupal-selector='edit-field-client-address-0-address-postal-code'])).sendKeys("your value");