Add <datalist> support to cy.select

[chrisbreiding]

<datalist> elements are similar to <select> elements and it would be a natural extension of cy.select() to support them.

[chrisbreiding]

On second thought, <datalist> is only useful with an input, so it's easier and just as valuable to simply type in the value. Testing a <datalist> would basically be testing the browser's implementation, which doesn't make much sense.

[tamtam2008]

how can i select input datatalist in cypress, i've tried everything way i can but cypress's not same to be support it. Sorry for my bad english

[chrisbreiding]

This is a case where you don't need to do things exactly like a user would. So you don't need to open the datalist and 'select' an option to get it to work. If you want to test an input with a datalist, you generally want to test 2 things:

• that the right options are in the datalist
• what happens when one of those options is set as the input's value

So you can break it up similarly. If you have the following html:

  <input list="fruit" />
  <datalist id="fruit">
    <option>Apple</option>
    <option>Banana</option>
    <option>Cantaloupe</option>
  </datalist>

You can test it like this:

  cy.get('#fruit option').should('have.length', 3)
    .first().should('have.text', 'Apple')
    .next().should('have.text', 'Banana')
    // ... etc ...
  cy.get('input').type('Apple')

For testing the options, you query them directly and make assertions. For 'selecting' an option, you type it into the input.

Edited by @jennifer-shehane - replaced .second() in example with .next() for proper subject chaining.

[jennifer-shehane]

I created a new issue in our docs to document datalist testing here: cypress-io/cypress-documentation#824. Our documentation is open source and contributions are welcome. 😄

I also updated @chrisbreiding example above to use .next() instead of .second since the subject would have changed to the first option at that command.