Testing Library

Testing Library

  • Docs
  • Recipes
  • Help
  • Blog

›Frameworks

Getting Started

  • Introduction
  • Guiding Principles
  • Using Fake Timers

Frameworks

    DOM Testing Library

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

    React Testing Library

    • Introduction
    • Example
    • Setup
    • API
    • Migrate from Enzyme
    • FAQ
    • Cheatsheet

    Reason Testing Library

    • Introduction
    • Examples

    React Native Testing Library

    • Introduction
    • Example
    • Setup

    Vue Testing Library

    • Introduction
    • Examples
    • Setup
    • API
    • Cheatsheet
    • FAQ

    Marko Testing Library

    • Introduction
    • Setup
    • API

    Angular Testing Library

    • Introduction
    • Examples
    • API

    Preact Testing Library

    • Introduction
    • Example
    • API
    • Learn

    Svelte Testing Library

    • Introduction
    • Setup
    • Example
    • API
  • Cypress Testing Library
  • Puppeteer Testing Library
  • Testcafe Testing Library
  • Nightwatch Testing Library

Ecosystem

  • user-event
  • jest-dom
  • bs-jest-dom
  • jest-native
  • react-select-event
  • eslint-plugin-testing-library
  • eslint-plugin-jest-dom
  • riot-testing-library
  • jasmine-dom
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, waitFor } = 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 waitFor(() => 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 8/7/2020
← Cypress Testing LibraryTestcafe Testing Library →
  • Usage
    • API
    • Forwarded methods
  • Known Limitations
Testing Library
Docs
Getting StartedExamplesAPIHelp
Community
BlogStack OverflowDiscord
More
StarGitHubEdit Docs on GitHubHosted by Netlify
Copyright © 2018-2020 Kent C. Dodds and contributors