JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 43957
  • Score
    100M100P100Q155609F
  • License MIT

puppeteer + dom-testing-library

Package Exports

  • pptr-testing-library

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pptr-testing-library) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

pptr-testing-library

NPM Package Build Status Coverage Status Dependencies Discord

puppeteer + @testing-library/dom = 💖

All your favorite user-centric querying functions from @testing-library/react & @testing-library/library available from Puppeteer!

Install

npm install --save-dev pptr-testing-library

Use

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 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($document, 'Loading...'))

A little too un-puppeteer for you? We've got prototype-mucking covered too :)

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 {getByText} = $form.getQueriesForElement()
// ...

API

Unique methods, not part of @testing-library/dom

  • getDocument(page: puppeteer.Page): ElementHandle - get an ElementHandle for the document
  • wait(conditionFn: () => {}): Promise<{}> - wait for the condition to not throw (wrapper around waitForExpect)

@testing-library/dom API. All get*/query* methods are supported.

  • getQueriesForElement(handle: ElementHandle): ElementHandle & QueryUtils - extend the input object with the query API and return it
  • getNodeText(handle: ElementHandle): Promise<string> - get the text content of the element
  • queries: QueryUtils - the query subset of @testing-library/dom exports
    • queryByPlaceholderText
    • queryAllByPlaceholderText
    • getByPlaceholderText
    • getAllByPlaceholderText
    • queryByText
    • queryAllByText
    • getByText
    • getAllByText
    • queryByLabelText
    • queryAllByLabelText
    • getByLabelText
    • getAllByLabelText
    • queryByAltText
    • queryAllByAltText
    • getByAltText
    • getAllByAltText
    • queryByTestId
    • queryAllByTestId
    • getByTestId
    • getAllByTestId
    • queryByTitle
    • queryAllByTitle
    • getByTitle
    • getAllByTitle

Known Limitations

  • waitForElement method is not exposed. Puppeteer has its own set of wait utilities that somewhat conflict with the style used in @testing-library/dom. See #3.
  • fireEvent method is not exposed, use puppeteer's built-ins instead.
  • expect assertion extensions are not available.

Special Thanks

@testing-library/dom of course!

LICENSE

MIT