Cypress - select an option without using text or value

Question

This is what I am trying to select:

<select id="firstDate" name="firstDate" class="ab-abcd sdfg">
<option disabled="" value="">First day</option>
<option value="01.02.2019">01.02.2019</option>
<option value="01.02.2019">01.02.2019</option>
</select>

This dates will change every now and than, so is there a way to select an option with Cypress without using

cy.get('#firstDate').select('01.01.2019')

?

I also tried with

cy.get('#firstDate').first()

but that doesn't seem to work.

Answer 1

I think that the best way to change the value is via .select(). If you try to force click an option, it won't change the selected value.

What is the reason that makes this values change? If they are generated from a server request you can try to stub it like this. If they are generated given the current date, you could try using clocks

Edit After knowing what makes the selectors dynamic:

To fix a date for your tests and make them consistent you can do

// fix the date before rendering the select
const now = new Date(2019, 01, 15).getTime() //  2019-01-02 timestamp
cy.clock(now)

cy.visit('/index.html') // visit the page to test (or make actions that render the select)
cy.get('#firstDate').select('01.02.2019') // select one month beyond
cy.get('#firstDate').select('01.03.2019') // select two months beyond