如何在 Cypress 中定义自定义断言运算符？

Question

在 Cypress 测试中，我经常需要检查 DOM 元素中的文本是否等于某个预期的测试。但由于文本周围可能有一些空格，我不能简单地写：

cy.get('.cell')
  .should('have.text', 'Hello')

相反，我必须写：

cy.get('.cell')
  .then($cell => $cell.text().trim())
  .should('eq', 'Hello')

我想定义一个像 的自定义断言运算符have.text.trimmed，允许我像这样使用它：

cy.get('.cell')
  .should('have.text.trimmed', 'Hello');

但是我在官方网站上找不到任何关于它的文件。有人会分享一些例子吗？

Answer 1

目前，Cypress 无法开箱即用。该功能请求是提供“Cypress”方式来访问textContent（和/或innerText） - .text() 命令（#630）。

但是您可以通过向 support/commands.js 添加自定义命令并在测试脚本中使用这些命令来解决此问题。你最终会在commands.js中得到这个：

Cypress.Commands.add('haveText', function (text) {
  cy.get('.cell')
  .then($cell => $cell.text().trim())
  .should('eq', text)
})

在测试脚本中，您最终将得到：

cy.haveText('Hello')

trim()您也可以使用而不是使用command.js 中contains()的 ，这会进行部分匹配，因此空格没有问题（请注意，如果您查找“apple”，“appleie”也满足要求，如果这不是问题，您可以使用contains().Commands.js 看起来像这样：

Cypress.Commands.add('haveText', function (text) {
  cy.get('.cell')
  .should('contains', text)
})

contains()但与正则表达式结合使用可能更能满足您的要求。您不需要commands.js 中的任何脚本，但只需在测试脚本中您可以使用以下脚本：

cy.contains(/^\s*Hello\s*$/))

是\s*匹配任何空白字符零次或多次。是^从文本开头开始匹配$是从文本末尾结束匹配。

遗憾的是，正则表达式不能在 a 中使用should()。

Answer 2

最后，我找到了方法。虽然 Cypress 没有提供这样的功能，但是由于 Cypress 使用Chai，我们可以只定义 Chai 方法。

注意：不能定义have.text.trimmed，因为断言方法text是一个 Chai 方法。而不是一个可链接的方法，没有办法trimmed在它之后提供一个。

但仍然有两个选择：

1. 定义一个 Chai 方法textTrimmed。它允许我们使用.should('have.textTrimmed', 'sometext')，这是首选，因为我们可以定义自定义断言消息，并且不会对 jQuery 实例进行棘手的黑客攻击。

2. 定义一个 Chai 可链接方法trimmed。它允许 using .should('have.trimmed.text', 'sometext')，这似乎有效，但断言是由 Chai 方法确定的text，这可能会造成混淆。不推荐。

have.textTrimmed

这是在打字稿中：

chai.Assertion.addMethod('textTrimmed', function (expectedString: string) {
  const $element = this._obj;

  new chai.Assertion($element).to.be.exist;

  const actual = $element.text().trim();
  const expected = expectedString.trim();
  this.assert(
    actual === expected
    , ' Expected #{this} to have text #{exp} after trimmed, but the text was #{act} after trimmed'
    , 'expected #{this} not to have text #{exp} after trimmed'
    , expected
    , actual
  );
});

将代码放在cypress/support/index.js文件中以确保在测试之前运行它。

您可能想在此处查看完整的演示：https : //github.com/freewind-demos/typescript-cypress-add-custom-assertion-method-textTrimmed-demo/blob/master/cypress/support/textTrimmed.ts

文件 have.trimmed.text

chai.use((chai, utils) => {

  chai.Assertion.addChainableMethod("trimmed", () => {
  }, function () {
    const obj = utils.flag(this, 'object')

    const oldText = obj.text.bind(obj);
    obj.text = () => {
      return oldText().trim()
    }
  });
})

正如我所说，由于棘手的黑客攻击和不明确的断言消息，不推荐这样做。

您还可以在此处查看完整的演示：https : //github.com/freewind-demos/typescript-cypress-custom-operator-have-trimmed-text-demo/blob/master/cypress/support/index.ts