当 Id 不连续时，如何使用 Selenium WebDriver 查找元素 (<input id="ext-gen26")答案

【问题标题】：How to find an element using Selenium WebDriver, when Id is not contant (<input id="ext-gen26")当 Id 不连续时，如何使用 Selenium WebDriver 查找元素 (<input id="ext-gen26")
【发布时间】：2013-04-21 05:36:33
【问题描述】：

我在使用 Selenium WebDriver 查找元素时需要帮助。我已经尝试了所有可能的选择器，但我无法找到该元素。

仅供参考。 id="ext-gen26" 不是常量，每次加载新页面时都会改变。

Tried Selectors:

    By.xpath("//button[@class=\"x-btn-text\"]/text()='Find Accounts'")
    By.cssSelector(input[name='id'])
    By.id("ext-gen26") 

Code:
    <div id="x-form-el-ext-gen26" class="x-form-element" style="padding-left:155px">
    <input id="ext-gen26" class="x-form-text x-form-field " type="text" name="id" 
    autocomplete="off" size="20" style="width: 212px;">
    </div>

我想定位 Account ID 元素并将文本发送到定位的元素。

如果您能提供一些启发，不胜感激。

【问题讨论】：

您需要更详细地解释访问此元素的规则。例如，使用 xpath 按类内容选择此输入的 xpath 将是 //input[@class='x-form-text x-form-field ']

标签： extjs xpath selenium css-selectors selenium-webdriver

【解决方案1】：

您的被测应用程序必须在输入字段、组合框、复选框等后面带有标签。

考虑到您的应用程序的标签为“帐户 ID”，请尝试以下操作

(//*[text()='Account ID']/following::input)[1]

HTML 代码如下所示-

<html>
<div id="x-form-el-ext-gen26" class="x-form-element" style="padding-left:155px">
    <label>Account ID: </label>
    <input id="ext-gen26" class="x-form-text x-form-field " type="text" name="id" 
    autocomplete="off" size="20" style="width: 212px;">
    </div>
</html>

除非标签发生变化，否则这种xpath永远不会失败。

【讨论】：

【解决方案2】：

这是我的方法：在客户端使用 ExtJS 组件查询获取 ID，然后使用 ID 定位 WebElement。要发送密钥，您通常需要更深入地挖掘一层才能获得“inputEl”。 Java 代码示例：

//a fully qualified ExtJS component query that will return one match only
String query = "viewport #panel1 textfield[fieldLabel='Test Field']";
//use component query to find id
String js = "return Ext.ComponentQuery.query(\"" + query + "\")[0].inputEl.id;";
String id = (String) ((JavascriptExecutor) _driver).executeScript(js);    
WebElement element = driver.findElement(By.id(id));
element.sendKeys("it works");

【讨论】：

【解决方案3】：

每次加载新页面时 div 的 id 也会改变吗？

我建议你写这样的东西：

css 选择器："div.x-form-element input"

但是，如果你有很多x-form-element 作为class 值的 div，你可以使用nth-child() 函数。喜欢：

css 选择器："div.x-form-element:nth-child(n) input" // n is the position order of your div that has x-form-element as class value.

nth-child() documentation

【讨论】：