Introduce a unified, advanced selectors system in tests/step-definitions/webship-selectors.js that consolidates named CSS selectors, named XPath selectors, layout
components, viewport breakpoints, and relative-position assertions into a single step-definition module backed by Playwright's native Locator API and its ready-made
semantic helpers.
This issue tracks the design, behaviour, configuration surface, feature coverage, and migration path of the Selectors module shipped in the 2.0.x line.
Motivation
Before this change, Webship-JS relied on bespoke selector handling scattered across multiple step definition files, with separate concepts for "layout components",
"css locators", and "xpath locators". That split forced testers to remember which registry a name belonged to, and it prevented them from leaning on Playwright's
built-in semantic locators (getByLabel, getByPlaceholder, getByRole) and web-first auto-retrying assertions (locator.waitFor, page.waitForFunction).
The new module:
- Unifies CSS + XPath into one resolver with a predictable priority (css → xpath) and consistent override semantics (latest registration wins for the same name).
- Replaces manual isVisible() / isHidden() / el === document.activeElement checks with Playwright's auto-retrying wait states.
- Uses Playwright's accessibility-first locators (getByLabel, getByPlaceholder, getByRole('textbox', { name })) chained via .or() to resolve form fields the
same way a user or assistive technology would. - Standardises viewport breakpoints on an xs/sm/md/lg/xl/xxl/xxxl scale, aligning with Bootstrap 5.3 conventions while extending to Full HD.