如何使用cypress命令编写可重用的javascript函数

Question

我是柏树和测试的新手。 我需要从cypress中的元素获取可见文本，并将其存储在变量中。 使用硒，我们可以使用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

您将在Promise函数中返回该值。 但是，Promise不能返回值，它们只能使用值来解析。 这意味着您必须在整个代码中使用Promises，如下所示：

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

Answer 2

您也可以将其编写为自定义命令 ，我发现它更易于阅读，并且能够控制记录到命令日志中的内容是一件好事。

这是我在大量测试中使用的自定义命令，用于从元素中获取文本。 它获得的文本与您执行的操作不同-我发现使用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(...);
    });
})