1

I am doing the testing of my web application using cypress. In the application I have to automate the test case for changing the date using the date picker calendar. Can anyone tell please me how do I select the date from the date picker calendar ,( I do not want to directly input the date in the input field as the input filed is read only and its value can be only changed using the date picker calendar widget).

ankit kansal
  • 227
  • 1
  • 3
  • 5
  • it would help if you can provide the code of the date picker? Because you need to do a few steps: 1. Open de date picker. 2. Select the correct year/month. 3. Select the correct day. And some extra info is needed, what year/month/day do you want to select? is the 'today' fine, or should it be something else? – Mr. J. Sep 24 '19 at 08:07
  • Today date is fine,So basically in the calandar wiget , there is two dropdown ,one is to select month and second one is to select year,below there is a table like structure in which all the dates are displayed. – ankit kansal Sep 24 '19 at 09:07
  • Can you inspect the select month and select year as other web elements? If so there is no difference from other web elements handling. – Pigbrainflower Sep 24 '19 at 19:01
  • @ankitkansal there's no difference you picking the date or inserting it to the field. cy.get('[formcontrolname="startDate"]').then(($startDate) => { cy.wrap($startDate).type('04/04/2022') }); – Avishka Perera Apr 04 '22 at 06:52
  • Did you ever get this working? – D.Hodges Jul 07 '22 at 02:43

6 Answers6

2

You can inspect the web elements on the date picker. If you can show more html source code it would be great.

Basically on a jquery date picker you can do the example like this,

    //click the date picker
    cy.get('#datepicker').click();
    //choose previous month
    cy.contains('Prev').click();
    //choose next month 
    cy.contains('Next').click();
    //choose date 24
    cy.contains('24').click();
Pigbrainflower
  • 480
  • 3
  • 12
1

You can Look into this code . It Would be help You.

cy.get('input[name="Date"]').invoke('val').then((text) => {
    expect('08/05/2019').to.equal(text);
});
Haseeb Javed
  • 44
  • 4
  • 2
    While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Tomer Shetah Dec 17 '20 at 12:25
0

Try this code. It will automatically Select the current Date:

 //First it Clicks on the calendar's field.
cy.get('#date').click();
//Then Clicks on current date. 
cy.get('.ui-datepicker-days-cell-over > .ui-state-default').click();

Remember that this class.ui-datepicker-days-cell-over may be different in your case but next is always same.

GHULAM NABI
  • 498
  • 5
  • 15
0

This is how I got a Cypress test to select a datepicker value in a Vue web app.

Set a date, for example today (see https://stackoverflow.com/a/29774197/9443322):

    let d = new Date();
    const offset = d.getTimezoneOffset();
    d = new Date(d.getTime() - (offset*60*1000));
    let myDate = d.toISOString().split('T')[0];

Then tell Cypress to click on the datepicker and force click the relevant data-date:

    cy.get('[data-cy=my-datepicker]').click().get('[data-date='+myDate+']', { force: true }).click()
stoicalpirate
  • 250
  • 3
  • 12
0

at my current company we work with react, so here is how I did it:

selectDate(day: number){
    cy.get(`.react-datepicker__input-container > input`).click()
    cy.wait(1000)
    cy.get(`.react-datepicker__day--0${day}`).click()
    return this
  }
  1. click on a date field to open date picker
  2. added wait for 1 sec which is not mandatory
  3. select desired date
DKulchykovskyi
  • 9
  • 2
0

This should work:

cy.get('#date').type('2020-10-20');

cy.get('#date') - access the datepicker element; i used an 'id' named '#date' .type('2020-10-20') - cypress will select and enter this date using 'yyyy-mm-dd'

Jay Mingle
  • 1