How to implement custom action in testcafe using typescript?

I'm trying to implement custom action but with no luck. I'm getting an error telling me that my custom action is not a function when running test using new custom action.

TypeError: testcafe_1.t.customActions.selectFromDropdown is not a function

But from the beginning. I've created definitions.d.ts file containing definition for custom action:

//definitions.d.ts
import 'testcafe';
declare global {
    interface CustomActions {
        selectFromDropdown: (dropdownSelector: Selector) => TestControllerPromise
    }
}

After that, I've added function body to .testcaferc.ts file:

//.testcaferc.ts
let os = require("os");
import { Selector, ClientFunction, Role, t } from 'testcafe';

module.exports = {
    browsers: ["chrome"],
    src: ["tests/**/*.js", "tests/**/*.feature", "definitions.d.ts", "tests"],
    hostname: "localhost",
    customActions: {
        async selectFromDropdown(dropdownSelector: Selector) {
            await this.click(dropdownSelector);
        }
    }
};

I'm using custom action like this:

await t.customActions.selectFromDropdown(Selector('#dropdownSelector'));

Test looks like this (I've simplified it, but error remains the same). I'm opening a page using beforeEach and then I want to use custom action:

//01_basic.ts

import { Selector, ClientFunction, t } from 'testcafe';
import { startPage } from '../../../pages/start-page';


const startSettings = startPage.getStartSettings();

fixture('11-01 - Customercard SMS, functionality')
    .beforeEach(async () => {
        await startPage.selectPage(startPage.customerCardPageButton);   
    });

test('00 - Custom action click', async (t) => {
   t.customActions.selectFromDropdown(Selector('#dropdownSelector'));
})

I'm running a test using npx:

npx testcafe chrome .\tests\01_basic.ts --test "00 - Custom action click"

Any idea what I'm doing wrong? I bet there will be much. I do not have much experience with testcafe and ts.

Solution

You have a TestCafe configuration file with the *.ts extension. TestCafe support only *.js, *.cjs, and *json extensions for a configuration file. See: Configuration File.

If you still want to use this extension for the configuration file, pre-compile it before running tests. Also, keep in mind that TestCafe reads the configuration file only with the .testcaferc name and only from the repository root. In other cases, you need to manually set a path to the configuration file by specifying the --config-file option.