Testing Library Recorder Extension

octopus

Testing Library Extension for Chrome DevTools Recorder

Code Coverage version downloads MIT License PRs Welcome Code of Conduct Discord

Watch on GitHub Star on GitHub Tweet

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.

Screenshot

Usage

  1. Create a new recording via the Recorder panel.
  2. Hover over the export icon
  3. Click Export as a Testing Library script
  4. Save file as {testName}.test.{ts,js}
  5. Install 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
  6. Run tests with 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"]
      ]
    }
  ]
}

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

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.

License

MIT

GitHub

View Github