我正在编写一个脚本来自动提交表单。使用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添加值？
答案 0 :(得分：0)
错误是说您的“元素不可编辑”，因为您要将文字发送到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");
答案 1 :(得分：0)
我将使用：http://embed.plnkr.co/OYcetkAmDd21zhhToCC9/ Plunker。
创建课程＆amp;构造
让我们首先为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上执行的步骤/操作，例如搜索项目名称，选择项目，验证结果显示，验证项目是否被选中等等。 / p>
/**
* 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();
}
}