Как сохранить текст элемента из цепочки кипариса в переменную в машинописи?

Question

Я хотел бы иметь несколько тестов для сравнения текстового значения tolPage, такого же, как текстовое значение curPage, как показано ниже. но это не работает, как мне передать текст элемента из цепочки кипариса в локальную переменную

class Menu{
  tolPage() {
    return cy
      .get(selectors.pagination.totalPageCount)
      .invoke('text')
      .then((text) => {
        return text.toString();
      });
  }
  curPage() {
    return cy
      .get(selectors.pagination.currentPageCount)
      .invoke('text')
      .then((text) => {
        return text.toString();
      });
  }
}
describe('check two function should be eq') {
  const menu = new Menu();
    it('Verified "', () => {
      let text = menu.curPage();
      # menu.tolPage().should('be.eq', text));
      # menu.tolPage().should('be.eq', menu.curPage());
  });
}

Answer 1

Вы должны прочитать часть документации, которая обрабатывает asyn c поведение кипариса: https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Commands -Асинхронный

Так что вы можете не присваивайте menu.curPage() переменной и ожидайте, что эта переменная содержит текст.

Так что это не удастся. testVar по-прежнему равен нулю при достижении строки expect:

it("test", () =>{
    let testVar = null;
    cy.get("body").then(() => {
        testVar = 5;
    })

    expect(testVar).to.eq(5)
})

Вместо этого вы можете написать это следующим образом (зависит от того, что и как вы хотите проверить):

it("test", () =>{
    let testVar = null;
    cy.get("body").then(() => {
        testVar = 5;
    })

    cy.get("body").should(() => {
        expect(testVar).to.eq(5)
    })
})

поэтому, основываясь на вашем коде, ваше решение может выглядеть примерно так:

  describe('check two function should be eq') {
    const menu = new Menu();
      it('Verified "', () => {
        menu.curPage().then(cPText => {
            menu.tolPage().then(tPText => {
                expect(cPText).to.eq(tPText);
            })
        });
    });

Это вложение команд может раздражать, если вам нужно проверить более двух текстовых значений. Чтобы сделать вашу жизнь проще, вы можете сделать это:

describe("test", () => {
    beforeEach(() => {
        cy.visit("https://cypress.io")
    })

    it("test", () => {
        getCaption();
        getSubCaption();
        // attention: function() syntax is required to keep `this` context
        cy.get("body").should(function() {
            expect(this.caption.indexOf("testing") > -1).to.eq(this.subcaption.indexOf("testing") > -1)
        });
    })
})

function getCaption() {
    return cy.get(".Hero-TagLine.mt-0").invoke("text").as("caption");
}

function getSubCaption() {
    return cy.get(".Hero-ByLine.mb-0").invoke("text").as("subcaption");    
}

Я добавил собственный пример, чтобы я смог предоставить вам работающий и работающий пример. Но вы можете настроить его так, чтобы он легко соответствовал вашему коду. Что происходит:

• cy.get().invoke("text").as("alias") делает то же самое, что и в вашем коде, за исключением того, что сохраняет текстовое содержимое в псевдониме. Cypress также создает новую переменную экземпляра для каждого псевдонима, поэтому вы можете получить к ней доступ через this.caption.
  • Используя этот подход, вы можете легко сохранить 10 и более текстовых элементов и затем обращаться к ним в плоской иерархии
  • Но помните о синтаксисе function (). Вы не можете использовать синтаксис стрелки phat, потому что тогда ваш this контекст неправильный
  • , также вы можете воспользоваться функцией повтора команды should. Он будет повторять ваш обратный вызов до тех пор, пока не произойдет сбой подтверждения или пока не истечет время ожидания
  • , это также работает в Typescript. Но, конечно, Typescript не знает свойств this.caption и this.subcaption. Поэтому вам придется привести this к any до или откорректировать определения типов

Кстати: я видел, что вы делаете это: cy.get().invoke("text").then(t => t.toString()), чтобы исправить типы в тс. Вы можете избежать этого, используя собственное определение типа:

declare global {
    namespace Cypress {
        interface Chainable {
            invoke(fn: "text"): Cypress.Chainable<string>;
        }
    }
}

Это можно удалить после объединения https://github.com/cypress-io/cypress/issues/4022.