如何在 selenium webdriver 中选择 oi-select 的值

Question

我正在编写一个脚本来自动化我的表单提交。使用 webdriver 代码，我可以将数据添加到除 oi-select 之外的所有 html 输入。

我的 HTML DOM：

<oi-select class="multiSelect ng-pristine ng-empty ng-invalid ng-invalid-required multiple ng-touched" ng-if="to.key==null" oi-options="item for item in to.options" ng-model="model[options.key]" required="true" multiple="" id="formly_1_estoreMultiselect_category_0" name="formly_1_estoreMultiselect_category_0" formly-custom-validation="" ng-keyup="options.templateOptions['onKeyup'](model[options.key], options, this, $event)" ng-focus="options.templateOptions['onFocus'](model[options.key], options, this, $event)" ng-blur="options.templateOptions['onBlur'](model[options.key], options, this, $event)" type="estoreMultiselect" style="">
    <div class="select-search">
        <ul class="select-search-list">
            <!---->
            <li class="select-search-list-item select-search-list-item_input" ng-class="{'select-search-list-item_hide': inputHide}">
                <input autocomplete="off" ng-model="query" ng-keyup="keyUp($event)" ng-keydown="keyDown($event)" class="ng-pristine ng-valid ng-empty ng-touched" placeholder="" style="">
            </li>
            <li class="select-search-list-item select-search-list-item_loader ng-hide" ng-show="showLoader">
            </li>
        </ul>
    </div>
    <div class="select-dropdown ng-hide" ng-show="isOpen">
    <!---->
    </div>
</oi-select>

这是我使用 Selenium WebDriver 获取它的代码：

driver.findElement(By.id("formly_1_estoreMultiselect_category_0")).clear();
driver.findElement(By.id("formly_1_estoreMultiselect_category_0")).sendKeys("Networking");

这是抛出的异常：

org.openqa.selenium.InvalidElementStateException: 
    Element must be user-editable in order to clear it.

如何向oi-select 添加值？

Answer 1

错误是说您的“元素不可编辑”，因为您将文本发送到 div 而它应该是 input

所以在这里，为了处理io-select 标签元素，我有下面的参考代码

public class Test {

    public static WebDriver driver;


    public static void main(String[] args) throws InterruptedException 
    {

        System.setProperty("webdriver.chrome.driver","Resources/chromedriver.exe"); 
        driver = new ChromeDriver();    
        driver.manage().window().maximize();
        driver.get("http://embed.plnkr.co/OYcetkAmDd21zhhToCC9/");
        driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
        driver.switchTo().frame(0).switchTo().frame(0);
        driver.findElement(By.xpath("//li/input[@class='ng-pristine ng-untouched ng-valid']")).sendKeys("boots");
       driver.findElement(By.xpath("//ul/li[contains(.,'boots')]")).click();

    }
}

所以在你的情况下你的元素是//input[@class='ng-pristine ng-valid ng-empty ng-touched']

driver.findElement(By.xpath("//input[@class='ng-pristine ng-valid ng-empty ng-touched']").sendKeys("yourText");

Answer 2

我将使用：http://embed.plnkr.co/OYcetkAmDd21zhhToCC9/Plunker。

创建类和构造函数

让我们首先为OISelect 创建一个类，该类接受By 类型的定位器和WebDriver 对象。

public class OISelect {

    By locator;
    WebDriver driver;
    WebDriverWait wait;

    public OISelect(By locator, WebDriver driver) {
        this.locator = locator;
        this.driver = driver;
        wait = new WebDriverWait(driver, 3);
    }
}

创建辅助函数

我们需要执行较小的功能，例如定位单个和网络元素列表：

/**
 * Return a web element
 * @param locator
 * @return
 */
private WebElement getWebElement(By locator) {
    return wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(locator)).get(0);
}

/**
 * Return a list of web elements
 * @param locator
 * @return
 */
private List<WebElement> getWebElements(By locator) {
    return wait.until(ExpectedConditions.visibilityOfAllElementsLocatedBy(locator));
}

/**
 * Return the search input text box
 * @return
 */
private WebElement getSearchInputTextbox() {
    return getWebElement(By.xpath("//*[contains(@class,'select-search-list-item_input')]//input"));
}

/**
 * Return the list item matching option name
 * @param opionName
 * @return
 */
private WebElement getOption(String opionName) {
    return getWebElement(By.xpath("//*[contains(@class,'select-dropdown-optgroup-option')]"));
}

创建动作执行者

现在我们需要定义可以在oi-select 上执行的步骤/操作，例如搜索项目名称、选择项目、验证结果是否显示、验证项目是否被选中等。

/**
 * Search an item name
 * 
 * @param itemName
 * @return
 */
public boolean searchItem(String itemName) {
    // Set text
    getSearchInputTextbox().sendKeys(itemName);
    // Verify text has been set
    boolean flag = getSearchInputTextbox().getAttribute("value").equalsIgnoreCase(itemName);
    System.out.println("Search text has been set to " + itemName + "? " + flag);
    return flag;
}

/**
 * Select an item name
 * 
 * @param itemName
 * @return
 */
public boolean selectItem(String itemName) {
    if (hasResults()) {
        getOption(itemName).click();
    }
    return isSelected(itemName);
}

/**
 * Verify if an item name is selected
 * 
 * @param itemName
 * @return
 */
public boolean isSelected(String itemName) {
    boolean isSelected = false;
    // Get list of all selected items
    List<WebElement> allItems = getWebElements(By.xpath(".//*[contains(@class,'select-search-list-item_selection')]"));
    // Iterate through each item to match expected item name
    for (WebElement item : allItems) {
        // Match item name 
        isSelected = item.getText().trim().contains(itemName);
        if (isSelected) {
            break; // Exit loop if matching item name exists
        }
    }
    System.out.println(itemName + " is selected? " + isSelected);
    return isSelected;
}

/**
 * Verify search results are displayed
 * 
 * @return
 */
public boolean hasResults() {
    boolean flag = getWebElement(By.xpath(".//*[contains(@class,'select-dropdown') and not(contains(@class,'ng-hide'))]")) != null;
    System.out.println("Results are displayed? " + flag);
    return flag;
}

最后是测试以上所有的主要方法

public static void main(String[] args) {

    // Load driver and url
    WebDriver driver = new ChromeDriver();
    String url = "http://embed.plnkr.co/OYcetkAmDd21zhhToCC9/";
    try {
        driver.get(url);
        WebElement frameElement = driver.findElement(By.className("plunker-space-iframe"));
        driver.switchTo().frame(frameElement).switchTo().frame("preview");

        // Select item
        OISelect select = new OISelect(By.tagName("oi-select"), driver);
        String itemName = "sneakers";
        select.searchItem(itemName);
        select.hasResults();
        select.selectItem(itemName);

    } catch (Exception e) {
        e.printStackTrace();
    } finally {
        driver.quit();
    }
}