An element selector identifies a web element so an automated scenario can interact with or verify it. In Serenity/JS, page elements use selectors such as By.css or By.xpath and can carry a reporting description. section 15.1.7
Use an element selector to make interface verification explicit:
- Locate the relevant element in the generated HTML structure. section 15.1.7
- Represent it as a named page element, such as a toaster message. section 15.1.7
- Reuse the definition across interactions and assertions without tying it to one integration tool. section 15.1.7
Locating a temporary error message
A toaster widget can be represented with PageElement.located(By.css(`.ngx-toastr > .toast-message`)).describedAs('toaster message'). The test can then wait for it, verify its text, dismiss it, and wait for it to disappear. section 15.1.7
import { By, PageElement } from '@serenity-js/web'
const ToasterMessage = () =>
PageElement.located(By.css(`.ngx-toastr > .toast-message`))
.describedAs('toaster message')
Inspect a concrete Serenity/JS page-element definition using a CSS selector and a custom description. section 15.1.7
