如何仅使用TypeScript在TestCafe中自定义测试动作？

解决思路 #

TestCafe的t.customActions确实是只读属性，也没有t.addCustomActions方法，但可以通过扩展TestCafe类型定义+给测试控制器原型挂载方法的方式实现，完美适配TypeScript环境，还能直接复用项目里已有的选择器、枚举等资源。

步骤1：扩展TestCafe的类型声明 #

创建一个testcafe.d.ts文件（放在项目根目录或TypeScript能识别的目录下），用来让TypeScript识别你的自定义方法：

import { Selector } from 'testcafe';
// 导入你项目里已有的枚举、选择器类型
import { YourCustomEnum } from './path-to-your-enums';

declare module 'testcafe' {
    interface TestController {
        // 定义自定义方法的类型签名，按需调整参数和返回值
        customMethod(target: Selector, actionType: YourCustomEnum): Promise<void>;
    }
}

确保你的tsconfig.json里的include数组包含这个文件，比如：

{
  "include": ["src/**/*", "testcafe.d.ts"]
}

步骤2：挂载自定义方法到TestController原型 #

在测试文件或者单独的工具文件（比如test-utils.ts）里，实现自定义方法并挂载到原型上：

import { TestController } from 'testcafe';
import { YourCustomEnum } from './path-to-your-enums';

// 给TestController原型添加自定义方法
TestController.prototype.customMethod = async function(target, actionType) {
    // 这里可以直接用this调用TestController的原生方法（比如click、typeText）
    // 同时可以直接使用导入的枚举、选择器逻辑
    switch (actionType) {
        case YourCustomEnum.Click:
            await this.click(target);
            // 可以添加额外逻辑，比如等待元素可见
            await this.expect(target.visible).ok();
            break;
        case YourCustomEnum.Fill:
            await this.typeText(target, '预设内容');
            break;
        // 其他自定义逻辑
    }
};

步骤3：在测试中直接使用自定义方法 #

现在你可以在测试用例里像调用TestCafe原生方法一样使用自定义动作，还能获得完整的TypeScript类型提示：

import { Selector } from 'testcafe';
import { YourCustomEnum } from './path-to-your-enums';
// 记得导入挂载了自定义方法的工具文件（如果是单独文件的话）
import './test-utils';

fixture('自定义动作测试')
    .page('https://your-test-page.com');

test('使用自定义方法', async t => {
    const testElement = Selector('#test-input');
    // 直接调用自定义方法
    await t.customMethod(testElement, YourCustomEnum.Fill);
});

注意事项 #

• 这种方式不需要依赖TestCafe的JS配置文件，完全在TypeScript环境内实现；
• 自定义方法里的this指向TestController实例，所以可以直接调用所有原生测试动作；
• 如果需要全局复用，把挂载逻辑放在一个单独的工具文件里，在所有测试文件里导入即可。

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