在 Selenium 中点击 JavaScript 按钮 - Java

Question

我正在使用 Java 中的 Selenium 自动化一个大型项目。它一直很顺利，但我最近遇到了一个障碍。我正在尝试为 multi-select menu 提交 WebElements（见下文），然后从各自的列表中添加或删除它们，但 Selenium 很难做到这一点。

这是 HTML：

<div id="multiselect_labels_field_research_year" class="multiselect_labels">
    <div id="label_unselected_field_research_year" class="label_unselected">Available Options:</div>
    <div id="label_selected_field_research_year" class="label_selected">Selected Options:</div>
    </div>
    <div id="multiselect_available_field_research_year" class="multiselect_available">
        <select name="field_research_year_unsel" multiple="multiple" class="form-multiselect field_research_year_unsel multiselect_unsel" id="field_research_year" size="10">
            <option value="258">2016</option>
            <option value="261">2019</option>
            <option value="262">2020</option>
        </select>
    </div>
    <ul id="multiselect_btns_field_research_year" class="multiselect_btns">
        <li class="multiselect_add" id="field_research_year"><a href="javascript:;">Add</a></li>
        <li class="multiselect_remove" id="field_research_year"><a href="javascript:;">Remove</a></li>
    </ul>
    <div class="form-item form-type-select form-item-field-research-year-und">
        <label for="edit-field-research-year-und">Research Year </label>
            <select class="field_research_year_sel multiselect_sel form-select" id="field_research_year" multiple="multiple" name="field_research_year[und][]" size="10">
                <option value="258">2016</option><option value="261">2019</option>
                <option value="262">2020</option><option value="259" selected="selected">2017</option>
                <option value="260" selected="selected">2018</option>            
            </select>
    </div>

我可以很好地找到并单击菜单项，但是添加或删除变得很痛苦。首先，我在 HTML 中找到了“添加”和“删除”（绿色和红色按钮）的 WebElements，并尝试使用 Selenium 的 .click() 单击它，我收到一条错误消息，提示

“元素 [...] 在 (329, 19) 处不可点击。”

当我尝试单击链接部分（将“

for (WebElement we : yearButtonsRemove.getOptions()) {
    System.out.println(we.getText());
    we.click();
    JavascriptExecutor jse = (JavascriptExecutor) driver;
    jse.executeScript("arguments[0].scrollIntoView()", yearDel);
    jse.executeScript("arguments[0].click()", yearDel);
}

for (WebElement we : yearButtons.getOptions()) {
    if (we.getText().equals("2018") || we.getText().equals("2019")) {
        we.click();
        JavascriptExecutor jse = (JavascriptExecutor)driver;
        jse.executeScript("arguments[0].scrollIntoView()", yearAdd);
        jse.executeScript("arguments[0].click()", yearAdd);
    }
}

但是现在没有出现错误或跟随不相关的链接，而是没有任何反应。列表中正确的元素被选中，但使用 JavaScript “单击”按钮什么都不做。

Answer 1

根据异常类型，可以通过如下点击方法解决：

Actions builder = new Actions(driver);
builder.MoveToElement("Your target element").click().Perform();

Answer 2

您可以在不使用 JavaScript Executor 的情况下实现您的方案，如下所示

1. 如下创建两个函数addResearchYear和removeResearchYear
2. 如果需要添加年份，可以通过传递驱动实例和年份调用addResearchYear方法实现
3. 如果需要删除某个年份，则只需传递驱动程序实例和年份即可调用removeResearchYear 方法。

代码：

   public void addResearchYear(WebDriver driver,String year){
    //you can add the element list from Available List option. Adding can be done as below without using the JavaScript Executor
    WebElement availableOptions=driver.findElement(By.name("field_research_year_unsel"));
    Select select=new Select(availableOptions);
    select.selectByVisibleText(year);

    WebDriverWait wait=new WebDriverWait(driver,20);
    wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//li[@class='multiselect_add']/a")));
    driver.findElement(By.xpath("//li[@class='multiselect_add']/a")).click();
}

public void removeResearchYear(WebDriver driver,String year){
    WebElement selectedOptions=driver.findElement(By.xpath("//select[@class='field_research_year_sel multiselect_sel form-select']"));
    Select select=new Select(selectedOptions);
    select.selectByVisibleText(year);

    WebDriverWait wait=new WebDriverWait(driver,20);
    wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//li[@class='multiselect_remove']/a")));
    driver.findElement(By.xpath("//li[@class='multiselect_remove']/a")).click();
}