Skip to content

Test your web apps with Serenity/JS, Playwright and Cucumber.js

License

Notifications You must be signed in to change notification settings

serenity-js/serenity-js-cucumber-playwright-template

Serenity/JS Cucumber Playwright Template

Build Status NPM Version

Follow Serenity/JS on LinkedIn Watch Serenity/JS on YouTube Join Serenity/JS Community Chat Support Serenity/JS on GitHub

This template repository helps you automate testing of web applications using Serenity/JS, Cucumber, and Playwright, and comes pre-configured with TypeScript, linting, reporting, and example test scenarios.

Use this template to accelerate your test automation setup and generate Serenity BDD living documentation.

View live reports generated by this template:

Features

  • Pre-configured Serenity/JS + Cucumber + Playwright + TypeScript setup
  • Example BDD scenarios demonstrating web application testing
  • Screenplay Pattern implementation showcasing reusable tasks and interactions
  • Integrated reporting with Serenity BDD living documentation
  • ESLint configuration for code quality and consistency
  • CI-ready scripts and development environment support
  • Ready-to-use GitHub Codespaces environment using the official Serenity/JS Docker image

Quick Start

Explore instantly in GitHub Codespaces

Launch this project in an online development environment:

Open in GitHub Codespaces

Run locally

1. Prerequisites

Follow the Serenity/JS installation guide to set up your development environment with the following prerequisites:

2. Create your project

Create a new GitHub repository from this template and clone it to your machine:

git clone <your-repo-url>
cd <your-project>

3. Install dependencies

Install the project dependencies and Playwright browsers:

npm ci
npx playwright install
Corporate networks

If your environment requires proxy configuration or an internal registry like Artifactory or Nexus, add an .npmrc file with the appropriate configuration in your home directory:

proxy=http://user:password@host.mycompany.com:8080/
https-proxy=http://user:password@host.mycompany.com:8080/
strict-ssl=false
registry=https://artifactory.mycompany.com/artifactory/

4. Run tests

Run the example tests:

npm test

5. View reports

View the Serenity BDD report generated under the following path:

  • Serenity BDD: ./target/site/serenity/index.html

Alternatively, serve the Serenity BDD report using the built-in HTTP server, accessible at http://localhost:8080:

npm run start

Execution

The project provides several NPM scripts defined in package.json:

npm run lint            # runs code linter
npm run lint:fix        # attempts to automatically fix linting issues
npm run clean           # removes reports from any previous test run
npm test                # executes the example test suite
                        # and generates the report under ./target/site/serenity
npm start               # starts a mini HTTP server and serves the test reports
                        # at http://localhost:8080

Test execution modes

# Run all tests
npm test

# Run specific feature file
npm test -- features/authentication/form-based_authentication.feature

# Run tests with specific tags
npm test -- --tags "@smoke"

# Run tests in headed mode (see the browser)
HEADLESS=false npm test

# Run tests with different configuration
npm test -- --profile <profile-name>

Project Structure

The template follows a clear structure to help you organize your tests:

features/
├── authentication/
│   ├── form-based_authentication.feature  # Cucumber feature files
│   └── readme.md                          # Feature narrative
├── step-definitions/                      # Cucumber step definitions
│   ├── parameter.steps.ts                 # Custom parameter types
│   └── the-internet.steps.ts              # Step definitions for test scenarios
└── support/
    └── serenity.config.ts                 # Serenity/JS configuration

test/                                      # Screenplay Pattern implementations
├── Actors.ts                              # Actor configuration with abilities
├── authentication/                        # Example authentication-related tasks
│   ├── Authenticate.ts
│   └── VerifyAuthentication.ts
└── examples/
    └── PickExample.ts                     # Example navigation tasks

cucumber.js                                # Cucumber profile configuration
target/site/serenity/                      # Generated Serenity BDD reports

Key files:

  • features/*.feature - Cucumber scenarios written in Gherkin (Given/When/Then)
  • features/step-definitions/ - Cucumber step definitions connecting Gherkin to implementation
  • test/ - Tasks and questions following the Screenplay Pattern

Next steps

  • Replace the example tests with your own
  • Add new tasks, interactions, and assertions using Serenity/JS
  • Extend the test suite or integrate it into CI/CD pipelines
  • Use the sample reports to understand expected testing and reporting workflows

Troubleshooting

Playwright browsers not installed

If you see errors about browsers not being installed, run:

npx playwright install

Port 8080 already in use

If the report server fails to start because port 8080 is in use, you can specify a different port:

npx http-server -p 3000 target/site/serenity -s -o

Java not found error

Serenity BDD reports require Java 17 or higher. Verify your installation:

java -version

If Java is not installed, download it from Oracle or use a package manager:

  • macOS: brew install openjdk@17
  • Linux: sudo apt-get install openjdk-17-jre
  • Windows: Download from Oracle or use Chocolatey: choco install openjdk17

Documentation

Contributing

Contributions of all kinds are welcome! Get started with the Contributing Guide.

Community

Follow Serenity/JS on LinkedIn Watch Serenity/JS on YouTube Join Serenity/JS Community Chat

Join a thriving community of developers using Serenity/JS to deliver high-quality software!

Stay informed

Get help and share knowledge

Share the love!

Love Serenity/JS? Help others discover the framework:

Star the Serenity/JS repository on GitHub

GitHub stars

Starring the repository helps increase visibility and shows your support for the project!

License

The Serenity/JS code base is licensed under the Apache-2.0 license, while its documentation and the Serenity/JS Handbook are licensed under the Creative Commons BY-NC-SA 4.0 International.

See the Serenity/JS License.

Support

💝 Sponsor Serenity/JS

Support the ongoing development of Serenity/JS and the open-source community:

GitHub Sponsors

Sponsor benefits:

🏢 Professional Services

Need dedicated support, training, or consulting for your team?

Contact Jan Molak for:

  • 🎯 Consulting & Training - Custom workshops and team training sessions
  • 🤝 Corporate Support - Dedicated technical support and SLA-backed assistance
  • 🏗️ Architecture Reviews - Expert guidance on test automation strategy and implementation
  • 📊 Corporate Sponsorship - Tailored partnership opportunities for organizations

About

Test your web apps with Serenity/JS, Playwright and Cucumber.js

Topics

Resources

License

Contributing

Security policy

Stars

Watchers

Forks

Sponsor this project

 

Contributors 3

  •  
  •  
  •