如何使用chromeless从下拉列表中选择选项？

Question

我正在使用无铬接口(https://github.com/graphcool/chromeless)，如何从下拉列表中选择一个选项？具体地说，我想选择value=为“other”的最后一个选项。

我的HTML是：

​

​

Answer 1

您可以使用evaluate()方法来实现这一点，该方法允许您在所加载的任何页面的浏览器上下文中评估任何Javascript：

await chromeless
  .goto('http://yourwebsite.com/yourpage')
  .evaluate(() => {
    select = document.querySelector('select.decline-form-select')
    select.value = 'other'
  })

或者，具体选择选择列表中的最后一项：

await chromeless
  .goto('http://yourwebsite.com/yourpage')
  .evaluate(() => {
    document.querySelector('select.decline-form-select option:last-child').selected = true
  })

Answer 2

这也可以在没有evaluate()方法的情况下完成，尽管是以一种有点复杂的方式。当不知道为了使web应用程序正常工作而必须触发哪些事件时，避免evaluate()是很有用的。

await chromeless
    .click('#the-select-element')
    .type('First characters of description text of desired option', '#the-select-element')
    .click('#the-select-element option[value="the-matching-value"]')

或者使用问题中发布的示例：

await chromeless
    .click('select.decline-form-select')
    .type('Oth', 'select.decline-form-select')
    .click('select.decline-form-select option[value="other"]')

使用本机无铬命令选择一个选项需要先单击select元素，然后根据选项的可见文本内容键入文本以选择所需的选项(明确标识选项的前几个字符就足够了)，然后单击所需的option元素。由于不可能使用css选择器根据文本内容找到option元素，因此必须通过其他方式选择该元素-例如，值或序号。

发送按下箭头键而不是键入字符来选择选项可能是可行的，但是我在测试中发现使用press()方法是错误的。(在执行使用press()发送回车键或空格键的测试时，会随机打开一个带有Chrome设置的选项卡。)

尽管如此，我还是无法使用Chromeless可靠地运行测试。似乎存在与将元素滚动到视图中或不滚动元素有关的问题。虽然webdriver-based系统http://webdriver.io、http://nightwatchjs.org和https://www.npmjs.com/package/selenium-webdriver的设置和编码有点复杂，但为了获得更好的可靠性，这可能是值得的。