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

您也可以将其写为custom command，我发现它更易于阅读，并且能够控制记录到命令日志中的内容是一个奖励。

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

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

2 个答案: