如何在Cypress自定义命令中记录前置主题（prevSubject）

我需要为Cypress自定义命令shouldBeVisible添加日志功能，让日志能清晰记录调用的目标元素（效果参考下方示例图）。

现有自定义命令代码 #

Cypress.Commands.add('shouldBeVisible',
    {
        prevSubject: 'element',
    },
    (subject) => {
        var getText = cy.wrap(subject);
        // 尝试过的日志写法（未成功）
        // cy.wrap(subject).invoke('val').then((element) =>{
        //     cy.log('element:: ' + cy.wrap(subject).get(subject))
        // });

        const log = Cypress.log({
            name: "shouldBeVisible",
            displayName: "SHOULD BE VISIBLE",
            message: [
              `👁️ (element: `+subject+` should be visible)`,
            ],
            // @ts-ignore
            autoEnd: false,
            consoleProps() {
              return subject
            },
          })

        cy.wrap(subject).should('be.visible');
    }
)

命令调用代码 #

cy.visit('https://docs.cypress.io/guides/overview/why-cypress');
cy.get('.headerWrapper_tu51').shouldBeVisible();

期望日志效果 #

修复后的自定义命令代码 #

直接拼接subject（DOM元素对象）会导致日志显示无意义的[object HTMLElement]，需提取元素的标识信息优化日志：

Cypress.Commands.add('shouldBeVisible',
    {
        prevSubject: 'element',
    },
    (subject) => {
        // 优先取Cypress附带的原始选择器，无则 fallback 到元素类名
        const elementId = subject.selector || subject[0].className || '未知元素';
        
        const log = Cypress.log({
            name: "shouldBeVisible",
            displayName: "SHOULD BE VISIBLE",
            message: [
              `👁️ 元素: ${elementId} 应可见`,
            ],
            // @ts-ignore
            autoEnd: false,
            consoleProps() {
              // 控制台展示结构化调试信息
              return {
                元素标识: elementId,
                DOM元素: subject[0],
                验证规则: 'be.visible'
              }
            },
          })

        // 验证完成后结束日志，符合Cypress生命周期
        cy.wrap(subject).should('be.visible').then(() => {
            log.end();
        });
    }
)

优化说明 #

• 提取subject.selector（Cypress为元素附加的原始选择器），保证日志可读性
• 日志消息改为清晰的结构化描述
• 控制台属性整理为易读的键值对，方便调试
• 添加log.end()确保日志在验证完成后正确收尾

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