Generate Playwright end-to-end tests using Page Object Model pattern
Generate Playwright end-to-end tests following the Page Object Model pattern.
/e2e-test <page-or-feature> [test-type]
Test Types:
page - Full page test with page object (default)flow - Multi-page user flow testcrud - Create/Read/Update/Delete operationsExamples:
/e2e-test SecurityTools/e2e-test CreateEndpoint crud/e2e-test CampaignExecution flowCreate e2e/pages/{page-name}.page.ts:
import { Page, Locator, expect } from "@playwright/test";
import { BasePage } from "./base.page";
export class {PageName}Page extends BasePage {
readonly pageTitle: Locator;
readonly addButton: Locator;
readonly dataTable: Locator;
constructor(page: Page, customerUUID?: string) {
super(page, customerUUID);
this.pageTitle = page.getByRole("heading", { name: "{Page Title}" });
this.addButton = page.getByRole("button", { name: /add|create/i });
this.dataTable = page.locator('[data-testid="data-table"]');
}
async goto(): Promise<void> {
await super.goto("/{page-path}");
await this.waitForPageReady();
}
}
Create e2e/specs/{section}/{feature}.spec.ts:
import { test, expect } from "../../fixtures";
import { {PageName}Page } from "../../pages/{page-name}.page";
test.describe("{PageName} Page", () => {
let page: {PageName}Page;
test.beforeEach(async ({ page: playwrightPage, customerUUID }) => {
page = new {PageName}Page(playwrightPage, customerUUID);
});
test("should load page with correct title", async () => {
await page.goto();
await expect(page.pageTitle).toBeVisible();
});
});
Priority order:
data-testid - Most stablegetByRole("button", { name: "Submit" })getByLabel("Email")getByText("Welcome")npx playwright test
npx playwright test --ui
npx playwright test -g "should load page"