如何使用 node.js 在 selenium webdriver 中选择下拉值答案

【问题标题】：how to select a dropdown value in selenium webdriver using node.js如何使用 node.js 在 selenium webdriver 中选择下拉值
【发布时间】：2021-12-02 17:41:19
【问题描述】：

我有以下 HTML 结构：

<button class="dropdown-toggle selectpicker btn btn-primary" data-toggle="dropdown" type="button" data-id="strategic_reseller_country" title="United States">
<div class="dropdown-menu open" style="max-height: 245.6px; overflow: hidden; min-height: 40px;">
   <ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 243.6px; overflow-y: auto; min-height: 38px;">
      <li class="" rel="0">
         <a class="" style="" tabindex="0">
         <span class="text"/>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
      <li rel="1">
         <a class="" style="" tabindex="0">
         <span class="text">Andorra</span>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
      <li rel="2">
         <a class="" style="" tabindex="0">
         <span class="text">United Arab Emirates</span>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
      <li rel="3">
         <a class="" style="" tabindex="0">
         <span class="text">Afghanistan</span>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
      <li rel="4">
      <li rel="5">
      <li rel="6">
      <li rel="7">
      <li rel="8">
      <li rel="9">
         <a class="" style="" tabindex="0">
         <span class="text">Netherlands Antilles</span>
         <i class="glyphicon glyphicon-ok icon-ok check-mark"/>
         </a>
      </li>
   </ul>
</div>

那么我怎样才能从列表中获取项目呢？

我是 Node.Js (JavaScript) 的新手，所以我不知道如何在 node.Js 中实现它，但它可以在 java 中实现，如下所示：

Select dropdown = new Select(driver.findElement(By.class("dropdown-menu inner selectpicker"))); 
dropdown.selectByVisibleText("Andorra");

【问题讨论】：

Node 并没有任何方法来解析 HTML，但你可以看看 Cheerio 之类的东西，并使用与 jQuery 语法非常相似的东西来获得你想要的东西。

标签： javascript node.js selenium

【解决方案1】：

只需单击所需的选项。

driver.findElement(webdriver.By.css('#mySelection > option:nth-child(4)'))
    .click();

或按价值

driver.findElement(webdriver.By.css('#mySelection > option[value=apple]'))
    .click();

请注意，我已将您的“By”更改为 CSS 选择器。我很懒，喜欢钻研开发者工具中的选项，然后选择复制 CSS 路径 (chrome) 或复制唯一选择器 (firefox)。

【讨论】：

【解决方案2】：

你可以创建一个函数来选择你想要的值

像这样……

driver.wait(
    until.elementLocated(By.id("continents")), 20000
).then(element => {
    selectByVisibleText(element, "Africa")
});

function selectByVisibleText(select, textDesired) {
    select.findElements(By.tagName('option'))
    .then(options => {
        options.map(option => {
            option.getText().then(text => {
                if (text == textDesired)
                    option.click();
            });
        });
    });
}

【讨论】：

【解决方案3】：

对于任何坚持这一点的人，这是我为 <select> 选项所做的：

<select id='mySelection'>
   <option value='0'>Hello</option>
   <option value='1'>Everybody</option>
   <option value='2'>Got</option>
   <option value='3'>It</option>
</select>

在用于 NodeJS 的 Selenium 中，您将获取 It <option>：

var webdriver = require('selenium-webdriver');

var driver = new webdriver.Builder().
   withCapabilities(webdriver.Capabilities.chrome()).
   build();


driver.findElement(webdriver.By.id('mySelection')).sendKeys('It');

当您 .sendKeys() 选择该选项时，它必须等于下拉菜单中显示给用户的文本。

在您的情况下，只需获取父元素然后 sendKeys() 获取子元素。

【讨论】：

是的，这对我不起作用，sendKeys() 基本上是发送值，但父元素不是字段或实际接受值的东西。

【解决方案4】：

我会为此使用Cheerio。

module.exports = {
    "login": function (browser) {
        var cheerio = require("cheerio")

        browser
            .url("http://www.wikipedia.org")
            .waitForElementVisible('body', 1000)
            .waitForElementVisible('select#searchLanguage', 1000)
            .source(function(result) { // .source() dump the page source in the variable
                $ = cheerio.load(result.value)
                var num_languages = $('select#searchLanguage option').length
                console.log('Wikipedia.org Languages: ' + num_languages);
            })
            .end();
    }
};

或者直接使用.execute() 命令

【讨论】：

偏离轨道！！回答
你将什么作为“浏览器”传递给函数？

【解决方案5】：

如果你有

<select id='mySelection'>
   <option value='cat'>Cat!</option>
   <option value='dog'>Dog!</option>
   <option value='rat'>Rat!</option>
</select>

您可以使用方法sendKeys 传递值或文本

driver.findElement(webdriver.By.id('mySelection')).sendKeys('Rat!');

或

driver.findElement(webdriver.By.id('mySelection')).sendKeys('rat');

【讨论】：