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 :
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
Great Stuff!!!
What if we wanna run single test?