Как написать повторно используемую функцию JavaScript с помощью команд Cypress

Question

Я новичок в кипарисах и тестировании.Мне нужно получить видимый текст из элемента в кипарис и сохранить его внутри переменной.с селеном мы можем легко получить значение элемента, используя метод getText ().Но в кипарисе нам нужно использовать код, подобный приведенному ниже.

HTML-элемент:

<div class='myClass'>this is text</div>

функция многократного использования javascript

function getText(byclassName)
    {
     let campaign;
        cy.get(byclassName)
        .invoke('text').then((text) => {
          campaign = text
          cy.log('campaign',  text)
          return text          
        })
    }

тогда мой тест на кипарис выглядит следующим образом

 it('finds the role', () => {
   const elementText= getText('.myClass')//fails
    cy.log('campaign',  getText('.myClass'))
 }) // it fails 

Скажите, пожалуйста, что мне здесь не хватает?Я хочу написать универсальную функцию, которая возвращает мне видимый текст из элемента div, а также сохранить его или войти в консоль.

Answer 1

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

Вот пользовательская команда, которую я использую в ряде наших тестов для получения текста из элемента. Текст получается иначе, чем вы делаете - я обнаружил, что использование invoke() довольно привередливо, возможно, именно так разработано наше приложение. Если вы хотите получить текст, используя invoke(), вы можете сделать это и внутри пользовательской команды.

Cypress.Commands.add("text", { prevSubject: "element" }, subject => {
  return cy.wrap(subject, { log: false }).then($el => {
    var text = $el.get(0).text();

    Cypress.log({
      name: "text",
      message: "",
      consoleProps() {
        return {
          yielded: text,
        };
      },
    });

    return text;
  });
});

it('finds the role', function () {
    cy.visit(...);

    return cy.get('.myClass').text().then(elementText => {
        cy.log('campaign', elementText);

        expect(elementText).to.equal(...);
    });
})

Answer 2

Вы возвращаете значение в вашей функции Promise. Однако обещания не могут возвращать значения, они могут разрешаться только со значением. Это означает, что вам придется использовать Обещания во всем коде, например:

function getText(byclassName) {
    return new Promise((resolve, reject) => {
        cy.get(byclassName).invoke('text')
            .then(campaign => {
                cy.log('campaign', campaign);
                resolve(campaign);
            });
    });
}

it('finds the role', function () {
    cy.visit(...);

    return getText('.myClass').then(elementText => {
        cy.log('campaign', elementText);

        expect(elementText).to.equal(...);
    });
})