playwright + @testing-library/dom = 💖

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

⚠️ Note: this is a fork of pptr-testing-library modified to accomodate for some subtle API differences.

• Install
• Use
• API
• Known Limitations
• Special Thanks
• Related Playwright Test Utilities
• LICENSE

npm install --save-dev playwright-testing-library

const {webkit} = require('playwright') // or 'firefox' or 'chromium' const {getDocument, queries, waitFor} = require('playwright-testing-library') const {getByTestId, getByLabelText} = queries const browser = await webkit.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 playwright like usual await $email.type('playwright@example.com') // waiting works too! await waitFor(() => getByText($document, 'Loading...'))

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

const {webkit} = require('playwright') // or 'firefox' or 'chromium' require('playwright-testing-library/extend') const browser = await webkit.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() // ...

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

• getDocument(page: playwright.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
  • queryByDisplayValue,
  • queryAllByDisplayValue,
  • getByDisplayValue,
  • getAllByDisplayValue,
  • findByDisplayValue,
  • findAllByDisplayValue,

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

• pptr-testing-library
• @testing-library/dom of course!

• jest-playwright
• expect-playwright
• Yours! Name TBD, PR welcome ;)

MIT