In the world of modern web testing, Playwright has emerged as a robust framework that supports fast, reliable, and powerful end-to-end testing across all modern browsers. Meanwhile, Cucumber continues to dominate behavior-driven development (BDD) thanks to its ability to write human-readable feature files that bridge the communication gap between stakeholders and developers.
However, writing and executing tests is just the beginning. To ensure transparency, accountability, and quality assurance, it is essential to have a reliable and detailed reporting system. This is where Allure Report excels. Allure provides visually rich, interactive, and comprehensive test reports that are invaluable for analysis, debugging, and stakeholder communication.
This blog explores how to integrate Allure Report with Playwright and Cucumber using official tools and libraries, and explains each step in detail to help you implement it successfully in your projects.
Why Combine Playwright, Cucumber, and Allure?
- Playwright provides modern, robust automation for testing web apps across Chromium, Firefox, and WebKit.
- Cucumber enables BDD, allowing tests to be written in a natural language format using Gherkin syntax.
- Allure Report generates easy-to-understand and aesthetically pleasing test reports, enhancing the feedback loop.
Together, they empower teams to write readable tests, run them across multiple browsers, and analyze results visually.
What Are the Prerequisites for Setting Up Allure Report with Playwright and Cucumber?
Before starting, make sure you have the following installed:
- Node.js (v14 or later)
- npm or yarn
- Playwright (@playwright/test) for browser automation
- Cucumber.js (@cucumber/cucumber) for BDD
- Allure CLI for generating and viewing reports
To install Allure CLI using npm:
For Local:
npm install –save-dev allure-commandline
for Global:
npm install -g allure-commandline
Note: If you get a “command not found” error when running allure, ensure that your node_modules/.bin is in your PATH (for local installs) or that the global install directory is correctly set in your system’s environment variables.”
How to Set Up the Project Structure?
Start by initializing a new Node.js project and installing required dependencies:
mkdir playwright-cucumber-allure
cd playwright-cucumber-allure
npm init -y
npm install –save-dev @playwright/test @cucumber/cucumber ts-node typescript allure-commandline
Create the following folder structure to organize your tests:
How to Write a Feature File in Cucumber?
Gherkin feature files define test scenarios in a business-readable format.
features/example.feature
Feature: Example Feature
Scenario: Open homepage
Given I open the Playwright homepage
Then the title should contain “Playwright”
How to Write Step Definitions for Cucumber with Playwright?
These implement the steps described in the feature file using Playwright APIs.
How to Manage Browser Context in Playwright Tests?
The world.ts file initializes and cleans up the Playwright browser context before and after test runs.
tests/support/world.ts
import { chromium, Browser, Page } from ‘playwright’;
let browser: Browser;
export let page: Page;
beforeAll(async () => {
browser = await chromium.launch();
const context = await browser.newContext();
page = await context.newPage();
});
afterAll(async () => {
await browser.close();
});
This ensures a clean browser session for every test suite execution.
How to Configure Cucumber.js for BDD Execution?
Cucumber uses a configuration file (cucumber.js) to define runtime options.
Cucumber.js
module.exports = {
default:
–require-module ts-node/register \
–require features/step_definitions/**/*.ts \
–require tests/support/world.ts \
–format json:reports/cucumber-report.json \ features/**/*.feature
};
This setup compiles TypeScript files and generates a basic JSON report.
Read also: Playwright Commands Every Tester Must Know for Faster Automation
How to Integrate Allure with Cucumber and Playwright?
To visualize reports in Allure, you need the allure-cucumberjs adapter:
This opens a beautiful, interactive report in your browser.
Troubleshooting Tip: If you don’t see the Allure report after running your tests, check that the allure-results directory is being populated.
How to Automate Testing and Reporting Scripts?
You can automate testing and reporting with package scripts:
“scripts”: {
“test”: “cucumber-js”,
“report”: “allure generate ./allure-results –clean -o ./allure-report && allure open ./allure-report”
}
Now simply run:
npm run test
npm run report
What Are the Advanced Features of Allure?
Allure offers features like:
- Attachments: Add screenshots or logs to test steps.
- Custom Labels: Tag tests with owners, severity, etc.
- Test Categorization: Group tests into suites, components.
- History Tracking: Allure can keep history of previous runs when integrated with CI tools, enabling trend charts, flaky test detection, and comparison of run stats over time.
For more control, you can use a custom Allure formatter:
import { AllureRuntime, CucumberJSAllureFormatter } from ‘allure-cucumberjs’;
import { FormatterOptions } from ‘@cucumber/cucumber’;
class CustomAllureFormatter extends CucumberJSAllureFormatter {
constructor(options: FormatterOptions) {
super(
options,
new AllureRuntime({ resultsDir: ‘./allure-results’ }),
{}
);
}
}
export default CustomAllureFormatter;
Update cucumber.js to use it:
–format ./custom-allure-formatter.ts
Best Practices for Using Playwright with Cucumber and Allure?
To get the most value out of this stack, follow these best practices:
1. Structure Tests Clearly
Keep your features, steps, and support code in separate folders. Name files and functions descriptively to help new team members ramp up quickly.
2. Use Tags and Hooks
Use Cucumber tags (e.g., @smoke, @regression) to categorize and selectively run tests. Combine this with hooks (e.g., Before, After) to manage setup and teardown smartly.
3. Take Screenshots on Failure
Enhance your Allure reports by attaching screenshots for failed steps:
After(async function (scenario) {
if (scenario.result?.status === ‘failed’) {
const screenshot = await page.screenshot();
this.attach(screenshot, ‘image/png’);
}
});
4. Clean and Version-Control Your Reports Directory
Add the /allure-report and /allure-results folders to .gitignore and keep the report generation as a build step.
5. Integrate with CI/CD
Ensure test execution and Allure report generation is part of your CI/CD pipeline. This gives your team real-time visibility into the quality of the build.
6. Keep Dependencies Updated
Stay in sync with the latest versions of Playwright, Cucumber, and Allure plugins to benefit from performance improvements and new features.
Read also: Integrating Playwright with Jenkins: A Step-by-Step Guide
Conclusion
By integrating Playwright, Cucumber, and Allure, you create a modern test framework that is readable, maintainable, and insightful.
- Playwright ensures fast, cross-browser automation.
- Cucumber allows teams to collaborate through BDD.
- Allure transforms raw test results into actionable insights.
This combination is ideal for teams that value transparency, collaboration, and fast feedback in their development workflow.
With a well-structured project and adherence to best practices, you’ll not only improve test clarity and coverage but also elevate your reporting game to a new level.
If you’re looking to build a scalable Playwright-Cucumber-Allure setup, the QA experts at Testrig Technologies, a leading Playwright automation testing company, are here to help. From building robust frameworks to seamless CI/CD integration, we provide end-to-end support to accelerate your quality engineering journey.
