Testcafe Testing Library
testcafe-testing-library
allows the use of dom-testing queries within
Testcafe cross-browser end-to-end web
testing.
npm install --save-dev testcafe @testing-library/testcafe
Usage
testcafe-testing-library
provides custom Selectors allowing you to query the
dom.
Add testcafe-testing-library
to your test fixture's beforeEach
hook:
import {
getByText, //or any other queries you want
addTestcafeTestingLibrary,
} from '@testing-library/testcafe'
fixture`selectors`.beforeEach(addTestcafeTestingLibrary)
.page`http://localhost:13370`
You can now import & use getBy
, getAllBy
, queryBy
and queryAllBy
selectors in your tests.
See DOM Testing Library
API for reference
Examples
To show some simple examples (from https://github.com/benmonro/testcafe-testing-library/blob/master/tests/testcafe/selectors.js):
test('getByPlaceHolderText', async t => {
await t.typeText(
getByPlaceholderText('Placeholder Text'),
'Hello Placeholder'
)
})
test('getByText', async t => {
await t.click(getByText('getByText'))
})
test('getByLabelText', async t => {
await t.typeText(
getByLabelText('Label For Input Labelled By Id'),
'Hello Input Labelled By Id'
)
})
Containers
By default the selectors come pre-bound to document.body
, so no need to
provide a container. However, if you want to restrict your query using a
container, you can use within
. Keep in mind that within
works using a
Testcafe ClientFunction
so you will need to await it, and you can't make
assertions on it like you can using a Selector
.
within
Examples using import { within, addTestcafeTestingLibrary } from '@testing-library/testcafe'
fixture`within`.beforeEach(addTestcafeTestingLibrary)
.page`http://localhost:13370`
test('getByText within container', async t => {
const { getByText } = await within('#nested')
await t.click(getByText('Button Text')).ok()
})
test("queryByPlaceholder doesn't find anything", async t => {
const { queryByPlaceholderText } = await within('#nested')
await t.expect(queryByPlaceholderText('Placeholder Text').exists).notOk()
})
Known Issues
Whenever a non-client side browser navigation event occurs, you will need to
make another call to addTestcafeTestingLibrary
. Testcafe uses a Proxy to
inject & execute tests/selectors. AFAIK, there's no way to tap into an
on("navigate")
event. I have filed an issue with Testcafe to address this so
feel free to give it a +1. https://github.com/DevExpress/testcafe/issues/3758