我无法在 vue2 日期选择器上自动为我的 cypress 测试选择日期

Question

我必须使用 Cypress 进行测试，这是一种使用 vue2 创建的表单，并选择一个特定的日期（2024 年 1 月 1 日）： 我无法为我的赛普拉斯测试自动选择日期 关于我必须输入 .click(); 的日期到达所需的日期（我不能通过 .type() 来写日期）。我的问题是我每个月都必须修改它，因为 click(); 的数量。不再对应我想要的日期

        <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>

我的测试 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

您可以使用 cy.clock() 设置您想要运行测试的日期。

例如，

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