Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

cherry-pick(1.20): update POM guide (#12598) (#12607)

Browse source
This commit is contained in:
Yury Semikhatsky 2022-03-08 16:41:56 -08:00 committed by GitHub
parent 7e53facf1e
commit 84f36df415
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
docs/src/test-pom-js.md
View file

@ -18,8 +18,9 @@ exports.PlaywrightDevPage = class PlaywrightDevPage {
*/ */
constructor(page) { constructor(page) {
this.page = page; this.page = page;
this.getStartedLink = page.locator('text=Get started'); this.getStartedLink = page.locator('a', { hasText: 'Get started' });
this.coreConceptsLink = page.locator('text=Core concepts'); this.gettingStartedHeader = page.locator('h1', { hasText: 'Getting started' });
this.pomLink = page.locator('li', { hasText: 'Playwright Test' }).locator('a', { hasText: 'Page Object Model' });
this.tocList = page.locator('article ul > li > a'); this.tocList = page.locator('article ul > li > a');
} }
@ -29,17 +30,14 @@ exports.PlaywrightDevPage = class PlaywrightDevPage {
async getStarted() { async getStarted() {
await this.getStartedLink.first().click(); await this.getStartedLink.first().click();
await expect(this.coreConceptsLink).toBeVisible(); await expect(this.gettingStartedHeader).toBeVisible();
} }
async coreConcepts() { async pageObjectModel() {
await this.getStarted(); await this.getStarted();
await this.page.click('text=Guides'); await this.pomLink.click();
await this.coreConceptsLink.click();
await expect(this.page.locator('h1').locator("text=Core concepts")).toBeVisible();
} }
} }```
```
```js js-flavor=ts ```js js-flavor=ts
// playwright-dev-page.ts // playwright-dev-page.ts
@ -48,13 +46,15 @@ import { expect, Locator, Page } from '@playwright/test';
export class PlaywrightDevPage { export class PlaywrightDevPage {
readonly page: Page; readonly page: Page;
readonly getStartedLink: Locator; readonly getStartedLink: Locator;
readonly coreConceptsLink: Locator; readonly gettingStartedHeader: Locator;
readonly pomLink: Locator;
readonly tocList: Locator; readonly tocList: Locator;
constructor(page: Page) { constructor(page: Page) {
this.page = page; this.page = page;
this.getStartedLink = page.locator('text=Get started'); this.getStartedLink = page.locator('a', { hasText: 'Get started' });
this.coreConceptsLink = page.locator('text=Core concepts'); this.gettingStartedHeader = page.locator('h1', { hasText: 'Getting started' });
this.pomLink = page.locator('li', { hasText: 'Playwright Test' }).locator('a', { hasText: 'Page Object Model' });
this.tocList = page.locator('article ul > li > a'); this.tocList = page.locator('article ul > li > a');
} }
@ -64,17 +64,14 @@ export class PlaywrightDevPage {
async getStarted() { async getStarted() {
await this.getStartedLink.first().click(); await this.getStartedLink.first().click();
await expect(this.coreConceptsLink).toBeVisible(); await expect(this.gettingStartedHeader).toBeVisible();
} }
async coreConcepts() { async pageObjectModel() {
await this.getStarted(); await this.getStarted();
await this.page.click('text=Guides'); await this.pomLink.click();
await this.coreConceptsLink.click();
await expect(this.page.locator('h1').locator("text=Core concepts")).toBeVisible();
} }
} }```
```
Now we can use the `PlaywrightDevPage` class in our tests. Now we can use the `PlaywrightDevPage` class in our tests.
@ -83,27 +80,28 @@ Now we can use the `PlaywrightDevPage` class in our tests.
const { test, expect } = require('@playwright/test'); const { test, expect } = require('@playwright/test');
const { PlaywrightDevPage } = require('./playwright-dev-page'); const { PlaywrightDevPage } = require('./playwright-dev-page');
test('Get Started table of contents', async ({ page }) => { test('getting started should contain table of contents', async ({ page }) => {
const playwrightDev = new PlaywrightDevPage(page); const playwrightDev = new PlaywrightDevPage(page);
await playwrightDev.goto(); await playwrightDev.goto();
await playwrightDev.getStarted(); await playwrightDev.getStarted();
await expect(playwrightDev.tocList).toHaveText([ await expect(playwrightDev.tocList).toHaveText([
'Installation', 'Installation',
'First test', 'First test',
'Configuration file',
'Writing assertions', 'Writing assertions',
'Using test fixtures', 'Using test fixtures',
'Using test hooks', 'Using test hooks',
'Learning the command line', 'Command line',
'Creating a configuration file', 'Configure NPM scripts',
'Release notes', 'Release notes'
]); ]);
}); });
test('Core Concepts table of contents', async ({ page }) => { test('should show Page Object Model article', async ({ page }) => {
const playwrightDev = new PlaywrightDevPage(page); const playwrightDev = new PlaywrightDevPage(page);
await playwrightDev.goto(); await playwrightDev.goto();
await playwrightDev.coreConcepts(); await playwrightDev.pageObjectModel();
await expect(playwrightDev.tocList.first()).toHaveText('Browser'); await expect(page.locator('article')).toContainText('Page Object Model is a common pattern');
}); });
``` ```
@ -112,26 +110,27 @@ test('Core Concepts table of contents', async ({ page }) => {
import { test, expect } from '@playwright/test'; import { test, expect } from '@playwright/test';
import { PlaywrightDevPage } from './playwright-dev-page'; import { PlaywrightDevPage } from './playwright-dev-page';
test('Get Started table of contents', async ({ page }) => { test('getting started should contain table of contents', async ({ page }) => {
const playwrightDev = new PlaywrightDevPage(page); const playwrightDev = new PlaywrightDevPage(page);
await playwrightDev.goto(); await playwrightDev.goto();
await playwrightDev.getStarted(); await playwrightDev.getStarted();
await expect(playwrightDev.tocList).toHaveText([ await expect(playwrightDev.tocList).toHaveText([
'Installation', 'Installation',
'First test', 'First test',
'Configuration file',
'Writing assertions', 'Writing assertions',
'Using test fixtures', 'Using test fixtures',
'Using test hooks', 'Using test hooks',
'Learning the command line', 'Command line',
'Creating a configuration file', 'Configure NPM scripts',
'Release notes', 'Release notes'
]); ]);
}); });
test('Core Concepts table of contents', async ({ page }) => { test('should show Page Object Model article', async ({ page }) => {
const playwrightDev = new PlaywrightDevPage(page); const playwrightDev = new PlaywrightDevPage(page);
await playwrightDev.goto(); await playwrightDev.goto();
await playwrightDev.coreConcepts(); await playwrightDev.pageObjectModel();
await expect(playwrightDev.tocList.first()).toHaveText('Browser'); await expect(page.locator('article')).toContainText('Page Object Model is a common pattern');
}); });
``` ```