赛普拉斯无需链接即可获得多个元素值

Question

我的页面上有树值。在一次事件之后，这些树值应该改变。我想得到它们的初始值，然后在事件发生后，我想看看它们是否正确增加。我可以读取并保存这些树值而不将它们链接在一起吗？
现在的代码是：

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()
                  );
                });
              }
            );
          });
      });
  });

Answer 1

要尽量减少异步回调，请使用别名和 this 属性，请参阅 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)
      })
  })
})

如果你想删除一些代码重复

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

chaining

cypress

e2e