I've encountered an issue while trying to implement a custom action. When running tests with the new custom action, I keep receiving an error stating that my custom action is not recognized as a function.
TypeError: testcafe_1.t.customActions.selectFromDropdown is not a function
Let's start from the beginning. I created a definitions.d.ts file to define the custom action:
//definitions.d.ts
import 'testcafe';
declare global {
interface CustomActions {
selectFromDropdown: (dropdownSelector: Selector) => TestControllerPromise
}
}
Next, I added the function implementation in the .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);
}
}
};
This custom action can be used like this:
await t.customActions.selectFromDropdown(Selector('#dropdownSelector'));
In my test file, I have a simple test scenario where I open a page and invoke the 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'));
})
To run the test, I use the command:
npx testcafe chrome .\tests\01_basic.ts --test "00 - Custom action click"
If you have any insights on what might be causing this issue, please let me know. I'm still relatively new to TestCafe and TypeScript.