Export tests from the DevTools Recorder panel to Testing Library test scripts using Jest.
Open a recording and click export to use the Testing Library script option.
- Start or open a recording using the DevTools Recorder panel
- Click
Export as a Testing Library script
in the toolbar - Save file as
{testName}.test.{ts,js}
- Start or open a recording using the DevTools Recorder panel
- Click
Copy as a Testing Library script
in the dropdown or right-click menu - Paste into an existing file
npm install --save-dev jest jest-environment-jsdom jest-environment-url @testing-library/dom @testing-library/user-event @testing-library/jest-dom
yarn add --dev jest jest-environment-jsdom jest-environment-url @testing-library/dom @testing-library/user-event @testing-library/jest-dom
jest
Type | Output |
---|---|
change |
await userEvent.type(element, 'value') |
click |
await userEvent.click(element) |
click (right) |
await userEvent.click(element, {buttons: 2}) |
hover |
await userEvent.hover(element) |
doubleClick |
await userEvent.dblClick(element) |
keyDown |
await userEvent.keyboard('{Key>}') |
keyUp |
await userEvent.keyboard('{/Key}') |
navigate * |
expect(location.href).toBe('https://example.com/') expect(document.title).toBe('Example Domain') |
waitForElement |
await waitFor(() => element) |
waitForExpression |
await waitFor(() => expression) |
* Only one navigate
step is allowed per test because jest-environment-url
must load pages since jsdom
does not support navigation. Without any
navigate
steps, you'll need to edit your test to manually load the DOM.
{
"title": "Example",
"steps": [
{
"type": "navigate",
"url": "https://example.com/",
"assertedEvents": [
{
"type": "navigation",
"url": "https://example.com/",
"title": "Example Domain"
}
]
},
{
"type": "waitForElement",
"selectors": [
["aria/More information..."],
["body > div > p:nth-child(3) > a"],
["xpath//html/body/div/p[2]/a"],
["text/More information..."]
]
}
]
}
/**
* @jest-environment url
* @jest-environment-options { "url": "https://example.com/" }
*/
const {screen, waitFor} = require('@testing-library/dom')
const {default: userEvent} = require('@testing-library/user-event')
require('@testing-library/jest-dom')
test('Example', async () => {
expect(location.href).toBe('https://example.com/')
expect(document.title).toBe('Example Domain')
await waitFor(() => screen.getByText('More information...'))
})
Looking to contribute? Look for the Good First Issue label.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please file an issue to suggest new features. Vote on feature requests by adding a π. This helps maintainers prioritize what to work on.
For questions related to using the library, please visit a support community instead of filing an issue on GitHub.