Skip to content

Latest commit

 

History

History
225 lines (177 loc) · 9.31 KB

File metadata and controls

225 lines (177 loc) · 9.31 KB

Testing Library Recorder Extension

octopus

Testing Library Extension for Chrome DevTools Recorder


Build Status 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

Table of Contents

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

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

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