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

【问题标题】：How to write reusable javascript function with cypress commands如何使用 cypress 命令编写可重用的 javascript 函数
【发布时间】：2019-05-27 15:33:22
【问题描述】：

我是 cypress 和测试的新手。我需要从 cypress 中的元素中获取可见文本，并将其存储在变量中。使用 selenium，我们可以使用 getText() 方法轻松获取元素值。但在 cypress 中，我们需要使用如下代码。

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 元素返回可见文本并将其存储或登录到控制台。

【问题讨论】：

标签： javascript cypress

【解决方案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(...);
    });
})

【讨论】：

仍然没有从 getText 函数中获取价值
我刚刚更新了我的答案，现在对我来说效果很好。
有没有办法只比较两个元素的文本，比如 const var1=getText('.myClass'); const var2=getText('.myRole');它不允许我比较 var1 和 var2

【解决方案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(...);
    });
})

【讨论】：