Pre-requisite:
npm run init
. This will run npm install throughout the monorepo and generate .env file (if you don't have one). Technically, you can skip this and run the docker command immediately, but you'll have to run this when you start coding/debugging test scripts anyway.I. How to Run:
Run docker-compose up --build
After build is done, go to: http://localhost:5173/
(this will also appear in console)
Enter the testcase ID in the textbox without or click the test id from the test list in the right panel
Click Run button
View Report button will appear after the run is over
II. To run without using UI (FOR DEBUGGING):
Go to backend folder cd backend
Run npm install
Run TAG="@test-1" npm run test
We will not run it as npx playwright test
because we installed cucumber-js
. In the package.json, you will find "scripts" where there's one child called "test" which contains the cucumber command, we can call "test" using "npm run" and the command can also catch a TAG.
III. Running Headful
Headful will not work when running using UI, we don't need to run headful in production anyway. This is a best practice to reduce cost and time.
But during development and debugging, you can go to backend/tests/utils/hooks.js
, then change this.browser = await chromium.launch({ headless: true });
to { headless: false }
This is while running using CLI (see II.).
IV. Writing Tests
This will be in perspective of writing a fresh feature file. Cucumber with Page Object Model (POM) mainly works with 3 files: feature
, step definitions
, and step files
. There should be a working test included in this project so you can reference it while you try to link feature, step definition, and page files.
To write tests, begin by creating a Feature file
in the test/features
folder. The file should be responsible for the page/feature being tested. For example, if you're making a test case for login, you should put it in a Login.feature
file (if the team decides to name by feature) or LoginPage.feature
(if the team decides to name by page). Tests are written in Gherkin format. You can check the existing .feature
files for the format. Learn more: https://cucumber.io/docs/gherkin/.
Create a Step Definition
in the test/step_definitions
folder. This file will catch the steps written in .feature
files using regex. The filename should be "page/feature + Step.js"
, so for login, it should be LoginPage.js
. Since we are using POM, this file should be a collection of functions needed to operate the test step, so keep the technical stuff as minimal as possible in this page. The functions will be placed in the Page files.
Create a Page
file. The filename should be "page/feature + Page.js"
. This should have the functions from Step Definition
. The actual codes to interact with elements and assertions should be written here.
To access Page file functions from Step Definitions, go to /tests/utils/hooks
. Let's assume that we are making a NewPageSteps
. At the top, require the NewPage
class from the page file.
const NewPage = require('../pages/NewPage');
In the same file, add it to the world class and assign null
.
class CustomWorld {
constructor() {
this.browser = null;
this.context = null;
this.page = null;
this.loginPage = null;
this.utils = null;
this.newPage = null; // <-- Something like this
}
}
In the same file, add it to the hooks.
Before(async function () {
this.browser = await chromium.launch({ headless: true });
this.context = await this.browser.newContext();
this.page = await this.context.newPage();
this.loginPage = new LoginPage(this.page);
this.utils = new Utils(this.page);
this.newPage = new NewPage(this.page); // <-- Something like this
});
Now you can use the page class functions to any step definitions
const { Given, When, Then } = require('@cucumber/cucumber');
Given('I log something', async function () {
await this.newPage.someFunctionFromNewPage(); // <-- Something like this
});