Cypress get multiple element value without chaining them

Question

I have tree value on my page. After one event these tree values should change. I want to get the initial value of them, then after the event, I would like to see if they increased correctly. Can I read and save these tree values without chaining them into each other?
The current code is now:

let active_tours: number;
let active_drivers: number;
let total_capacity: number;
cy.get('[data-cy="txt-dashboard-active_tours"]')
  .invoke('text')
  .then((txt) => {
    active_tours = parseInt(txt, 10);

    cy.get('[data-cy="txt-dashboard-active_drivers"]')
      .invoke('text')
      .then((txt) => {
        active_drivers = parseInt(txt, 10);

        cy.get('[data-cy="txt-dashboard-total_capacity"]')
          .invoke('text')
          .then((txt) => {
            total_capacity = parseInt(txt, 10);

            cy.createTour('email', 'password').then(
              (response: any) => {
                cy.get('[data-cy="txt-dashboard-active_tours"').should(($div) => {
                  expect($div.text().trim()).equal((active_tours + 1).toString());
                });
                cy.get('[data-cy="txt-dashboard-active_drivers"').should(($div) => {
                  expect($div.text().trim()).equal((active_drivers + 1).toString());
                });
                cy.get('[data-cy="txt-dashboard-total_capacity"').should(($div) => {
                  expect($div.text().trim()).equal(
                    (total_capacity + response.vehicle.capacity).toString()
                  );
                });
              }
            );
          });
      });
  });

Dizzy Al · Accepted Answer · 2021-10-22T02:35:37.293

To minimize async callbacks, use aliases and this properties, see Sharing context

it('minimizes callbacks', function () {        // must be function here

  cy.get('[data-cy="txt-dashboard-active_tours"]')
    .then($el => parseInt($el.text(), 10))
    .as('tours')                               // saved as this.tours

  cy.get('[data-cy="txt-dashboard-active_drivers"]')
    .then($el => parseInt($el.text(), 10))
    .as('drivers')                             // saved as this.drivers

  cy.get('[data-cy="txt-dashboard-total_capacity"]')
    .then($el => parseInt($el.text(), 10))
    .as('capacity')                            // saved as this.capacity

  cy.createTour('email', 'password').then(response => {

    cy.get('[data-cy="txt-dashboard-active_tours"')
      .then($el => parseInt($el.text(), 10))
      .should(tours2 => expect(tours2).to.eq(this.tours + 1))

    cy.get('[data-cy="txt-dashboard-active_drivers"]')
      .then($el => parseInt($el.text(), 10))
      .should(drivers2 => expect(drivers2).to.eq(this.drivers + 1))

    cy.get('[data-cy="txt-dashboard-total_capacity"')
      .then($el => parseInt($el.text(), 10))
      .should(capacity2 => {
        expect(capacity2).to.eq(this.capacity + response.vehicle.capacity)
      })
  })
})

If you want to remove some code repetition

Cypress.Commands.add('saveNumber', (selector, alias) => {
  cy.get(selector).then($el => parseInt($el.text(), 10)).as(alias)
})

it('minimizes callbacks', function () {        // must be function here

  cy.saveNumber('[data-cy="txt-dashboard-active_tours"]', 'tours')
  cy.saveNumber('[data-cy="txt-dashboard-active_drivers"]', 'drivers')
  cy.saveNumber('[data-cy="txt-dashboard-total_capacity"]'), 'capacity')

  cy.createTour('email', 'password').then(response => {

    cy.saveNumber('[data-cy="txt-dashboard-active_tours"]', 'tours2')
      .should(() => expect(this.tours2).to.eq(this.tours + 1))

    cy.saveNumber('[data-cy="txt-dashboard-active_drivers"]', 'drivers')
      .should(() => expect(this.drivers2).to.eq(this.drivers + 1))

    cy.saveNumber('[data-cy="txt-dashboard-total_capacity"]'), 'capacity')
      .should(() => {
        expect(this.capacity2).to.eq(this.capacity + response.vehicle.capacity)
      })
  })
})

Cypress get multiple element value without chaining them

1 Answers1