Testing / Playwright Interview questions
How do you implement the Page Object Model in Playwright?
The Page Object Model (POM) wraps a page's locators and interactions inside a class, so tests read like a sequence of intentions rather than raw selector calls scattered throughout.
// login-page.ts export class LoginPage { constructor(private page: Page) {} async goto() { await this.page.goto('/login'); } async login(email: string, password: string) { await this.page.getByLabel('Email').fill(email); await this.page.getByLabel('Password').fill(password); await this.page.getByRole('button', { name: 'Log in' }).click(); } } // test file test('logs in successfully', async ({ page }) => { const loginPage = new LoginPage(page); await loginPage.goto(); await loginPage.login('a@b.com', 'secret'); await expect(page.getByText('Welcome')).toBeVisible(); });
Locators are typically defined as class fields built from the page passed into the constructor, so if the login form's markup changes, only the LoginPage class needs updating rather than every test file that logs in. Playwright doesn't require any special support for this pattern - it's a plain class wrapping the existing API, which keeps it easy to combine with custom fixtures for auto-instantiating page objects per test.
A Page Object class primarily wraps:
The main maintenance benefit of POM is:
More Related questions...
