Cypress中jQuery :contains()选择器失效问题求助

以下是针对你遇到的DevExtreme表格元素定位场景的可行解决方案：

1. 用filter()实现精确文本匹配 #

jQuery的:contains存在区分大小写、对嵌套文本匹配不稳定的问题，改用filter()手动判断文本内容更可靠，尤其适合精确匹配数字类文本：

// 精确匹配单元格文本（自动去除前后空白）
cy.get('tbody tr.dx-data-row td').filter((index, el) => {
  return el.textContent.trim() === '10304';
}).should('exist');

2. 自定义jQuery伪类扩展匹配能力 #

如果想要保留类似:contains的写法，可自定义伪类解决匹配精度或大小写问题：

// 在测试代码开头注册自定义伪类
Cypress.$.expr.pseudos.containsExact = function(element, _, args) {
  return Cypress.$(element).text().trim() === args[3];
};

// 使用自定义伪类定位元素
cy.get('tbody:has(tr.dx-row-focused) tr td:containsExact("10304")').should('exist');

3. 针对DevExtreme表格的专属定位逻辑 #

DevExtreme表格的单元格文本常被嵌套元素包裹，直接用:contains可能无法穿透嵌套。可以先锁定父元素，再筛选目标单元格：

// 先定位到聚焦行，再查找包含目标数字的单元格
cy.get('tr.dx-row-focused.dx-data-row')
  .find('td')
  .filter((_, el) => el.textContent.includes('10304'))
  .should('have.length', 1);

4. 排查元素状态与Cypress上下文 #

• 确保元素已完全渲染：定位前添加断言等待父元素可见，比如cy.get('tbody tr.dx-data-row').should('be.visible')
• 检查元素可见性：如果元素处于隐藏状态，Cypress默认不会返回，可添加{ includeShadowDom: true }参数（针对影子DOM元素），但优先确保元素处于可见状态

内容的提问来源于stack exchange，提问作者Barış Can Ateş