@@ -16,43 +16,7 @@ Page objects **simplify authoring** by creating a higher-level API which suits y
16
16
17
17
We will create a ` PlaywrightDevPage ` helper class to encapsulate common operations on the ` playwright.dev ` page. Internally, it will use the ` page ` object.
18
18
19
- ``` js tab=js-js title="playwright-dev-page.js"
20
- const { expect } = require (' @playwright/test' );
21
-
22
- exports .PlaywrightDevPage = class PlaywrightDevPage {
23
-
24
- /**
25
- * @param {import('@playwright/test').Page} page
26
- */
27
- constructor (page ) {
28
- this .page = page;
29
- this .getStartedLink = page .locator (' a' , { hasText: ' Get started' });
30
- this .gettingStartedHeader = page .locator (' h1' , { hasText: ' Installation' });
31
- this .pomLink = page .locator (' li' , {
32
- hasText: ' Guides' ,
33
- }).locator (' a' , {
34
- hasText: ' Page Object Model' ,
35
- });
36
- this .tocList = page .locator (' article div.markdown ul > li > a' );
37
- }
38
-
39
- async goto () {
40
- await this .page .goto (' https://playwright.dev' );
41
- }
42
-
43
- async getStarted () {
44
- await this .getStartedLink .first ().click ();
45
- await expect (this .gettingStartedHeader ).toBeVisible ();
46
- }
47
-
48
- async pageObjectModel () {
49
- await this .getStarted ();
50
- await this .pomLink .click ();
51
- }
52
- };
53
- ```
54
-
55
- ``` js tab=js-ts title="playwright-dev-page.ts"
19
+ ``` js tab=js-test title="playwright-dev-page.ts"
56
20
import { expect , type Locator , type Page } from ' @playwright/test' ;
57
21
58
22
export class PlaywrightDevPage {
@@ -121,35 +85,7 @@ module.exports = { PlaywrightDevPage };
121
85
122
86
Now we can use the ` PlaywrightDevPage ` class in our tests.
123
87
124
- ``` js tab=js-js title="example.spec.js"
125
- const { test , expect } = require (' @playwright/test' );
126
- const { PlaywrightDevPage } = require (' ./playwright-dev-page' );
127
-
128
- test (' getting started should contain table of contents' , async ({ page }) => {
129
- const playwrightDev = new PlaywrightDevPage (page);
130
- await playwrightDev .goto ();
131
- await playwrightDev .getStarted ();
132
- await expect (playwrightDev .tocList ).toHaveText ([
133
- ` How to install Playwright` ,
134
- ` What's Installed` ,
135
- ` How to run the example test` ,
136
- ` How to open the HTML test report` ,
137
- ` Write tests using web first assertions, page fixtures and locators` ,
138
- ` Run single test, multiple tests, headed mode` ,
139
- ` Generate tests with Codegen` ,
140
- ` See a trace of your tests`
141
- ]);
142
- });
143
-
144
- test (' should show Page Object Model article' , async ({ page }) => {
145
- const playwrightDev = new PlaywrightDevPage (page);
146
- await playwrightDev .goto ();
147
- await playwrightDev .pageObjectModel ();
148
- await expect (page .locator (' article' )).toContainText (' Page Object Model is a common pattern' );
149
- });
150
- ```
151
-
152
- ``` js tab=js-ts title="example.spec.ts"
88
+ ``` js tab=js-test title="example.spec.ts"
153
89
import { test , expect } from ' @playwright/test' ;
154
90
import { PlaywrightDevPage } from ' ./playwright-dev-page' ;
155
91
0 commit comments