• Stars
    star
    283
  • Rank 146,066 (Top 3 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

puppeteer + dom-testing-library = πŸ’–

pptr-testing-library

NPM Package GitHub Actions 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, 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 ElementHandles too!
const $email = await getByLabelText($form, 'Email')
// interact with puppeteer like usual
await $email.type('[email protected]')
// waiting works too!
await waitFor(() => 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
    • findByPlaceholderText
    • findAllByPlaceholderText
    • queryByText
    • queryAllByText
    • getByText
    • getAllByText
    • findByText
    • findAllByText
    • queryByLabelText
    • queryAllByLabelText
    • getByLabelText
    • getAllByLabelText
    • findByLabelText
    • findAllByLabelText
    • queryByAltText
    • queryAllByAltText
    • getByAltText
    • getAllByAltText
    • findByAltText
    • findAllByAltText
    • queryByTestId
    • queryAllByTestId
    • getByTestId
    • getAllByTestId
    • findByTestId
    • findAllByTestId
    • queryByTitle
    • queryAllByTitle
    • getByTitle
    • getAllByTitle
    • findByTitle
    • findAllByTitle
    • queryByRole
    • queryAllByRole
    • getByRole
    • getAllByRole
    • findByRole
    • findAllByRole
    • queryByDisplayValue,
    • queryAllByDisplayValue,
    • getByDisplayValue,
    • getAllByDisplayValue,
    • findByDisplayValue,
    • findAllByDisplayValue,

Known Limitations

  • Async utilities waitForElement, waitForElementToBeRemoved and waitForDomChange are not exposed. Consider using a find* query.
  • fireEvent method is not exposed, use puppeteer's built-ins instead.
  • expect assertion extensions are not available.

Special Thanks

@testing-library/dom of course!

Related Puppeteer Test Utilities

LICENSE

MIT

More Repositories

1

react-testing-library

🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
JavaScript
18,952
star
2

react-hooks-testing-library

🐏 Simple and complete React hooks testing utilities that encourage good testing practices.
TypeScript
5,083
star
3

jest-dom

πŸ¦‰ Custom jest matchers to test the state of the DOM
JavaScript
4,422
star
4

dom-testing-library

πŸ™ Simple and complete DOM testing utilities that encourage good testing practices.
JavaScript
3,271
star
5

user-event

πŸ• Simulate user events
TypeScript
2,181
star
6

cypress-testing-library

πŸ… Simple and complete custom Cypress commands and utilities that encourage good testing practices.
JavaScript
1,798
star
7

vue-testing-library

🦎 Simple and complete Vue.js testing utilities that encourage good testing practices.
JavaScript
1,071
star
8

eslint-plugin-testing-library

ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library
TypeScript
979
star
9

testing-playground

Simple and complete DOM testing playground that encourage good testing practices.
JavaScript
776
star
10

angular-testing-library

πŸ¦” Simple and complete Angular testing utilities that encourage good testing practices
TypeScript
626
star
11

svelte-testing-library

🐿️ Simple and complete Svelte DOM testing utilities that encourage good testing practices
JavaScript
615
star
12

native-testing-library

🐳 Simple and complete React Native testing utilities that encourage good testing practices.
JavaScript
515
star
13

testing-library-docs

docs site for @testing-library/*
JavaScript
449
star
14

jest-native

πŸ¦… Custom jest matchers to test the state of React Native
TypeScript
436
star
15

eslint-plugin-jest-dom

eslint rules for use with jest-dom
JavaScript
360
star
16

playwright-testing-library

πŸ” Find elements in Playwright with queries from Testing Library
TypeScript
248
star
17

testing-library-recorder-extension

Testing Library Extension for Chrome DevTools Recorder
TypeScript
144
star
18

preact-testing-library

Simple and complete Preact DOM testing utilities that encourage good testing practices.
JavaScript
139
star
19

which-query

🦩 Which query should I use?
CSS
124
star
20

testcafe-testing-library

πŸ‚ Simple and complete custom Selectors for Testcafe that encourage good testing practices.
TypeScript
71
star
21

preact-hooks-testing-library

Simple and complete Preact hooks testing utilities that encourage good testing practices.
TypeScript
56
star
22

jasmine-dom

πŸ¦₯ Custom Jasmine matchers to test the state of the DOM
JavaScript
45
star
23

nightwatch-testing-library

πŸ¦‡Simple and complete custom queries for Nightwatch that encourage good testing practices.
JavaScript
31
star
24

dom-testing-library-template

Template repository for bug reports to @testing-library/dom, @testing-library/react, and @testing-library/jest-dom
JavaScript
17
star
25

webdriverio-testing-library

πŸ•·οΈ Simple and complete WebdriverIO DOM testing utilities that encourage good testing practices.
TypeScript
16
star
26

native-testing-library-docs

🐳 Docs site for native-testing-library
JavaScript
16
star
27

react-testing-library-help

Fork this repo to reproduce your issue
HTML
12
star
28

web-testing-library

πŸ™ Experimental Web testing utilities that encourage good testing practices.
JavaScript
3
star