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

Question

我正在使用chromeless API（https://github.com/graphcool/chromeless） 如何从下拉列表中选择一个选项？ 具体来说，我想选择值为＆＃34;其他＆＃34;。

的最后一个选项

我的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()方法的情况下完成，尽管有点复杂。当不确定在更改时必须触发哪些事件时，避免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"]') 非常有用，以使Web应用程序正常工作。

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

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

select

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

发送箭头键而不是键入字符以选择该选项可能有效，但我在测试中发现使用press()方法是错误的。 （在执行使用public class CacheWebApiAttribute : ActionFilterAttribute { public int Duration { get; set; } public override void OnActionExecuted(HttpActionExecutedContext filterContext) { filterContext.Response.Headers.CacheControl = new CacheControlHeaderValue() { MaxAge = TimeSpan.FromMinutes(Duration), MustRevalidate = true, Private = true }; } } 发送返回或空格键的测试时，带有Chrome设置的标签会随机打开。）

所有这些说，我无法使用Chromeless可靠地运行测试。似乎存在与将元素滚动到视图中有关的问题。虽然基于webdriver的系统http://webdriver.io，http://nightwatchjs.org和https://www.npmjs.com/package/selenium-webdriver设置和编码有点复杂，但为了让自己变得更好，可能还需要付出努力可靠性。