Skip to content

Commit f8813d2

Browse files
committed
docs(README): smoother docs
1 parent 40609da commit f8813d2

File tree

1 file changed

+25
-13
lines changed

1 file changed

+25
-13
lines changed

README.md

+25-13
Original file line numberDiff line numberDiff line change
@@ -17,39 +17,44 @@ All your favorite user-centric querying functions from react-testing-library/dom
1717

1818
```js
1919
const puppeteer = require('puppeteer')
20-
require('pptr-testing-library/extend')
20+
const {getDocument, queries, wait} = require('pptr-testing-library')
21+
22+
const {getByTestId, getByLabelText} = queries
2123

2224
const browser = await puppeteer.launch()
2325
const page = await browser.newPage()
2426

25-
// Grab ElementHandle for document, this convenience method added by pptr-testing-library/extend
26-
const $document = await page.getDocument()
27-
28-
// query methods are added to prototype of ElementHandle
29-
const $form = await $document.getByTestId('my-form')
27+
// Grab ElementHandle for document
28+
const $document = await getDocument(page)
29+
// Your favorite query methods are available
30+
const $form = await getByTestId($document, 'my-form')
3031
// returned elements are ElementHandles too!
31-
const $email = await $form.getByLabelText('Email')
32+
const $email = await getByLabelText($form, 'Email')
3233
// interact with puppeteer like usual
3334
await $email.type('[email protected]')
35+
// waiting works too!
36+
await wait(() => getByText('Loading...'))
3437
```
3538

36-
For those less enthused by prototype manipulation, we've got you covered too.
39+
A little too un-puppeteer for you? We've got prototype-mucking covered too :)
3740

3841
```js
3942
const puppeteer = require('puppeteer')
40-
const {getDocument, queries} = require('pptr-testing-library')
43+
require('pptr-testing-library/extend')
4144

4245
const browser = await puppeteer.launch()
4346
const page = await browser.newPage()
4447

45-
const $document = await getDocument(page)
46-
const $form = await queries.getByTestId($document, 'my-form')
48+
// getDocument is added to prototype of Page
49+
const $document = await page.getDocument()
50+
// query methods are added directly to prototype of ElementHandle
51+
const $form = await $document.getByTestId('my-form')
4752
// ...
4853
```
4954

5055
## API
5156

52-
Puppeteer-specific methods
57+
Unique methods, not part of `dom-testing-library`
5358

5459
- `getDocument(page: puppeteer.Page): ElementHandle` - get an ElementHandle for the document
5560

@@ -88,13 +93,20 @@ Puppeteer-specific methods
8893

8994
## Known Limitations
9095

91-
- `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 [issue](https://github.com/patrickhulce/pptr-testing-library/issues/3).
96+
- `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 [#3](https://github.com/patrickhulce/pptr-testing-library/issues/3).
9297
- `fireEvent` method is not exposed, use puppeteer's built-ins instead.
98+
- Query methods rely on the context and don't support destructuring. See [#4](https://github.com/patrickhulce/pptr-testing-library/issues/4).
99+
- `expect` assertion extensions are not available.
93100

94101
## Special Thanks
95102

96103
[dom-testing-library](https://github.com/kentcdodds/dom-testing-library) of course!
97104

105+
## Related Puppeteer Test Utilities
106+
107+
- [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer)
108+
- Yours! Name TBD, PR welcome ;)
109+
98110
## LICENSE
99111

100112
MIT

0 commit comments

Comments
 (0)