Behaviour Driven automation development or BDD  automation, Is a design pattern or approach to maintaining the code that is easy to understand without the technical or programming knowledge.

Well, In this tutorial, We will see how can we write the first BDD automation script in puppeteer using Cucumber. Cucumber used Gherkin language to write the test scenarios. Check more about BDD automation.

Automation Script with puppeteer and cucumber

Create a simple Java Script project and install the required Cucumber and puppeteer libraries. Create a Features file to define the test scenarios and a Step file to define the step definition.

Project Structure

login.feature

Create a test feature file to define the test scenarios. The below code uses Gherkin language to define the test step in simple English language.

Feature: Login
    As a user
    I can login to application

    Scenario: User can login to application
        Given I open login page
        When I fill login form
        And I click on submit button
        Then I expect to see application content

steps.js

step.js is a simple Java Script file that contains the definition of the steps that are defined in the features file.

const { Given, When, Then, Before, After } = require('cucumber')
var {setDefaultTimeout} = require('cucumber');

Before(async function () {
  return await this.launchBrowser()
  
})

After(async function () {
  return await this.closeBrowser()
})

Given('I open login page', {timeout: 30000}, async function () {
  return await this.visit()
})

When('I fill login form', {timeout: 10000}, async function () {
  return await this.fillLoginForm()
})

When('I click on submit button', {timeout: 10000}, async function () { 
  return this.submitLogin()
})

Then('I expect to see application content', {timeout: 10000}, async function () {
  return this.verifySucessfulLogin()
})

world.js is a JavaScript class that contains a method that will help to create the step definition and perform the respective operations.

const { setWorldConstructor } = require('cucumber')
const { expect } = require('chai')
const puppeteer = require('puppeteer')

class CustomWorld {
  async launchBrowser() {
    this.browser = await puppeteer.launch({ headless: false })
    this.page = await this.browser.newPage()
  }

  async closeBrowser() {
    await this.browser.close()
  }

  async visit() {
    await this.page.goto('http://zero.webappsecurity.com/login.html')
  }

  async fillLoginForm() {
    await this.page.waitForSelector('#login_form')
    await this.page.type('#user_login', 'username')
    await this.page.type('#user_password', 'password')
  }

  async submitLogin() {
    await this.page.click('.btn-primary')
  }

  async verifySucessfulLogin() {
    await this.page.waitForSelector('#account_summary_tab')
  }
}

setWorldConstructor(CustomWorld)

report.js

const reporter = require('cucumber-html-reporter')

const options = {
  theme: 'bootstrap',
  jsonFile: 'cucumber_report.json',
  output: 'cucumber_report.html',
  reportSuiteAsScenarios: true,
  launchReport: false,
}

reporter.generate(options)

package.json

{
  "name": "pptr-cucumber",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "cucumber-js -f json:cucumber_report.json",
    "generate:report": "node report.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "chai": "^4.2.0",
    "cucumber": "^6.0.5",
    "cucumber-html-reporter": "^5.2.0",
    "prettier": "^2.1.1",
    "puppeteer": "^5.2.1"
  }
}