Page Object Models
Large test suites can be structured to optimize ease of authoring and maintenance. Page object models are one such approach to structure your test suite.
Introduction#
A page object represents a part of your web application. An e-commerce web application might have a home page, a listings page and a checkout page. Each of them can be represented by page object models.
Page objects simplify authoring. They create a higher-level API which suits your application.
Page objects simplify maintenance. They capture element selectors in one place and create reusable code to avoid repetition.
Implementation#
Page object models wrap over a Playwright Page.
// models/Search.jsclass SearchPage { /** * @param {import('playwright').Page} page */ constructor(page) { this.page = page; } async navigate() { await this.page.goto('https://bing.com'); } async search(text) { await this.page.fill('[aria-label="Enter your search term"]', text); await this.page.press('[aria-label="Enter your search term"]', 'Enter'); }}module.exports = { SearchPage };Page objects can then be used inside a test.
// search.spec.jsconst { SearchPage } = require('./models/Search');
// In the testconst page = await browser.newPage();const searchPage = new SearchPage(page);await searchPage.navigate();await searchPage.search('search query');