将函数转为Cypress自定义命令后输出不符合预期的问题排查

核心问题 #

你在自定义命令的定义和调用上存在两处关键错误：

1. 调用方式不符合Cypress命令规则：直接调用cy.getAllCssPropertiesAndValues($el[0])返回的是Cypress的Chainable异步对象，不是实际的CSS属性结果，必须通过.then()提取最终值。
2. 自定义命令参数设计不规范：Cypress自定义命令在链式调用时，会自动把前一个命令的返回值（比如cy.get()得到的JQuery元素）作为第一个参数传入，不需要手动传递element。

修正步骤 #

1. 调整自定义命令定义 #

修改命令逻辑，直接接收Cypress自动传递的JQuery元素，处理后返回CSS属性对象：

export {}

declare global {
    namespace Cypress {
        interface Chainable {
            getAllCssPropertiesAndValues: () => Chainable<Record<string, string>>
        }
    }
}

const getAllCssPropertiesAndValues = ($el: JQuery<Element>) => {
    const element = $el[0]
    const style = window.getComputedStyle(element)
    const propertiesAndValues: Record<string, string> = {}

    for (let i = 0; i < style.length; i++) {
        const propertyName = style[i]
        const value = style.getPropertyValue(propertyName)
        propertiesAndValues[propertyName] = value
    }

    return propertiesAndValues
}

Cypress.Commands.add('getAllCssPropertiesAndValues', getAllCssPropertiesAndValues)

2. 修正命令调用方式 #

使用Cypress标准链式调用，通过.then()获取异步结果：

// 注意选择器补全#，匹配之前的#my-element
cy.get('#my-element').getAllCssPropertiesAndValues().then(cssProperties => {
    console.log(cssProperties)
})

额外说明 #

• Cypress所有命令都是异步执行，不能同步获取返回值，必须通过.then()或async/await配合cy.wrap处理结果。
• 如果需要在某个.then()块内调用该命令，可写成cy.wrap($el).getAllCssPropertiesAndValues().then(...)，但链式调用是更推荐的标准写法。

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