如何根据子元素中拆分的文本定位HTML元素？

问题场景 #

需要定位的元素带有哈希类名，原本可通过文本或cy.focused()方法定位，但该元素在失焦再聚焦过程中会重新挂载，无法复用之前的.focused()结果。尝试使用cy.contains('abcdefgh').click()（字符串为动态值）时，由于文本被拆分到多个子div中，无法成功定位目标元素，DOM结构如下：

<div class="kj45k4h535Hashed">
  <div class="input-text">
    <div>ab</div>
    <div>cd</div>
    <div>ef</div>
    <div>gh</div>
  </div>
</div>

解决方案 #

1. 定位父容器并验证拼接文本

cy.contains()仅匹配单个元素的文本内容，无法识别多个子元素拼接后的完整文本。可以先定位到带哈希类名的父容器，获取其完整文本后进行匹配：

const dynamicText = 'abcdefgh'
cy.get('.kj45k4h535Hashed')
  .invoke('text')
  .then(text => {
    // 去除文本中的换行、空格等冗余字符后对比
    expect(text.replace(/\s+/g, '')).to.equal(dynamicText)
  })
  .click()

如果父容器的文本无多余空白字符，也可以直接用断言简化写法：

const dynamicText = 'abcdefgh'
cy.get('.kj45k4h535Hashed')
  .should('have.text', dynamicText)
  .click()

2. 封装自定义命令复用逻辑

如果需要多次处理这类场景，可以封装成Cypress自定义命令：

在cypress/support/commands.js中添加：

Cypress.Commands.add('containsCombinedText', (selector, targetText) => {
  return cy.get(selector).then($el => {
    const combinedText = $el.text().replace(/\s+/g, '')
    expect(combinedText).to.equal(targetText)
    return $el
  })
})

测试中直接调用：

const dynamicText = 'abcdefgh'
cy.containsCombinedText('.kj45k4h535Hashed', dynamicText).click()

3. 结合聚焦状态重新定位

由于元素重新挂载后旧的聚焦元素失效，可以在触发聚焦后重新获取当前聚焦元素并验证文本：

const dynamicText = 'abcdefgh'
// 触发元素聚焦
cy.get('.kj45k4h535Hashed').click()
// 重新获取聚焦元素并验证文本
cy.focused()
  .invoke('text')
  .should('eq', dynamicText.replace(/\s+/g, ''))

内容的提问来源于stack exchange，提问作者Marc Sloth Eastman