node.js - 如何使用 chromeless API 从下拉列表中选择一个选项？

Question

我正在使用 chromeless API ( 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()方法的情况下完成，尽管方式有点复杂。evaluate()当 Web 应用程序在更改时必须触发哪些事件确切地未知时，避免是很有用的。

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"]')

使用原生 Chromeless 命令选择选项包括首先单击select元素，然后根据选项的可见文本内容键入文本以选择所需选项（明确标识选项的前几个字符应该足够了），然后单击所需的option元素。由于无法option使用 css 选择器通过文本内容找到元素，因此必须通过其他方式选择元素 - 例如值或序号。

发送箭头键而不是输入字符来选择选项可能会起作用，但我在测试中发现使用该press()方法有问题。（在执行用于press()发送返回键或空格键的测试时，带有 Chrome 设置的选项卡会随机打开。）

综上所述，我无法使用 Chromeless 使测试可靠地运行。似乎存在与滚动元素相关的问题。虽然基于webdriver的系统http://webdriver.io、http://nightwatchjs.org和https://www.npmjs.com/package/selenium-webdriver的设置和编码有点复杂，但它为了获得更好的可靠性，可能值得付出努力。