Document how to write TypeScript custom actions

[DanKaplanSES]

What is your Scenario?

This is a continuation of #7337: The existing documentation details how to define TypeScript types for your custom actions, but I would like to write my implementation in TypeScript, too.

The custom action I want to write is pretty sophisticated, and being able to type check my code would reduce my troubleshooting effort.

What are you suggesting?

Can the documentation include an example of how to write a TypeScript definition of a custom action?

What alternatives have you considered?

No response

Additional context

No response

[Aleksey28]

Hi @DanKaplanSES,

There is an instruction on how to use TypeScript with Custom Actions and an example: https://testcafe.io/documentation/404150/guides/advanced-guides/custom-test-actions#use-custom-actions-with-typescript
Note that this is just an example; you can implement your definitions as you want.

[DanKaplanSES]

Thanks @Aleksey28 The existing documentation details how to define TypeScript types for your custom actions, but I would like to write my implementation in TypeScript, too.

This is the first example on that page:

module.exports = {
  customActions: {
   async makeCoffee (args) {
        await this.click(args);
    }, 
  }
};

I'm requesting documentation that shows how to write this as TypeScript code instead. It would probably end up looking something like this:

import { TestCafeConfigurationOptions } from 'testcafe'; // Unfortunately this doesn't compile because this type is not exported

const myTestcafeConfig: TestCafeConfigurationOptions = {
  customActions: { // NOTE: customActions doesn't exist on TestCafeConfigurationOptions, so it would need to be added
    async makeCoffee(args: string[]) {
      await this.click(args);
    },
  },
};

export default myTestcafeConfig;

[Aleksey28]

The TestCafe configuration file supports only js, cjs, and json extensions. If you want to use TypeScript in the TestCafe configuration file, you need to pre-compile it.

Also, note that the interface for custom action is defined in the global scope, not in testcafe. That is why you don't need to import it from testcafe. For example:

//definitions.d.ts
import 'testcafe';
declare global {
  interface CustomActions {
    makeCoffee: (selector: Selector | string) => TestControllerPromise
  }
}

//.testcaferc.js
module.exports = {
  src: ["definitions.d.ts", "test.js"],
  browsers: 'crhome',
  customActions: {
    async makeCoffee(args) {
      await this.click(args);
    },
  }
};

//test.ts
fixture`Test cookies`
  .page`./index.html`;

test('Test with a custom action', async (t: TestController) => {
  await t.click('#btn-prepare-machine')
    .customActions.makeCoffee('#btn-coffee')
    .click('#btn-clean-machine');
})