Parameterized cucumber integration with Puppeteer

In this project, we will pass some data through our step definitions. We will visit an e-commerce site and try to log in with valid and invalid credentials. Our goal is to pass the credentials through our step definitions.

Procedure

Create a folder named parameterized-cucumber-integration

Open the folder with Visual Studio Code

give this command:

npm init -y.

Package.json will be generated

Open terminal and Install following packages by this command:

npm i puppeteer cucumber chai cucumber-html-reporter

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

"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 login.feature

Write following contents to the login.feature file

Feature: Login to an e-commerce website

	Scenario: Verify users can login to portal with valid credentials
		Given User visits e-commerce website-1
		When User enters "<username>" and "<password>"-1
		Then User can logged in successfully

        Examples:
            |username|password|
            |testuser412@grr.la|2t8zmqzL|

	Scenario: Verify users can not login to portal with invalid credentials
		Given User visits e-commerce website-2
		When User enters "<username>" and "<password>"-2
		Then User gets error message

        Examples:
            |username|password|
            |testuser100@grr.la|abcd1234|

As the step definitions in both scenarios are same, so I have differentiated with number -1 and -2

Now, hit the below command:

npm test

You will get the step definitions in the response

Now create a file named browser.js

copy paste following code:

const puppeteer = require('puppeteer');
async function startBrowser() {
    let browser;
    try {
        browser = await puppeteer.launch({
            headless: false,
            defaultViewport: null,
            devtools: false,
            args: [
                '--start-maximized',
                '--window-size=1920,1080'
            ]
        });
    } 
    catch (err) {
        console.log("Could not create a browser instance => : ", err);
    }
    return browser;
}

module.exports = {
    startBrowser
};

We will automate this site :

http://automationpractice.com

So we will identify selectors from this site

Create a folder named selectors. Then create a file named loginSelectors.js under the selectors folder

Write following code:

const loginSelectors = {
    "loginButtonSelector": ".login",
    "emailSelector": "#email",
    "passwordSelector": "#passwd",
    "submitButtonSelector": "#SubmitLogin",
    "errorXPath": "//p[contains(text(),'There is 1 error')]",
    "logoutButtonSelector":".logout"
}
module.exports = { loginSelectors }

Now create a folder named support under the features folder

Then create a file named login-TS01.test.js under the support folder

Write following code:

const { When, Then, Given, Before, AfterAll, After } = require("cucumber")
const browserObject = require("../../browser");
var { setDefaultTimeout } = require('cucumber');
const { loginSelectors } = require('../../selectors/loginSelectors');
const { expect } = require("chai");

setDefaultTimeout(60 * 1000);
let browser, page;
Before(async function () {
    browser = await browserObject.startBrowser();
    page = await browser.newPage();
})
Given("User visits e-commerce website-1", async function () {
    await page.goto("http://automationpractice.com")
})

When('User enters {string} and {string}-1', async function (username, password) {
    await page.waitForSelector(loginSelectors.loginButtonSelector);
    let loginButton = await page.$(loginSelectors.loginButtonSelector);
    await loginButton.click();
    await page.waitForNavigation();

    await page.type(loginSelectors.emailSelector, username);
    await page.type(loginSelectors.passwordSelector, password);

    await page.click(loginSelectors.submitButtonSelector);

});

Then('User can logged in successfully', async function () {
    await page.waitForSelector(loginSelectors.logoutButtonSelector);
    let logoutButton = await page.$(loginSelectors.logoutButtonSelector);

    expect(logoutButton != null).equals(true);
    await logoutButton.click();

});


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

And create another file named login-TS02.test.js under the support folder

Then write following code:

const { When, Then, Given, Before, AfterAll, After } = require("cucumber")
const browserObject = require("../../browser");
var { setDefaultTimeout } = require('cucumber');
const { loginSelectors } = require('../../selectors/loginSelectors');
const { expect } = require("chai");

setDefaultTimeout(60 * 1000);
let browser, page;
Before(async function () {
    browser = await browserObject.startBrowser();
    page = await browser.newPage();
})

Given("User visits e-commerce website-2", async function () {
    await page.goto("http://automationpractice.com")
})
When('User enters {string} and {string}-2', async function (username, password) {
    await page.waitForSelector(loginSelectors.loginButtonSelector);
    let loginButton = await page.$(loginSelectors.loginButtonSelector);
    await loginButton.click();
    await page.waitForNavigation();

    await page.type(loginSelectors.emailSelector, username);
    await page.type(loginSelectors.passwordSelector, password);

    await page.click(loginSelectors.submitButtonSelector);

});
Then('User gets error message', async function () {
    await page.waitForXPath(loginSelectors.errorXPath);
    let [errorElement] = await page.$x(loginSelectors.errorXPath);
    let errorText = await page.evaluate(e => e.textContent, errorElement);
    console.log(errorText);
    expect(errorText).includes('There is 1 error')

});

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

Now give following command:

npm test

Your automation will be started and after completing automation, you will see the result in console

Output:

2 scenarios (2 passed)
6 steps (6 passed)

Report Generate

Now we will generate a report

create a file named report.js in root folder

Copy paste 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)

Now go to package.json file and update following line:

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

Now give following command:

npm run report

A report will be generated under the Report folder

Open the html report

You will get the full project here:
https://github.com/salmansrabon/parameterized-bdd-puppeteer

about author

admin

salmansrabon@gmail.com

If you like my post or If you have any queries, do not hesitate to leave a comment.

One Comment on "Parameterized cucumber integration with Puppeteer"

Leave a Reply

Your email address will not be published. Required fields are marked *