docs: remove dupe js code frames
This commit is contained in:
parent
c1f1c039d9
commit
00336e98ed
|
@ -16,43 +16,7 @@ Page objects **simplify authoring** by creating a higher-level API which suits y
|
|||
|
||||
We will create a `PlaywrightDevPage` helper class to encapsulate common operations on the `playwright.dev` page. Internally, it will use the `page` object.
|
||||
|
||||
```js tab=js-js title="playwright-dev-page.js"
|
||||
const { expect } = require('@playwright/test');
|
||||
|
||||
exports.PlaywrightDevPage = class PlaywrightDevPage {
|
||||
|
||||
/**
|
||||
* @param {import('@playwright/test').Page} page
|
||||
*/
|
||||
constructor(page) {
|
||||
this.page = page;
|
||||
this.getStartedLink = page.locator('a', { hasText: 'Get started' });
|
||||
this.gettingStartedHeader = page.locator('h1', { hasText: 'Installation' });
|
||||
this.pomLink = page.locator('li', {
|
||||
hasText: 'Guides',
|
||||
}).locator('a', {
|
||||
hasText: 'Page Object Model',
|
||||
});
|
||||
this.tocList = page.locator('article div.markdown ul > li > a');
|
||||
}
|
||||
|
||||
async goto() {
|
||||
await this.page.goto('https://playwright.dev');
|
||||
}
|
||||
|
||||
async getStarted() {
|
||||
await this.getStartedLink.first().click();
|
||||
await expect(this.gettingStartedHeader).toBeVisible();
|
||||
}
|
||||
|
||||
async pageObjectModel() {
|
||||
await this.getStarted();
|
||||
await this.pomLink.click();
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
```js tab=js-ts title="playwright-dev-page.ts"
|
||||
```js tab=js-test title="playwright-dev-page.ts"
|
||||
import { expect, type Locator, type Page } from '@playwright/test';
|
||||
|
||||
export class PlaywrightDevPage {
|
||||
|
@ -121,35 +85,7 @@ module.exports = { PlaywrightDevPage };
|
|||
|
||||
Now we can use the `PlaywrightDevPage` class in our tests.
|
||||
|
||||
```js tab=js-js title="example.spec.js"
|
||||
const { test, expect } = require('@playwright/test');
|
||||
const { PlaywrightDevPage } = require('./playwright-dev-page');
|
||||
|
||||
test('getting started should contain table of contents', async ({ page }) => {
|
||||
const playwrightDev = new PlaywrightDevPage(page);
|
||||
await playwrightDev.goto();
|
||||
await playwrightDev.getStarted();
|
||||
await expect(playwrightDev.tocList).toHaveText([
|
||||
`How to install Playwright`,
|
||||
`What's Installed`,
|
||||
`How to run the example test`,
|
||||
`How to open the HTML test report`,
|
||||
`Write tests using web first assertions, page fixtures and locators`,
|
||||
`Run single test, multiple tests, headed mode`,
|
||||
`Generate tests with Codegen`,
|
||||
`See a trace of your tests`
|
||||
]);
|
||||
});
|
||||
|
||||
test('should show Page Object Model article', async ({ page }) => {
|
||||
const playwrightDev = new PlaywrightDevPage(page);
|
||||
await playwrightDev.goto();
|
||||
await playwrightDev.pageObjectModel();
|
||||
await expect(page.locator('article')).toContainText('Page Object Model is a common pattern');
|
||||
});
|
||||
```
|
||||
|
||||
```js tab=js-ts title="example.spec.ts"
|
||||
```js tab=js-test title="example.spec.ts"
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { PlaywrightDevPage } from './playwright-dev-page';
|
||||
|
||||
|
|
Loading…
Reference in New Issue