如何在Cypress中测试损坏图片并验证显示的alt文本

我需要测试页面上的损坏图片，查看DOM时发现结构如下：

<img src="https://www.example.com/images/a123.jpg" alt="a123">
  #shadow-root (user-agent)
  <span id="alttext-container">
    <img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; 
      display: inline; float: left;">
    <span id="alttext">a123</span>
  </span>

尝试用以下代码访问alt文本时测试失败：

cy.get('img[src="https://www.example.com/images/a123.jpg"]')
  .shadow()
  .find('span[id="alttext"]')

解决方法 #

1. 直接验证原img标签的alt属性

损坏图片显示的alt文本本质就是原<img>标签的alt属性值，浏览器只是将其渲染到用户代理影子根中，因此可以直接断言原标签的属性：

cy.get('img[src="https://www.example.com/images/a123.jpg"]')
  .should('have.attr', 'alt', 'a123')

2. 配置Cypress以访问用户代理影子根

用户代理影子根（user-agent类型）和常规开放影子根不同，默认无法被Cypress访问。若要直接验证影子根内的文本，需在cypress.config.js中启用相关配置：

module.exports = {
  e2e: {
    experimentalShadowDomSupport: true,
    includeShadowDom: true,
    // 其他项目配置
  },
}

配置完成后，原代码即可尝试访问影子根内的元素，但注意该方法的兼容性可能因浏览器环境而异。

3. 验证页面可见文本

若只需确认文本在页面上可见，可直接用cy.contains断言：

cy.contains('a123')
  .should('be.visible')

注意：需确保页面中无其他相同文本，避免误判。

内容的提问来源于stack exchange，提问作者user19867290