How to select an option from a dropdown list using chromeless API?

Question

I am using chromeless API (https://github.com/graphcool/chromeless) How can I select an option from a dropdown list? Specifically I want to select last option having value="other".

My HTML is:

Answer 1

You could achieve this with the evaluate() method which lets you evaluate any Javascript within the browser-context of any page you load:

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

Or, specifically select whatever the last item is in the select list:

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

Answer 2

It can be done without the evaluate() method, too, albeit in a somewhat convoluted way. Avoiding evaluate() is useful when it is unknown exactly which events have to be triggered upon change, for the web application to work.

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

Or using the example posted in the question:

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

Selecting an option using native Chromeless commands involves first clicking the select element, then typing text to select the desired option, based on the visible text content of the option (the first few characters that unambiguously identify the option should be enough), and then clicking the desired option element. Since it is not possible to find the option element by text content using css selectors, the element must be selected by some other means – e.g. value or ordinal number.

Sending arrow key presses instead of typing characters to select the option might work, but I found in my testing that using the press() method was buggy. (A tab with Chrome settings would open randomly while executing tests that used press() to send either the return or the space key.)

All this said, I was unable to make tests run reliably with Chromeless. There seemed to be problems related to scrolling elements into view or not. While the webdriver-based systems http://webdriver.io, http://nightwatchjs.org and https://www.npmjs.com/package/selenium-webdriver are a bit more complicated to set up and code for, it might be worth the effort in order to get better reliability.