Cypress测试中如何校验header标签与data-cy属性同时存在

你写的测试代码是不正确的，存在两处核心问题：

• 第一处是语法错误：第一个cy.get('[data-cy=my-header]'缺少右闭合括号，运行时会直接抛出语法异常。
• 第二处是逻辑错误：Cypress的cy.get()命令默认始终从整个文档的根节点开始查询元素，连续链式调用get并不会限定查询范围在上一个get返回的元素集合内，所以你的代码实际执行逻辑是：先查所有带data-cy="my-header"的元素，再重新查整个DOM里所有的header标签，最后校验最后查到的header是否可见，完全无法实现「同一个元素同时满足两个属性」的校验要求。

正确实现方案 #

方案1：合并选择器直接查询

直接把标签选择器和属性选择器组合，一次定位到同时满足两个条件的元素，是最简洁的写法：

cy.get('header[data-cy="my-header"]').should('be.visible')

方案2：分步校验元素属性

如果你需要先按data-cy定位元素，再单独校验标签类型，可以用如下写法：

cy.get('[data-cy="my-header"]')
  // 校验元素标签为header，tagName返回值默认是全大写，所以对比值写HEADER
  .should('have.prop', 'tagName', 'HEADER')
  .and('be.visible')

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