如何将Cypress自定义命令参数改为对象形式以提升可读性？

将Cypress自定义命令doStuff从多独立可选参数改为对象参数时，你的修改存在两处语法错误，导致IDE报错，以下是正确的修改方案：

原代码 #

declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace Cypress {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        interface Chainable<Subject> {
            doStuff: (
                paramA?: string,
                paramB?: string,
                paramC?: boolean
            ) => Chainable<Element>;
            doMoreStuff: () => Chainable<Element>;
        }
    }
}

export const doStuffCommand: NxCypressCommandDefinition = {
    name: 'doStuff',
    command: (
        paramA: string = var1,
        paramB: string = var2,
        paramC = true
    ) => {
        if (paramC) {
            performTask();
        }
        cy.interceptGraphql();
        cy.get('selector').type(paramA);
        cy.get('selector').type(paramB);
        cy.get('selector').click();
    }
};

错误修改代码的问题点 #

declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace Cypress {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        interface Chainable<Subject> {
            doStuff: ({
                paramA?: string,
                paramB?: string,
                paramC?: boolean
            }) => Chainable<Element>; // 问题1：对象参数未明确标注为完整对象类型
            doMoreStuff: () => Chainable<Element>;
        }
    }
}

export const doStuffCommand: NxCypressCommandDefinition = {
    name: 'doStuff',
    command: ({
        paramA: string = var1, // 问题2：解构赋值的类型语法错误，不能直接在属性后写类型
        paramB: string = var2,
        paramC = true
    }) => {
        if (paramC) {
            performTask();
        }
        cy.get('selector').type(paramA);
        cy.get('selector').type(paramB);
        cy.get('selector').click();
    }
};

正确修改方案 #

步骤1：完善类型声明 #

先为对象参数定义独立接口，在Chainable接口中明确doStuff的参数类型：

declare global {
    // eslint-disable-next-line @typescript-eslint/no-namespace
    namespace Cypress {
        // 定义对象参数的接口
        interface DoStuffOptions {
            paramA?: string;
            paramB?: string;
            paramC?: boolean;
        }

        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        interface Chainable<Subject> {
            // 指定参数为DoStuffOptions类型且可选
            doStuff: (options?: DoStuffOptions) => Chainable<Element>;
            doMoreStuff: () => Chainable<Element>;
        }
    }
}

步骤2：修复命令实现的解构语法 #

在命令实现中，正确使用对象解构+默认值，同时标注参数类型并添加空对象默认值：

export const doStuffCommand: NxCypressCommandDefinition = {
    name: 'doStuff',
    // 标注参数类型，解构时设置默认值，同时给整个参数设空对象默认值
    command: ({
        paramA = var1,
        paramB = var2,
        paramC = true
    }: Cypress.DoStuffOptions = {}) => {
        if (paramC) {
            performTask();
        }
        cy.interceptGraphql();
        cy.get('selector').type(paramA);
        cy.get('selector').type(paramB);
        cy.get('selector').click();
    }
};

关键说明 #

• 定义DoStuffOptions接口让类型更清晰，也方便后续扩展参数
• 给参数设置默认空对象= {}，确保调用cy.doStuff()时不会因为解构undefined而报错
• 解构赋值的类型标注要放在解构对象的后面，不能直接写在属性名后

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