Serenity/JS Jasmine WebdriverIO Template

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

Use this template to accelerate your test automation setup and generate Serenity/JS HTML reports with trend history, flaky test detection, and an interactive dashboard.

View live reports generated by this template:

• Serenity/JS HTML Report

Features

• Pre-configured Serenity/JS + Jasmine + WebdriverIO + TypeScript setup
• Example test scenarios demonstrating web application testing
• Screenplay Pattern implementation showcasing reusable tasks and interactions
• Integrated reporting with Serenity/JS HTML Reporter — self-contained reports with trends, flaky test detection, and an interactive dashboard
• 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:

Run locally

1. Prerequisites

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

• Node.js (LTS version recommended)

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:

npm ci

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

The HTML report is generated automatically during the test run at ./reports/serenity-js/index.html.

To serve the report locally and open it in your browser:

npm run test:report

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 test                # executes the example test suite
                        # and generates the report under ./reports/serenity-js
npm run test:report     # serves the test report at http://localhost:8080
                        # and opens it in the browser

Test execution modes

# Run all tests
npm test

# Run specific test file
npm test -- --spec test/specs/serenity-js_website.spec.ts

# Run in headed mode (disable headless)
# Update wdio.conf.ts to set headless: false in browser capabilities

Project Structure

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

test/
├── serenity/
│   ├── github-api/                        # Example GitHub API-related tasks
│   └── todo-list-app/                     # Example todo list app-related tasks
└── specs/
    └── serenity-js_website.spec.ts        # Jasmine test specifications

wdio.conf.ts                               # WebdriverIO configuration
reports/serenity-js/                        # Generated Serenity/JS HTML reports

Key files:

• test/specs/*.spec.ts - Jasmine test specifications
• test/serenity/ - Tasks, questions, and page objects following the Screenplay Pattern

Next steps

• Update baseUrl in wdio.conf.ts to point to your application
• Add your test specs to test/specs/ following the examples
• Learn how to write Serenity/JS test scenarios in the First Web Scenario tutorial
• Review the CI configuration and adapt it for your CI provider

Troubleshooting

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 @serenity-js/html-reporter serve --dir ./reports/serenity-js --port 3000 --open

Documentation

• Using Serenity/JS with Jasmine
• Using Serenity/JS with WebdriverIO
• Serenity/JS HTML Reporter
• API Reference
• Screenplay Pattern Guide
• Serenity/JS Project Templates
• More examples and reference implementations
• Tutorial: First Web Scenario

Contributing

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

Community

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

Stay informed

• 📰 Get the latest updates on LinkedIn - Product announcements, tutorials, and best practices
• 📺 Watch tutorials on YouTube - Video guides and conference talks

Get help and share knowledge

• 💬 Join the Community Chat - Real-time help and discussions
• 💡 Browse the Discussions Forum - Q&A and feature discussions
  • Check out How to...? for answers to common questions

Share the love!

Love Serenity/JS? Help others discover the framework:

⭐ Star the Serenity/JS repository on GitHub

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:

Sponsor benefits:

• 🎓 Access to Serenity/JS Playbooks - Advanced patterns and best practices
• 🏆 Priority support in the Community Discussions Forum
• 💚 Support open-source development and help keep Serenity/JS free for everyone

🏢 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