Testing Library

Testing Library

  • Docs
  • Recipes
  • Help
  • Blog

›Frameworks

Getting Started

  • Introduction
  • Guiding Principles

Frameworks

    DOM Testing Library

    • Introduction
    • Install
    • Example
    • Setup
    • Queries
    • Firing Events
    • Async Utilities
    • Helpers
    • Configuration
    • FAQ
    • Cheatsheet

    React Testing Library

    • Introduction
    • Example
    • Setup
    • API
    • FAQ
    • Cheatsheet

    ReasonReact Testing Library

    • Introduction
    • Examples

    Native Testing Library

    • Intro
    • Example
    • Setup
    • API

    Vue Testing Library

    • Intro
    • Examples
    • Setup
    • API
  • Cypress Testing Library
  • Svelte Testing Library
  • Angular Testing Library
  • Puppeteer Testing Library
  • Testcafe Testing Library

Ecosystem

  • user-event
  • jest-dom
  • bs-jest-dom
  • jest-native
  • react-select-event
Edit

Puppeteer Testing Library

pptr-testing-library is a lightweight adapter allowing DOM Testing Library to be used with puppeteer.

npm install --save-dev puppeteer pptr-testing-library
  • pptr-testing-library on GitHub

Usage

const puppeteer = require('puppeteer')
const { getDocument, queries, wait } = require('pptr-testing-library')

const { getByTestId, getByLabelText } = queries

const browser = await puppeteer.launch()
const page = await browser.newPage()

// Grab ElementHandle for document
const $document = await getDocument(page)
// Your favorite query methods are available
const $form = await getByTestId($document, 'my-form')
// returned elements are Puppeteer ElementHandles too!
const $email = await getByLabelText($form, 'Email')
// interact with puppeteer like usual
await $email.type('pptr@example.com')
// waiting works too!
await wait(() => getByText('Loading...'))

A little too un-puppeteer for you? You can attach all the DOM Testing Library methods directly onto puppeteer's ElementHandle instead!

const puppeteer = require('puppeteer')
require('pptr-testing-library/extend')

const browser = await puppeteer.launch()
const page = await browser.newPage()

// getDocument is added to prototype of Page
const $document = await page.getDocument()
// query methods are added directly to prototype of ElementHandle
const $form = await $document.getByTestId('my-form')
// destructing works if you explicitly call getQueriesForElement
const { getByLabelText } = $form.getQueriesForElement()
// ...
const $email = await getByLabelText('Email')

API

Unique methods, not part of DOM Testing Library.

  • getDocument(page: puppeteer.Page): ElementHandle - get an ElementHandle for the document

Forwarded methods

DOM Testing Library is injected into the page that puppeteer is controlling on each query, so all results will be async. It's still recommended that you use puppeteer's built-in methods for interaction rather than fireEvent.

Known Limitations

  • waitForElement method is not exposed. Puppeteer has its own set of wait utilities that somewhat conflict with the style used in DOM Testing Library. See the issue on GitHub.
  • fireEvent method is not exposed, use puppeteer's built-ins instead.
  • expect assertion extensions are not available.
Last updated on 6/1/2019
← Angular Testing LibraryTestcafe Testing Library →
  • Usage
    • API
    • Forwarded methods
  • Known Limitations
Testing Library
Docs
Getting StartedExamplesAPIHelp
Community
BlogStack OverflowReactiflux on DiscordSpectrum
More
StarGitHubEdit Docs on GitHub
Copyright © 2018-2019 Kent C. Dodds and contributors