I can't choose a date automatically for my cypress tests on a vue2 datepicker

Question

I have to test with Cypress, a form created with vue2 and choose a specific date (1 fev 2024): I can't choose a date automatically for my cypress tests Regarding the date I have to put .click(); to get to the desired date (I can't write the date by doing .type() ). My problem is that I have to modify it every month because the number of click(); no longer corresponds to the date I want.

        <b-form-group
            :label="$t('sh-date')"
            label-for="date"
            label-size="sm"
          
        >
            <b-form-datepicker
                data-e2e="date-input"
                size="sm"
                :state="!!date"
                :locale="this.globals.locale"
                today-button
                @input="updateSomeStuff"
                id="dateVue"
                v-model="date"
            ></b-form-datepicker>
        </b-form-group>

My test e2e :

    cy.get('[title="Next year"] > div > .bi-chevron-double-left > [transform="translate(0 -0.5)"] > g > [d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"]').click({force: true});
        cy.get('[title="Next year"] > div > .bi-chevron-double-left > [transform="translate(0 -0.5)"] > g > [d="M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"]').click({force: true});
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('[title="Previous month"] > div > .bi-chevron-left').click();
        cy.get('#__BVID__34__cell-2024-02-01_ > .btn').click();
        cy.get('[data-e2e="submit-button"]').click();    
    });```



How to successfully automate the writing of a date when you can't write it, just click on the arrows? I want choose the first day on february on 2024
Knowing that on this datepicker, there is no input where you can write the date, you can only click on the arrows of the calendar and click on the day.

Answer 1

You can use cy.clock() to set the date that you want to run the test on.

For example,

cy.viewport(1500, 1200)

cy.visit('/')

cy.clock(new Date(2024, 1, 1))             // set app date

cy.get('#example-datepicker')              // open the dropdown 
  .parent()
  .scrollIntoView({ offset: { top: -300, left: 0 } })
  .click()

cy.get('#example-datepicker__dialog_')     // verify it is at the right date
  .should('contain', 'February 2024')

cy.get('#__BVID__538__cell-2024-02-01_')  
  .should('have.attr', 'aria-label', 'Thursday, 1 February 2024 (Today)')