如何使用Cypress读取img标签的alt、title等属性并进行值对比

核心原理 #

Cypress的contains()方法仅能匹配元素的文本内容（即标签包裹的innerText），title、alt这类属性存储在DOM元素的属性对象中，无法通过contains()直接识别，需要调用属性读取方法校验。

最优方案：直接断言属性值 #

使用should('have.attr')语法可一步完成属性值校验，同时建议用find()替代链式get()：get()默认从全局DOM根节点搜索，find()仅在之前选中的父元素范围内匹配子元素，避免误匹配其他节点。

示例1：校验HTML片段1中img的title属性 #

cy.get(`[aria-label="project.AddedProjectLeader: ${globalProjectId}"]`)
  .find('img')
  .should('have.attr', 'title', 'Paul 00_AA_Projektleiter')

示例2：校验HTML片段2中img的alt属性 #

cy.get(`[aria-label="project.AddedEmployeeImg: -SDE4HwB0UC4Ud30TJ9K"]`)
  .should('have.attr', 'alt', 'Bernd 00_BB_Testmitarbeiter')

进阶方案：先取属性值再做自定义校验 #

如果需要先拿到属性值做复杂逻辑判断（比如和动态变量对比、做字符串截取校验等），可以用invoke('attr', '属性名')取出属性值后再处理：

// 取出alt属性后自定义校验
cy.get(`[aria-label="project.AddedEmployeeImg: -SDE4HwB0UC4Ud30TJ9K"]`)
  .invoke('attr', 'alt')
  .then(altValue => {
    // 这里可写任意自定义校验逻辑
    expect(altValue).to.equal('Bernd 00_BB_Testmitarbeiter')
  })

之前写法失效的原因 #

1. contains('Paul 00_AA_Projektleiter')试图匹配img的文本内容，但img是单标签，本身没有文本节点，属性值不会被识别为文本
2. 直接写.its('title')获取不到属性：Cypress返回的元素是jQuery包装对象，原生DOM属性存在于jQuery对象的第0位，写.its('0.title')也能拿到值，但兼容性和可读性远不如invoke方法
3. 链式调用get()是全局搜索，很可能匹配到父元素外的其他img节点，导致断言失败

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