Testing Library Recorder Extension

Testing Library Extension for Chrome DevTools Recorder

---

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.

Table of Contents

• Usage
  • Exporting entire workflows
  • Exporting individual steps
  • Installing dependencies
  • Running tests
  • Troubleshooting
• Supported Chrome Recorder Step Types
• Example
  • Recording
  • Test Output
• Inspiration
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
  • ❓ Questions
• License

Usage

Exporting entire workflows

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

Exporting individual steps

1. Start or open a recording using the DevTools Recorder panel
2. Click Copy as a Testing Library script in the dropdown or right-click menu
3. 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 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.

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')
  await waitFor(() => screen.getByText('More information...'))
})

Inspiration

• Puppeteer Replay examples
• Cypress Recorder Extension

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

💡 Feature Requests

Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.

See Feature Requests

❓ Questions

For questions related to using the library, please visit a support community instead of filing an issue on GitHub.

• Discord
• Stack Overflow

License

MIT