Create a folder and open with vs code

Open terminal and hit the command:
npm i puppeteer cucumber chai cucumber-html-reporter

Then go to package.json and update the following code:

"scripts": {
    "test": "cucumber-js -f json:cucumber-report.json"
  },

• cucumber-js : run the cucumber
• -f json: Create the cucumber output in JSON format
• :cucumber-report.json : is the file name where the stores the output

Then create a folder named features

Create a file under the folder named search.feature

Write following contents to the search.feature file

Feature: Search product in Daraz

	# to check first cucumber works or not
	Scenario: Verify result for daraz product search
		Given User visits daraz website
		When User search by product name
		Then Count the results
	        And User clears first search from input
		Then Count the result again

Now create a folder named support under the features folder

Then hit the following command:

npm test

You will get the step definitions in the response

Now create a file named search.test.js under the support folder

Write following code in search.test.js

const { When, Then, Given, Before, AfterAll } = require("cucumber")
const puppeteer = require("puppeteer")
var { setDefaultTimeout } = require('cucumber');
const { expect } = require("chai");

setDefaultTimeout(60 * 1000);
let browser, page;
Before(async function () {
    browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        slowMo: 10,
        devtools: false,
        args:
            [
                '--start-maximized',
                '--window-size=1920,1080'
            ]
    });
    page = await browser.newPage();
})
Given("User visits daraz website", async function () {
    await page.goto("https://www.daraz.com.bd")
})

When('User search by product name', async function () {
    let inputSelector = '[type=search]'
    await page.waitForSelector(inputSelector);
    let input = await page.$(inputSelector);
    await input.type('Mobile');
    await page.keyboard.press('Enter');
    await page.waitForNavigation();

});

Then('Count the results', async function () {
    let resultXPath = "//span[contains(text(),'items found for')]";
    await page.waitForXPath(resultXPath);
    let [resultElement] = await page.$x(resultXPath);
    let result = await page.evaluate(e => e.textContent, resultElement);
    console.log(result);
    expect(result).includes('items found for')

});

When('User clears first search from input', async function () {
    let inputSelector = '[type=search]'
    await page.waitForSelector(inputSelector);
    let input = await page.$(inputSelector);
    await input.click({ clickCount: 3 });
    await input.type('Watch');
    await page.keyboard.press('Enter');
    await page.waitForNavigation();

});
Then('Count the result again', async function () {
    let resultXPath = "//span[contains(text(),'items found for')]";
    await page.waitForXPath(resultXPath);
    let [resultElement] = await page.$x(resultXPath);
    let result = await page.evaluate(e => e.textContent, resultElement);
    console.log(result);
    expect(result).includes('items found for')

});
AfterAll(async () => {
    await browser.close();
});

Now run the script

npm test

You will see that 1 scenario and 5 steps passed

Report Generate

Create a file in root folder named report.js

Write following code:

const reporter = require("cucumber-html-reporter")
const options ={
     theme:'bootstrap',
     jsonFile:'cucumber-report.json',
     output:'Report/cucumber-html-result.html',
     reportSuiteAsScenaros:true,
     launchReport:false,
}
reporter.generate(options)

Go to package.json and update following line:

"scripts": {
    "report":"node report.js"
  },

Now hit the following command

npm run report

A report will be generate under the Report folder

Right click on report folder and reveal in file explorer

Open the cucumber-html-result.html

You will see following report