メインコンテンツへ移動

Puppeteer テスト ライブラリ

pptr-testing-library は、軽量のアダプターであり、DOM テスト ライブラリ を puppeteer と組み合わせて使用できます。

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

使用​

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...'))

少し puppeteer っぽくないですか？ DOM テスト ライブラリ のすべてのメソッドを、代わりに puppeteer の ElementHandle に直接添付できます!

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')
// destructuring works if you explicitly call getQueriesForElement
const {getByLabelText} = $form.getQueriesForElement()
// ...
const $email = await getByLabelText('Email')

API​

DOM テスト ライブラリ の一部でない独自の方法

  • getDocument(page: puppeteer.Page): ElementHandle - ドキュメントの ElementHandle を取得する

転送されたメソッド​

DOM テスト ライブラリ は、各クエリで puppeteer が制御しているページに挿入されるため、すべての結果は非同期になります。 fireEvent ではなく、操作用 puppeteer の組み込みメソッドの使用が依然として推奨されます。

既知の制限​

  • waitForElement メソッドは公開されていません。 Puppeteer には、DOM テスト ライブラリ で使用されるスタイルと多少矛盾する独自の待機ユーティリティのセットがあります。 GitHub の問題 を参照してください。
  • fireEvent メソッドは公開されていません。代わりに puppeteer の組み込みメソッドを使用します。
  • expect のアサーション拡張は利用できません。