Cypress-使contains()以不区分大小写的方式工作的方法

Question

我有一个项目没有使用HTML级别的大写字母，HTML中的值的大写字母不一致。

如果我只使用小写字符串作为contains((函数的参数，有什么方法可以强制Cypress匹配文本吗？

Answer 1

从4.0.0开始，Cypress提供matchCase选项和contains。。。

cy.get('div').contains('capital sentence', { matchCase: false })

Answer 2

Cypress包含的方法已经具有这样的功能。您只需将matchCase作为选项参数传递，Cypry将处理区分大小写/不区分大小写的条件。下面的代码片段将对您有所帮助。如果你喜欢这个答案，请喜欢这个答案并投票。

it('this will pass', () => {
cy.visit('https://example.cypress.io');
cy.contains('commands drive your tests', {matchCase: false})
});
it('this will fail', () => {
cy.visit('https://example.cypress.io');
cy.contains('commands drive your tests', {matchCase: true})
})

Answer 3

contains()可以采用正则表达式，您可以使用i标志为其指定不区分大小写的匹配：

其他答案已经提到了这一点，但这可能是最简单的使用方法：

cy.get('.some-selector').contains(/match cAse-InSENsitiVE/i);

Answer 4

您可以将不区分大小写的regex添加到contains命令中，尽管使用regex时需要小心转义任何特殊的regex字符，
请参阅此转义字符串以在Javascript regex 中使用

const escapeRegExp = (string) => {
return string.replace(/[.*+?^${}()|[]\]/g, '\$&');
}
const expected = 'mYtEXTtO*tEST?';
const regex = new RegExp(escapeRegExp(expected), 'i');
cy.contains(regex);
cy.contains('MySelector', regex);

Answer 5

您可以使用正则表达式。

cy.get("#whatever").its("something").should("match", "[your regex here]")

Answer 6

Cypress包含lodash。因此，这是我目前针对非区分大小写的文本匹配的解决方法，直到Cypress为cy.contains((包含此功能为止

cy.get('p.heading').then( $headings => {
let texts = $headings.map( (_, el) => (Cypress._.toUpper(el.textContent)));
expect(texts.get()).to.include('INCONSISTENT CAPITALIZED TITLE 1');
//If you have more to match
expect(texts.get()).to.include('INCONSISTENT CAPITALIZED TITLE 2');
});

Answer 7

对于Cypress 10，您可以使用此覆盖使默认情况下的包含不匹配

// set match case to default false
Cypress.Commands.overwrite('contains', (originalFn, subject, value, options) => {
const matchCase = options?.matchCase || false;
return originalFn(subject, value, { ...options, matchCase });
});