@@ -51,7 +51,7 @@ yarn add --dev playwright-testing-library
51
51
52
52
``` js
53
53
const {webkit } = require (' playwright' ) // or 'firefox' or 'chromium'
54
- const {getDocument , queries , waitFor } = require (' playwright-testing-library' )
54
+ const {getDocument , queries } = require (' playwright-testing-library' )
55
55
56
56
const {getByTestId , getByLabelText } = queries
57
57
@@ -60,14 +60,17 @@ const page = await browser.newPage()
60
60
61
61
// Grab ElementHandle for document
62
62
const $document = await getDocument (page)
63
+
63
64
// Your favorite query methods are available
64
65
const $form = await getByTestId ($document, ' my-form' )
65
- // returned elements are ElementHandles too!
66
+
67
+ // Returned elements are ElementHandles too!
66
68
const $email = await getByLabelText ($form, ' Email' )
67
- // interact with playwright like usual
69
+
70
+ // Interact with playwright like usual
68
71
await $email .
type (
' [email protected] ' )
69
- // waiting works too!
70
- await waitFor (() => getByText ($document, ' Loading ...' ))
72
+
73
+ // ...
71
74
```
72
75
73
76
### 2b. Use _ extensions_
@@ -79,14 +82,20 @@ require('playwright-testing-library/extend')
79
82
const browser = await webkit .launch ()
80
83
const page = await browser .newPage ()
81
84
82
- deCall (' editor.action.formatDocument' )
83
- // getDocument is added to prototype of Page
84
- // getDocument is added to prototype of Page
85
+ // Grab document with `getDocument`, which is added to the prototype of `Paqe`
85
86
const $document = await page .getDocument ()
86
- // query methods are added directly to prototype of ElementHandle
87
+
88
+ // Query methods are added directly to prototype of `ElementHandle`
87
89
const $form = await $document .getByTestId (' my-form' )
88
- // destructing works if you explicitly call getQueriesForElement
89
- const {getByText } = $form .getQueriesForElement ()
90
+
91
+ // Scope queries with `getQueriesForElement`
92
+ const {getByLabelText } = $form .getQueriesForElement ()
93
+
94
+ const $email = await getByLabelText (' Email' )
95
+
96
+ // Interact with Playwright like usual
97
+ await $email .
type (
' [email protected] ' )
98
+
90
99
// ...
91
100
```
92
101
0 commit comments