跳到主要內容

頁面物件模型

簡介​

大型測試套件可以被組織化，以優化撰寫和維護的便利性。頁面物件模型是組織測試套件的一種方法。

頁面物件代表您的 Web 應用程式的一部分。電子商務 Web 應用程式可能有一個首頁、一個商品列表頁面和一個結帳頁面。它們中的每一個都可以用頁面物件模型來表示。

頁面物件透過建立更高等級的 API 來簡化撰寫，使其更適合您的應用程式，並透過在一個地方捕獲元素選擇器並建立可重複使用的程式碼以避免重複，從而簡化維護。

實作​

我們將建立一個 PlaywrightDevPage 輔助類別，以封裝 playwright.dev 頁面上的常見操作。在內部，它將使用 page 物件。

playwright-dev-page.ts
import { expect, type Locator, type Page } from '@playwright/test';

export class PlaywrightDevPage {
  readonly page: Page;
  readonly getStartedLink: Locator;
  readonly gettingStartedHeader: Locator;
  readonly pomLink: Locator;
  readonly tocList: Locator;

  constructor(page: 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.org.tw');
  }

  async getStarted() {
    await this.getStartedLink.first().click();
    await expect(this.gettingStartedHeader).toBeVisible();
  }

  async pageObjectModel() {
    await this.getStarted();
    await this.pomLink.click();
  }
}

現在我們可以在我們的測試中使用 PlaywrightDevPage 類別。

example.spec.ts
import { test, expect } from '@playwright/test';
import { PlaywrightDevPage } from './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');
});