Cypress run模式日志不显示cy.get选择器仅展示DOM类名，有何解决方案？

现有如下Cypress测试代码：

cy.get('[testid="cancel-button"]').should('not.exist')
cy.get('[testid="reset-button"]').should('not.exist')
cy.get('[testid="other-button"]').should('not.exist')

在cypress open模式下运行时，日志可以正常显示cy.get()传入的testid选择器，但是在cypress run模式生成的HTML失败日志中，只会输出统一的DOM类名提示：

Expected <button.bp3-button> not to exist in the DOM, but it was continuously found.

无法直接判断具体是哪条断言失败，需要让失败日志直接展示cy.get()调用时传入的自定义选择器，快速定位问题。

• 方案1：给should断言传入自定义描述
  should支持传入第二个参数作为断言失败时的自定义提示，直接标注对应选择器即可，示例代码如下：

  cy.get('[testid="cancel-button"]').should('not.exist', 'testid为cancel-button的元素不应存在')
  cy.get('[testid="reset-button"]').should('not.exist', 'testid为reset-button的元素不应存在')
  cy.get('[testid="other-button"]').should('not.exist', 'testid为other-button的元素不应存在')
  

  断言失败时会直接在日志中输出你自定义的描述，无需依赖默认的DOM类名提示。

• 方案2：封装针对testid的自定义查询命令
  统一封装选择器查询逻辑，在命令内部绑定选择器日志信息，无需每条断言单独加描述，示例封装代码如下：

  // 在cypress/support/commands.js中添加自定义命令
  Cypress.Commands.add('getByTestId', (testId, options = {}) => {
    // 关闭默认的cy.get日志，用自定义日志替代
    return cy.get(`[testid="${testId}"]`, { ...options, log: false })
      .then($el => {
        Cypress.log({
          name: 'getByTestId',
          message: `[testid="${testId}"]`,
          $el: $el
        })
        return $el
      })
  })
  

  业务代码调用方式：

  cy.getByTestId('cancel-button').should('not.exist')
  cy.getByTestId('reset-button').should('not.exist')
  cy.getByTestId('other-button').should('not.exist')
  

  该方式下不管是open还是run模式，失败日志都会直接展示对应的testid值。

• 方案3：升级Cypress到12.0+版本
  12.0及以上版本的Cypress优化了run模式的日志输出逻辑，默认会在断言失败日志中展示cy.get()调用时传入的原始选择器，无需额外修改代码。

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