如何使用 Selenium 和 Java 构造 xpath 或 css 定位器来识别元素

Question

这是我的 HTML：

<div class="x-form-item " tabindex="-1" id="ext-gen118">
    <label for="ext-comp-1060" style="width:40px;" class="x-form-item-label" id="ext-gen119">Name:</label>
    <div class="x-form-element" id="x-form-el-ext-comp-1060" style="padding-left:45px">
        <div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen120" style="width: 168px;">
            <input type="text" size="16" autocomplete="off" id="ext-comp-1060" name="ext-comp-1060" class="x-form-text x-form-field x-form-focus" style="width: 143px;" title="">
            <span class="x-form-twin-triggers" id="ext-gen121">
                <img src="/mco/extjs/resources/images/default/s.gif" alt="" class="x-form-trigger x-form-clear-trigger" id="ext-gen122" style="display: none;">
                <img src="/mco/extjs/resources/images/default/s.gif" alt="" class="x-form-trigger x-form-search-trigger" id="ext-gen123">
            </span>
        </div>
    </div>
    <div class="x-form-clear-left"></div>
</div>

我试过下面的 id "ext-comp-1060 是动态的，所以我不能使用。

xpath = "//div[@class='x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus']//input[@class='input.x-form-text.x-form-field.x-form-focus']"

css = "input.x-form-text.x-form-field.x-form-focus"

在我的应用程序相同的输入文本字段中，我必须一个接一个地使用两次 第一次工作我试过这样：

Wait wait = new FluentWait<WebDriver>(driver)
                .withTimeout(10, TimeUnit.SECONDS)
               .pollingEvery(3, TimeUnit.SECONDS);
       wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//label[contains(text(),'Name:')]")));
       ((JavascriptExecutor) driver).executeScript("arguments[0].click();", labelName);

searchName =@FindBy(css = "input.x-form-text.x-form-field.x-form-focus")
private WebElement searchByName;

searchByName.sendKeys(name);

但同时第二次它不起作用

Answer 1

您的webelement 是动态的，因此您可以查找元素属性的部分匹配，例如Id、class 和Name

等待元素

    By byCss=By.cssSelector("input[id^='ext-comp-']");
    By byXpath= By.xpath("//label[.='Name:']//input");

    WebDriverWait wait = new WebDriverWait(driver, 30);
    wait.until(ExpectedConditions.elementToBeClickable(byCss));

    WebDriverWait wait = new WebDriverWait(driver, 30);
    wait.until(ExpectedConditions.elementToBeClickable(byXpath));

查找元素并点击：

    WebElement element = driver.findElement(byCss); 


    WebElement element = driver.findElement(byXpath);

    element.click(); 

Answer 2

到click() 在所需元素中，您需要为elementToBeClickable() 诱导WebDriverWait，您可以使用以下Locator Strategies 之一：

• cssSelector:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("label.x-form-item-label[id^='ext-gen'][for^='ext-comp-']"))).click();
  

• xpath:

  new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//label[@class='x-form-item-label' and starts-with(@id, 'ext-gen')][starts-with(@for, 'ext-comp-') and text()='Name:']"))).click();
  

Answer 3

是只改变数字还是整个单词？ 如果只有数字发生变化，您可以将其用作 Css 定位器：

input[id^='ext-comp']

Answer 4

使用下面的XPATH，它将参考标签标签Name:识别输入元素

//label[text()='Name:']/following-sibling::div[1]//input

处理动态元素 Induce WebDriverWait 并等待elementToBeClickable()

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//label[text()='Name:']/following-sibling::div[1]//input"))).sendKeys("Hello");

Answer 5

你可以试试下面给定的xpath。

//div[@class='x-form-element']//child::input[@type='text' AND size='16']

我正在通过父级元素使用 web 元素的 type 和 size 属性访问输入字段。

希望这能解决您的问题。

Answer 6

我使用包含更新了你的 xpath，试试这个：

xpath = "//div[contains(@class, 'x-form-field-wrap']/input[contains(@class, 'x-form-text']"