Comparing multiple things at the same time without using variables to store data

[mooragor]

Hi all, new to cypress and it's async nature (previously used Selenium) and really struggling to work out how to do some basic comparing of different elements on a page (using Typescript).

I have a chart (see image) with a start date (text) and end date (date picker). I want to get the start date, the end date and all of the date labels on the X axis of the chart, then make sure that the date labels are all between the start and end date (then change the end date and repeat).

I'm missing something in how I can chain the 'gets' of the start and end date and somehow make them both available at the same time to compare them to the XAxis dates.

The code below now works, but it's using 'let' variables to store data, which is apparently an anti-pattern in cypress. Can anyone help explain how to do this 'properly' in cypress?

Cypress.Commands.add('verifyChartXAxis', () => {
  let startDateText :string;
  let endDateText :string;

  cy.get('.date-filter').invoke('text').then((sd) => {
    startDateText = sd;
  });

  cy.get('.date-picker').invoke('val').then((ed) => {
    endDateText = ed;
  });

  cy.get('.highcharts-xaxis-labels text').each((label) => {
    let arr = new RegExp(/^(.*)\s'(\d*)$/).exec(label.text());
    let date = new Date();
    date.setTime(Date.parse(`${arr[1]} 20${arr[2]}`));

    let startDate = new Date(Date.parse(startDateText));
    let endDate = new Date(Date.parse(endDateText));

    expect( (startDate <= date) && (date <= endDate)).to.be.true;
  });
});

[StephaneColson]

I'm not sure if it's the best way to do that but I'm using task to store things in a test

In cypress.config.ts

export default defineConfig({
  e2e: {
    setupNodeEvents(on, _config) {
      const items = {};
      on('task', {
        setItem({ name, value }) {
          if (typeof value === 'undefined') {
            throw new Error(`Cannot store undefined value for item "${name}"`);
          }
          items[name] = value;
          return null;
        },
        getItem(name) {
          if (name in items) {
            return items[name];
          }
          const msg = `Missing item "${name}"`;
          console.error(msg);
          throw new Error(msg);
        },
      })
    },

Then in your tests when storing key, value

cy.task('setItem', { name: 'key', value: <anything> });

and when retrieving key, value

cy.task('getItem', 'key').then((valueName: string) => {
...