Using page object models in Playwright tests
A page object model is simply a plain JavaScript class that groups up the mechanical actions of navigating a page (locating a field, clicking a button, or filling in a text field) into methods that describe high-level operations that occur within your application (completing a birthday form).
In this section, you’ll build a page object model named BirthdayListPage that will allow you to rewrite your existing Playwright tests more simply.
Let’s get started by adding the new class:
- Create a new file named
tests/BirthdayListPage.jsand give it the following content. It creates the basic class along with a single method,goto, which is used to navigate to the/birthdaysapplication URL:export class BirthdayListPage { constructor(page) { this.page = page; } async goto() { await this.page.goto('/birthdays'); } ...