如何使用Selenium从下拉列表中选择值？

Question

下面给出了一段表示下拉列表的代码。我需要在此下拉列表中选择日期值，由<代码>

<select id="type" class="text-input ng-pristine ng-valid ng-scope ng-touched" ng-style="cssStyle" name="type" ng-if="!options.hidePlaceholder" ng-model="result.type" qmx-observe-value="text" ng-disabled="options.readonly" ng-options="obj.value as obj.text group by obj.groupby for obj in selectData" style="font-size: 13px; opacity: 1; width: 100%;">
    <option class="ng-binding" value="">----</option>
    <option value="0" selected="selected" label="Text">Text</option>
    <option value="1" label="Date">Date</option>
    <option value="2" label="Numeric">Numeric</option>
    <option value="3" label="Switch">Switch</option>
    <option value="4" label="Map Location Marker">Map Location Marker</option>
    <option value="5" label="Picker">Picker</option>
    <option value="6" label="List">List</option>
    </select>

以下方法无效
1。）使用“按导入组织选择”选择此值。openqa。硒。支持用户界面。选择

Select elm = new Select(driver.findElement(By.xpath(".//*[@id='type']/option[3]")));
  elm.selectByVisibleText("Date");

控制台显示：

元素应该是“选择”，但应该是“选项”

2.）首先单击下拉列表以显示要选择的选项，然后单击该选项。

driver.findElement(By.xpath(".//*[@id='type']")).click();
driver.findElement(By.xpath(".//*[@id='type']/option[3]")).click();

控制台显示：

调试元素缺少可访问的名称：id：类型，标记名：选择，类名：文本输入ng原始ng未触及ng有效ng范围

3.）使用JavascriptExecitor获得点击。

driver.findElement(By.xpath(".//*[@id='type']")).click();    
((JavascriptExecutor)driver).executeScript("arguments[0].click();", driver.findElement(By.xpath(".//*[@id='type']/option[3]")));

控制台显示：

调试元素缺少可访问的名称：id：类型，标记名：选择，类名：文本输入ng原始ng未触及ng有效ng范围

4.）在下拉菜单中选择选项上使用鼠标悬停，然后执行单击。

driver.findElement(By.xpath(".//*[@id='type']")).click();    
WebElement subdrop = driver.findElement(By.xpath(".//*[@id='type']/option[3]"));
        Actions action = new Actions(drive);
        action.moveToElement(subdrop).perform();
        Custom.Twait();
        action.click(subdrop).perform();

控制台显示：

线程“main”组织中出现异常。openqa。硒。不支持命令异常：POST/session/a37a745a-e40c-45a9-9760-8e01b451a017/moveto与已知命令不匹配（警告：服务器未提供任何堆栈跟踪信息）

我还添加了在我使用此代码的地方之间等待。为了简单起见，我没有包含它。

需要帮助。

Answer 1

在其他语言中使用的select类在typescript中不可用。与xPath一起使用时，单击似乎可以工作。

import { Builder, By, Key, Locator, TargetLocator, until } from 'selenium-webdriver';

async function example() {
  const driver = new Builder().forBrowser('chrome').build();
  await driver.get('http://localhost:5500/website/index.html');
  const xPath = '//*[@id="cars"]/option[3]';
  const element = driver.findElement(By.xpath(xPath));
  await element.click();
}

相关HTML：

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

基本上，我们的选择器应该以option元素为目标并触发Click事件。

Answer 2

driver.execute_script("return document.getElementById('select id here').selectedIndex = '2'")

Answer 3

在您的第一个选项selenium中明确表示Element应该是“选择”但是“选项”，这意味着您在这里为选项提供xpath，而只期望xpath用于选择。

不需要使用您提供的其他选项，只需使用您的第一个选项，如下所示：-

Select elm = new Select(driver.findElement(By.id("type")));
elm.selectByVisibleText("Date");

或按索引

elm.selectByIndex(2);

或按值

elm.selectByValue("1");

如果您的第一个选项不幸不起作用，我希望您使用第三个选项，使用JavascriptExecutor，如下所示：-

WebElement select = driver.findElement(By.id("type"));

((JavascriptExecutor)driver).executeScript("var select = arguments[0]; for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } }", select, "Date");

希望它能帮助您……：）