CODEWITHSUNDEEP
cypress
Dhamo
Dhamo

Reputation: 1251

Compare one date value with other dates and perform conditional action in cypress

I'm trying to compare one date value (ie. base value) with all other date values on a page and based on the difference between these days, I want to execute other commands.

enter image description here

Well, in the above UI, the base value is 11 Jul 2021 (Departure date in the first list) and other date values are 12 Jul 2021, 20 Jul 2021, 27 Jul 2021, 3 Aug 2021 and so on (Arrival dates from 2nd list onwards).

Now, I had to delete the all list(s) where the date difference between the base value and particular list is less than 15 days. In this case, 12 Jul 2021, 20 Jul 2021 had to be deleted and all lists from 27 Jul 2021, 3 Aug 2021 and so on should be untouched as in the below picture.

enter image description here

So far, I have captured the value of the base value and came up with logic to compare it with another date value but I am not sure how I can save the 2nd and further date value(s) to a variable in order to compare with the base value.

{
  cy.get("[data-test='departureTime']")
    .eq(0)
    .then((date) => {
      const depDate_FirstPort = new Date(date.text());
      cy.log(depDate_FirstPort.toISOString()); //2021-07-11T19:00:00.000Z

      // const arrDate_SecondPort = new Date(cy.get('[data-test="arrivalTime"]').eq(1).invoke('text'));
      // Since the above approach does not work, hard coding now. 
     
      const arrDate_SecondPort = new Date("22 Jul 2021 12:01")
      cy.log(arrDate_SecondPort.toISOString()); //2021-07-22T10:01:00.000Z

      cy.getDifferenceBetweenDates(depDate_FirstPort,arrDate_SecondPort).then((dif)=>{
        if(dif < 16) {
          cy.log("delete the port entry");
          //do something
        }
      });
    });
  }

Cypress Command:

Cypress.Commands.add("getDifferenceBetweenDates", (Date1, Date2) => {
  var diff_times =  Math.abs(Date1.getTime() - Date2.getTime());
  var diff_days = Math.ceil(diff_times / (1000 * 3600 * 24));
  cy.log(diff_days) //11
})

Also, curious to know a possible approach to iterate all list falls under the 'to be deleted list' (12 Jul 2021, 20 Jul 2021) based on the condition mentioned above.

Upvotes: 3

Views: 1301

Answers (1)

Richard Matsen
Richard Matsen

Reputation: 23553

The iterative approach you have is ok, but you need to repeat the code you have for the first date to get the subsequent dates.

So, this bit but changing the index

cy.get("[data-test='departureTime']")
  .eq(0)                              // 1,2,3 etc
  .then((date) => {

A different approach is to filter the whole set,

const dayjs = require('dayjs')  // replaces Cypress.moment
                                // first install with
                                // yarn add -D dayjs

it('finds the skipped ports', () => {

  // helper func with format specific to this website
  const toDate = (el) => dayjs(el.innerText, 'D MMM YYYY HH:mm') 
  
  cy.get("[data-test='departureTime']")
    .then($departures => {                  
      const departures = [...$departures]    // convert jQuery object to an array
      const first = toDate(departures[0]);
      const cutoff = first.add(15, 'day')

      const nextPorts = departures.slice(1)  // all but the first
      const skipPorts = nextPorts.filter(port => toDate(port).isBefore(cutoff))

      expect(skipPorts.length).to.eq(2)
      expect(skipPorts[0].innerText).to.eq('12 Jul 2021 14:02')
      expect(skipPorts[1].innerText).to.eq('21 Jul 2021 04:00')
    })  
})

I'm not clear about your goal, but if you are going to actually delete the skipPorts from the page instead of just testing them, you should be wary of the DOM list changing as you do so.

Deleting from the list you have recently queried with cy.get("[data-test='departureTime']") would cause the internal subject to become invalid, and you might get "detached from DOM" errors or delete the wrong item.

Upvotes: 4

Related Questions