A registration form may have no test-friendly identifiers, leaving an acceptance test to find an input by the text of its label. A long selector tied to the form’s markup can be hard to reuse. Serenity/JS’s Page Element Query Language describes the desired element instead: find a form field with the right label, then find its input. section 15.2.6 section 15.3
Start with a PageElements collection located by a basic By selector. Filter it with where using an expectation, then select an element with first. PageElement describes a single element; of locates it within another element. Text.of supplies text for a query or assertion, and describedAs gives the result a readable name. section 15.2.6 section 15.2.2
Find the input labelled “Email”
Define fields as PageElements.located(By.css('mat-form-field')). Keep only fields where a mat-label is present and Text.of that label equals 'Email'; take the first match. Locate the input with PageElement.located(By.css('input')).of(matchingField), and describe it as the “Email” field. A task can then use Enter.theValue(emailAddress).into(Form.inputFor('Email')). The same approach can retrieve a field’s error text or select a button by its displayed text. section 15.2.6
Put these queries behind descriptive form or widget methods so tasks name the interaction rather than repeat locator details. The queries remain portable across supported web integration tools, including Selenium WebDriver, WebdriverIO, and Playwright. If adding test-friendly identifiers is practical, that remains an option; label-based queries help when it is not. section 15.2.6 section 15.3
