Serenity/JS is a JavaScript and TypeScript acceptance-testing framework for building a safety net around critical workflows, especially when adding tests to an existing system. It combines journey mapping, layered automation architecture, and Screenplay Pattern APIs to keep tests maintainable and portable. section 14.0
Its web automation model separates domain-level test intent from integration-tool details:
- Models browser tabs with Page, individual elements with PageElement, and collections with PageElements. section 15.2.2
- Locates elements with integration-agnostic selectors such as By.css, By.deepCss, By.xpath, and By.id. section 15.2.2
- Composes Screenplay interactions such as Navigate.to, Click.on, Scroll.to, and Enter.the(...).into(...) with questions such as Text.of and Value.of. section 15.2.5
- Supports Selenium WebDriver, WebdriverIO, Playwright, and other integration tools without exposing their differences in ordinary tests. section 15.2.5
Testing a registration notification
A toaster can be modeled with PageElement.located(By.css('.ngx-toastr')), while its message is defined as a nested PageElement located by '.toast-message'. Tests can then express intent directly: Click.on(ToasterMessage()) or Ensure.that(Text.of(ToasterMessage()), includes('registered successfully')). section 15.2.2 section 15.2.5
import { By, PageElement } from '@serenity-js/web'
const ToasterMessage = () =>
PageElement.located(By.css(`.ngx-toastr > .toast-message`)) #1
.describedAs('toaster message')
Inspect the concise PageElement definition for a toaster message and its CSS-based locator. section 15.2.2
The same consistency and portability support reuse across test suites and teams. Shared component teams can provide automation-friendly abstractions so consumer teams avoid rediscovering selectors and reduce synchronization work when widgets or APIs change. section 15.2.8
