JavaScript automation testing has gained enormous popularity over the past few years. Many JavaScript developers create unit tests using tools like Protractor, BDD in CucumberJS and nightwatchjs and testers have also started writing automated regression suite using JavaScript to align with one automation testing approach which is followed by both QA (Acceptance tests) and Dev (Unit tests).
In this post, we are going to see an example for CucumberJS with WebDriverJs which is helpful for newbies. As a testing service provider, sharing knowledge, exploring new testing tools and approaches are key differentiators of Codoid. Let’s begin the article with required tools section.
1) Required Tools
2) Folder Structure
3) Installation
npm install -g grunt-cli
{ "name": "cucumberjs-demo", "version": "0.0.0", "private": true, "scripts": { "clean": "rm -rf tmp" }, "dependencies": { "chai": "^3.5.0", "chromedriver": "^2.27.3", "cucumber": "^2.0.0-rc.7", "geckodriver": "^1.4.0", "grunt": "^1.0.1", "grunt-cucumberjs": "^0.10.12", "selenium-webdriver": "^3.1.0" } }
E:Projectscucumberjs-demo>npm install
4) Create Feature
Create ‘Codoid.feature’ file inside ‘features’ folder
Feature: Codoid Example Feature As a user of Codoid.com I want to have Schedule a demo feature So that I can schedule a demo with Codoid's testing experts Scenario: Reading documentation Given I am on Codoid Home page When I click Schedule a demo link Then I should see "Schedule a demo"
5) Create step definitions
Create ‘my_steps.js’ inside ‘features/step definitions’ folder
var {defineSupportCode} = require('cucumber'); defineSupportCode(function(context) { context.setDefaultTimeout(200 * 1000) var setWorldConstructor = context.setWorldConstructor; var Given = context.Given var When = context.When var Then = context.Then require('chromedriver') var expect=require('chai').expect var driver = require('selenium-webdriver'); var browser = new driver.Builder() .forBrowser('chrome') .build(); var by = driver.By; Given(/^I am on Codoid Home page$/, function () { return browser.get('https://codoid.com'); }); When(/^I click ([^"]*) link$/, function (text) { browser.wait(driver.until.elementLocated(by.linkText('CONTACT US')), 10000).click(); return browser.findElement({linkText: text}).click(); }); Then(/^I should see "([^"]*)"$/, function (arg1) { var condition = driver.until.elementLocated({xpath: "//h2[contains(text(),'" + arg1 + "')]"}); browser.wait(condition, 5000); return browser.quit(); }); })
6) Create Gruntfile.js
module.exports = function (grunt) { grunt.initConfig({ cucumberjs: { options: { require: ["features/step_definitions"], format: 'html', output: 'reports/my_report.html', theme: 'bootstrap' }, features: [] } }) grunt.loadNpmTasks('grunt-cucumberjs'); grunt.registerTask('default', ['cucumberjs']); };
7) Execute
grunt default
Once the execution is completed, you can see ‘my_report.html’ inside reports folder as shown below.
Comments(0)