Create Playwright Page Objects

create-playwright-page-objects

Read @.ai/Component/Playwright/CONTEXT.md for the POM pattern and ui-testing-library architecture.

Page objects live in the ui-testing-library, not in the core repo.

1. Listing page object

Create bo{Domain}Page (extends the appropriate BO base page):

• Selectors: grid table, filter inputs, bulk action checkboxes, row action buttons, toggle switches, pagination
• Methods: all return values, never assert
• getNumberOfElementInGrid(page): Promise
• filterTable(page, filterBy, value): Promise
• resetAndGetNumberOfLines(page): Promise
• getTextColumn(page, row, column): Promise
• goToAddNewPage(page): Promise
• goToEditPage(page, row): Promise
• deleteRow(page, row): Promise — returns alert text
• bulkAction(page, action): Promise — returns alert text
• getToggleColumnValue(page, row): Promise
• setToggleColumnValue(page, row, value): Promise

Selector naming: {name}{Type} camelCase — e.g. gridTable, filterNameInput, bulkActionDropdownButton, confirmDeleteButton

2. Create/Edit page object

Create bo{Domain}CreatePage (extends BO base page):

• Selectors: form inputs, dropdowns, file uploads, save button, tab navigation (if tabs)
• Methods:
• createEdit{Domain}(page, data): Promise — fills all fields, clicks save, returns alert text
• getPageTitle(page): Promise
• getValue(page, inputName): Promise — for verification after reload
• Properties:
• pageTitleCreate: string — expected page title for create mode
• pageTitleEdit: string — expected page title for edit mode
• successfulCreationMessage: string
• successfulUpdateMessage: string

3. Conventions

See [Playwright/CONTEXT.md](../../CONTEXT.md) for POM conventions (never assert, selector naming, inheritance, library location). Skill-specific reminders:

• One page object per distinct BO page (listing page, create/edit page)
• Prefer data-test attribute selectors when available over CSS classes
• Check if page objects already exist before creating new ones

Reference: check existing page objects in the ui-testing-library for the exact inheritance pattern and method signatures.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jeffsenso
• Source: jeffsenso/prestashop-skills
• License: MIT

Install and usage instructions live in the source repository linked above.