在赛普拉斯测试中，我经常需要检查 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');
但是我在官方网站上找不到任何关于它的文件。有人会分享一些例子吗？
最后，我找到了方法。虽然赛普拉斯没有提供这样的功能，但是既然赛普拉斯使用柴，我们就可以定义柴方法了。
注意：无法定义have.text.trimmed，因为断言方法text是Chai方法。 而不是可链接的方法，没有办法在它之后提供trimmed。
但是仍然有两种选择：
-
定义柴方法
textTrimmed。它允许我们使用.should('have.textTrimmed', 'sometext')，这是首选，因为我们可以定义自定义断言消息，并且不会对jQuery实例进行棘手的黑客攻击。 -
定义柴可链接方法
trimmed。它允许使用.should('have.trimmed.text', 'sometext')，这似乎有效，但断言是由Chai方法确定的text，这可能是混淆。不建议这样做。
have.textTrimmed
这是在 TypeScript 中：
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
目前，赛普拉斯无法开箱即用。功能请求是提供访问textContent(和/或innerText)的"赛普拉斯"方式 - .text()命令(#630)。
但是您可以通过向支持/命令添加自定义命令来解决此问题.js并在测试脚本中使用这些命令。你最终会在命令中得到这个.js：
Cypress.Commands.add('haveText', function (text) {
cy.get('.cell')
.then($cell => $cell.text().trim())
.should('eq', text)
})
在测试脚本中，您最终将得到：
cy.haveText('Hello')
除了在命令中使用trim().js您还可以使用contains()，这会进行部分匹配，因此空格没有问题(请注意，如果您寻找"苹果"，"苹果派"也符合要求，如果这不是问题，您可以使用contains()。命令.js如下所示：
Cypress.Commands.add('haveText', function (text) {
cy.get('.cell')
.should('contains', text)
})
但是，可能更符合您要求的是将contains()与正则表达式结合使用。命令.js中不需要任何脚本，但只需在测试脚本中就可以使用它：
cy.contains(/^s*Hellos*$/))
s*是零次或多次匹配任何空格字符。^是从文本开头开始匹配$是在文本末尾结束匹配。
正则表达式不能在should()中使用，可悲的是。