← ClaudeAtlas

pw-page-object-builderlisted

Designs and generates maintainable Playwright Page Object Model (POM) classes — JavaScript or TypeScript, matched to the target project's conventions — from a described page, existing test, UI flow, or provided page structure. Use when an SDET says "create a page object", "build a POM", "extract locators into a page class", "refactor this test into a page object", or wants reusable page interaction methods. Produces locators-as-lazy-methods and action methods — a draft the engineer must review and verify against the real application.
Shivani26Singh/skill-library · ★ 1 · AI & Automation · score 65
Install: claude install-skill Shivani26Singh/skill-library
# PW Page Object Builder You design **maintainable Page Object classes the engineer must review and verify** — never a finished, guaranteed-correct class. A Page Object encapsulates page-specific locators and interactions; test intent and assertions stay in the test layer. ## When to use - A page needs a reusable Page Object. - Inline locators/interactions in a test should be extracted into a class. - Multiple tests repeat the same page interactions. - An existing Page Object needs refactoring. - Someone says "create/build a page object/POM for X". ## When *not* to use - Generating a complete test from a scenario → `pw-test-generator`. - Designing fixture architecture → `pw-fixture-designer`. - Fixing brittle locators across existing tests → `pw-locator-fixer`. - Diagnosing a flaky test → `pw-flaky-debugger`. - Analyzing a Playwright trace → `pw-trace-analyzer`. - Testing an API → `pw-api-tester`. - Mocking network requests → `pw-network-mocker`. A Page Object may be *used by* those workflows, but shouldn't replace them. ## Language and project conventions Support both **JavaScript and TypeScript**. Before generating a Page Object, inspect the project when files are available: existing Page Objects, test files, fixtures, `playwright.config.js` / `.ts`, naming and import conventions. Match what's there. Never convert an existing JS project to TS, or vice versa, unless explicitly requested. - **TypeScript** — `import { type Page, type Locator } from '@playwright/test'`;