Use Testing Library API

Testing Library is a family of libraries that drives tests from the user’s perspective and provides a consistent test API across testing and UI frameworks. Testing Library makes it easy for you to migrate your tests between frameworks, or test websites that use different JavaScript libraries for the UI.

Install

npm install --save-dev @testing-library/testcafe

Refer to the Testing Library site for more detailed instructions.

Import Testing Library

Use TestCafe client script import to add the Testing Library UMD module to the tested pages.

For instance, you can do this with the clientScripts configuration file property:

"clientScripts": [
    {
        "module": "@testing-library/dom/dist/@testing-library/dom.umd.js"
    }
]

Use Testing Library API in Tests

Refer to the Testing Library documentation for the detailed API description.

The following example demonstrates TestCafe actions whose target elements are queried with the Testing Library API:

import { screen } from '@testing-library/testcafe';

test('getByPlaceHolderText', async t => {
    await t.typeText(
        screen.getByPlaceholderText('Placeholder Text'),
        'Hello Placeholder'
    );
});

test('getByText', async t => {
    await t.click(screen.getByText('getByText'))
});

test('getByLabelText', async t => {
    await t.typeText(
        screen.getByLabelText('Label For Input Labelled By Id'),
        'Hello Input Labelled By Id'
    );
});

test('queryAllByText', async t => {
    await t.expect(screen.queryAllByText('Button Text').exists).ok()
    await t.expect(screen.queryAllByText('Non-existing Button Text').exists).notOk()
});