Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 97 Commits
.github		.github
other		other
src		src
.gitattributes		.gitattributes
.gitignore		.gitignore
.huskyrc.js		.huskyrc.js
.prettierignore		.prettierignore
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
manifest.json		manifest.json
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json
webpack.config.mjs		webpack.config.mjs

Repository files navigation

Testing Library Recorder Extension

Testing Library Extension for Chrome DevTools Recorder

Export tests from the DevTools Recorder panel to Testing Library test scriptsusing Jest.

Open a recording and click export to use the Testing Library script option.

Usage

Exporting entire workflows

Start or open a recording using the DevTools Recorder panel
ClickExport as a Testing Library script in the toolbar
Save file as{testName}.test.{ts,js}

Exporting individual steps

Start or open a recording using the DevTools Recorder panel
ClickCopy as a Testing Library script in the dropdown or right-click menu
Paste into an existing file

Installing dependencies

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

Running tests

jest

Troubleshooting

Supported Chrome Recorder Step Types

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 onenavigate step is allowed per test becausejest-environment-urlmust load pages sincejsdom does not support navigation. Without anynavigate steps, you'll need to edit your test to manually load the DOM.

Example

Recording

{"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..."]      ]    }  ]}

Test Output

/** *@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')awaitwaitFor(()=>screen.getByText('More information...'))})