PW UI POM
Maintain the UI automation layer in a way that matches this repo's current conventions.
Use This Skill When
- Adding a new UI scenario under
ui/specs. - Repairing or updating an existing UI flow.
- Cleaning up recorded or generated UI tests so they match the framework conventions.
- Creating or changing page-object methods, selectors, waits, or navigation returns.
- Adjusting UI auth/setup behavior in
ui/setuporutils/fixtures/TestFixtures.ts.
Follow These Rules
- Keep selectors in page objects under
ui/pages. - Keep assertions in specs under
ui/specs. - Do not add assertions to page objects.
- Prefer
data-testidlocators and explicit user-visible locators. - Use aliases such as
@pages/*,@utils/*, and@config/*. - Keep shared page behavior in
ui/pages/BasePage.ts.
Inspect First
- Identify the impacted spec, page object, and fixture or setup file before editing.
- Reuse an existing page object and method before adding a new one.
- If the task changes auth or role setup, inspect
ui/setup/auth.setup.tsandutils/fixtures/TestFixtures.ts. - If the task changes navigation or route ownership, inspect
ui/pages/BasePage.tsfirst.
Decide What To Edit
- Edit a page object when selectors, interactions, readiness, or truthful navigation returns change.
- Edit a spec when the scenario, test data, or user-visible expectations change.
- Edit a fixture or setup file only when session creation, role bootstrap, or auth state behavior changes.
- Keep the change in the narrowest layer that actually owns the behavior.
New UI Test Flow
- Inspect a similar spec and the target page object.
- Reuse existing fixture/page-object coverage before adding methods.
- Add selectors only to the relevant page object.
- Keep the spec readable and assertion-focused.
- Register cleanup through the shared
cleanupfixture as soon as the test has the created resource id. - Validate with the smallest relevant command set.
Cleanup Generated Or Recorded UI Tests
- Treat recorded code as raw input, not framework-ready output.
- Move selectors and interactions into existing page objects first.
- Keep assertions in the spec.
- Reuse existing fixtures, routes, and navigation methods before adding new ones.
- Create new page-object methods only when the scenario truly needs new reusable behavior.
Update Existing UI Flow
- Identify whether the breakage belongs to selector ownership, navigation flow, waits, setup, or test expectation.
- Update the page object if the UI contract changed.
- Update the spec if only the scenario expectation changed.
- Avoid broad rewrites when a focused selector or method change is sufficient.
- Recheck any affected return type so page-object navigation stays truthful.
Page Object Return Types
Use these conventions consistently:
- Return
thisfor guaranteed same-page navigation methods. - Return another page object only when navigation is guaranteed.
- Return
Promise<void>for ambiguous outcomes.
Current repo examples:
LoginPage.goto()returnsthisHomePage.goto()returnsthisLoginPage.login(...)returnsHomePageLoginPage.loginExpectingFailure(...)returnsvoidHomePage.openFolders()returnsFoldersPageFoldersPageintentionally has nogoto()
Navigation And Waiting
- Reuse route constants from
BasePage.routes. - Keep page-specific readiness in each page's
waitForPageLoad(). - Do not reintroduce a generic page-ready helper if the page already owns its load condition.
- Keep page logging lightweight: navigation start, wait start, wait complete.
When To Load References
Load these only when the task needs more repo-specific detail:
references/testing-conventions.mdfor selector ownership, waits, assertion placement, and fixture use.references/page-object-decisions.mdfor page-object boundaries and return-type choices.
Finish Checklist
- Selectors remain in page objects.
- Assertions remain in specs.
- Raw
page.getBy...usage was not added to specs. - Existing page objects and fixtures were reused where reasonable.
- Persistent test data is registered with the shared
cleanupfixture. - New methods follow the current return conventions.
- Validation matches the scope of the change.