Cucumber3.0 support (#30)

* chore(upgrade):cucumber3.0 support

* updated readme

Author: igniteram

README.md

@@ -1,9 +1,23 @@
-![protractorcucumbertypescript](https://raw.githubusercontent.com/igniteram/protractor-cucumber-typescript/master/images/protractor-typescript-cucumber.png)
+<p align="center">
+<img src= "./images/protractor-typescript-cucumber.png" height=300 alt="titleImage.png"/>
+</p>
+
+<p align="center">
+   <i><strong>This project demonstrates the basic protractor-cucumber-typescript framework project setup.
+</strong></i>
+<p>
+
+<p align="center">
+<a href="https://circleci.com/gh/igniteram/protractor-cucumber-typescript/tree/master"><img alt="circleCI Status" src="https://circleci.com/gh/igniteram/protractor-cucumber-typescript/tree/master.svg?style=shield"></a>
+<a href="https://david-dm.org/igniteram/protractor-cucumber-typescript"><img alt="dependencies status" src="https://david-dm.org/igniteram/protractor-cucumber-typescript.svg"></a>
+<a href=""><img alt="typescript" src="https://badges.frapsoft.com/typescript/code/typescript.svg?v=101">
+<a href="https://opensource.org/licenses/MIT"><img alt="MIT License" src="https://img.shields.io/dub/l/vibe-d.svg"></a>
+</p>
+
+---
 
-[![CircleCI](https://circleci.com/gh/igniteram/protractor-cucumber-typescript/tree/master.svg?style=shield)](https://circleci.com/gh/igniteram/protractor-cucumber-typescript/tree/master) [![TypeScript](https://badges.frapsoft.com/typescript/code/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![SensioLabsInsight](https://insight.sensiolabs.com/projects/8b225581-89f5-42bd-bd82-bfefb0e39a1f/big.png)](https://insight.sensiolabs.com/projects/8b225581-89f5-42bd-bd82-bfefb0e39a1f)
 
 ### Protractor-Cucumber-TypeScript Setup Guide   
-This project demonstrates the basic protractor-cucumber-typescript framework project setup.
 
 ### Medium Article
 Please do checkout my medium article which would give you more insight on this setup. [protractor-cucumber-typescript(Medium)](https://medium.com/@igniteram/e2e-testing-with-protractor-cucumber-using-typescript-564575814e4a)
@@ -51,7 +65,7 @@ npm run webdriver-start
 
 * The below command would create an output folder named 'typeScript' and transpile the .ts files to .js.
 ```
-npm run tsc
+npm run build
 ```
 
 * Now just run the test command which launches the Chrome Browser and runs the scripts.
@@ -74,57 +88,54 @@ Feature: To search typescript in google
 #### Writing Step Definitions
 
 ```
-    import { browser } from 'protractor';
-    import { SearchPageObject } from '../pages/searchPage';
-    import { defineSupportCode } from 'cucumber';
-    let chai = require('chai').use(require('chai-as-promised'));
-    let expect = chai.expect;
+import { browser } from "protractor";
+import { SearchPageObject } from "../pages/searchPage";
+const { Given } = require("cucumber");
+const chai = require("chai").use(require("chai-as-promised"));
+const expect = chai.expect;
 
-    defineSupportCode(function ({Given}) {
-    let search: SearchPageObject = new SearchPageObject();
+const search: SearchPageObject = new SearchPageObject();
 
-        Given(/^I am on google page$/, async () => {
-        await expect(browser.getTitle()).to.eventually.equal('Google');
-    });
-})
+Given(/^I am on google page$/, async () => {
+    await expect(browser.getTitle()).to.eventually.equal("Google");
+});
 ```
 
 #### Writing Page Objects
 ```
-import {$} from 'protractor';
-    
+import { $ } from "protractor";
+
 export class SearchPageObject {
-    public searchTextBox:any;
-    public searchButton:any;
+    public searchTextBox: any;
+    public searchButton: any;
 
     constructor() {
-        this.searchTextBox = $("input[name='q']");
-        this.searchButton = $("button[name='btnG']");
+        this.searchTextBox = $("#lst-ib");
+        this.searchButton = $("input[value='Google Search']");
     }
 }
 ```
 #### Cucumber Hooks
 Following method takes screenshot on failure of each scenario
 ```
-After(async function (scenarioResult) {
-        let world = this;
-    if (scenarioResult.isFailed()) {
-            let screenShot = await browser.takeScreenshot();
-            // screenShot is a base-64 encoded PNG
-            world.attach(screenShot, 'image/png');
-        }
-})
+After(async function(scenario) {
+    if (scenario.result.status === Status.FAILED) {
+        // screenShot is a base-64 encoded PNG
+         const screenShot = await browser.takeScreenshot();
+         this.attach(screenShot, "image/png");
+    }
+});
 ```
 #### CucumberOpts Tags
 Following configuration shows to call specific tags from feature files
 ```
 cucumberOpts: {
     compiler: "ts:ts-node/register",
+    format: "json:./reports/json/cucumber_report.json",
+    require: ["../../stepdefinitions/*.ts", "../../support/*.ts"],
     strict: true,
-    format: ["pretty"],
-    require: ['../StepDefinitions/*.ts', '../Support/*.ts'],
-    tags: '@TypeScriptScenario or @CucumberScenario or @ProtractorScenario'
-}
+    tags: "@TypeScriptScenario or @CucumberScenario or @ProtractorScenario",
+},
 ```
 #### HTML Reports
 Currently this project has been integrated with [cucumber-html-reporter](https://github.com/gkushang/cucumber-html-reporter), which is generated in the `reports` folder when you run `npm test`.

circle.yml

@@ -14,7 +14,7 @@ dependencies:
     - curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
     - sudo dpkg -i google-chrome.deb
     - sleep 3
-    - yarn run tsc
+    - yarn run build
     - yarn run webdriver-update
     - yarn run webdriver-start:
           background: true

config/config.ts

@@ -1,35 +1,42 @@
-import { browser, Config } from 'protractor';
+import * as path from "path";
+import { browser, Config } from "protractor";
+import { Reporter } from "../support/reporter";
+const jsonReports = process.cwd() + "/reports/json";
 
-export let config: Config = {
+export const config: Config = {
 
-    seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
+    seleniumAddress: "http://127.0.0.1:4444/wd/hub",
 
     SELENIUM_PROMISE_MANAGER: false,
 
-    baseUrl: 'http://www.google.com',
+    baseUrl: "http://www.google.com",
 
     capabilities: {
-        browserName: 'chrome'
+        browserName: "chrome",
     },
 
-    framework: 'custom',
-    frameworkPath: require.resolve('protractor-cucumber-framework'),
+    framework: "custom",
+    frameworkPath: require.resolve("protractor-cucumber-framework"),
 
     specs: [
-        '../../features/*.feature'
+        "../../features/*.feature",
     ],
 
     onPrepare: () => {
-
         browser.ignoreSynchronization = true;
         browser.manage().window().maximize();
-
+        Reporter.createDirectory(jsonReports);
     },
+
     cucumberOpts: {
         compiler: "ts:ts-node/register",
+        format: "json:./reports/json/cucumber_report.json",
+        require: ["../../stepdefinitions/*.ts", "../../support/*.ts"],
         strict: true,
-        format: ['pretty'],
-        require: ['../../stepdefinitions/*.ts', '../../support/*.ts'],
-        tags: '@TypeScriptScenario or @CucumberScenario or @ProtractorScenario'
-    }
-};
+        tags: "@TypeScriptScenario or @CucumberScenario or @ProtractorScenario",
+    },
+
+    onComplete: () => {
+        Reporter.createHTMLReport();
+    },
+};

features/protractor.feature

@@ -2,7 +2,7 @@ Feature: To search protractor in google
 
 @ProtractorScenario
 Scenario: Protractor Google Search
-Given I am on google page
+Given I am on cucumber search results page
 When I type "Protractor"
 Then I click on search button
 Then I clear the search text

features/typescript.feature

@@ -2,7 +2,7 @@ Feature: To search typescript in google
 
 @TypeScriptScenario
 Scenario: Typescript Google Search
-Given I am on google page
+Given I am on protractor search results page
 When I type "Typescript"
 Then I click on search button
 Then I clear the search text

package.json

@@ -1,6 +1,6 @@
 {
   "name": "protractor-typescript-cucumber",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "license": "MIT",
   "description": "To demostrate protractor cucumber tests for angular/non angular apps with allure report framework",
   "homepage": "https://github.com/igniteram/protractor-cucumber-typescript",
@@ -20,27 +20,28 @@
   ],
   "main": "index.js",
   "scripts": {
-    "tsc": "tsc",
+    "build": "tsc",
+    "clean": "rimraf typeScript/",
+    "clean-build": "npm run clean && npm run build",
     "test": "protractor typeScript/config/config.js",
     "webdriver-update": "webdriver-manager update",
     "webdriver-start": "webdriver-manager start"
   },
   "author": "Ram Pasala <[email protected]>",
   "devDependencies": {
-    "@types/cucumber": "0.0.38",
+    "@types/cucumber": "^2.0.4",
     "@types/node": "^8.0.3",
-    "@types/selenium-webdriver": "^3.0.0",
+    "@types/selenium-webdriver": "^3.0.7",
     "chai": "^4.0.2",
     "chai-as-promised": "^7.0.0",
-    "cucumber": "^2.3.0",
+    "cucumber": "^3.0.4",
+    "cucumber-html-reporter": "^3.0.4",
     "mkdirp": "^0.5.1",
-    "protractor-cucumber-framework": "^3.1.1"
-  },
-  "dependencies": {
-    "cucumber-html-reporter": "^2.0.0",
     "protractor": "^5.1.2",
-    "ts-node": "^3.1.0",
-    "typescript": "^2.2.1"
+    "protractor-cucumber-framework": "^4.0.8",
+    "rimraf": "^2.6.2",
+    "ts-node": "^3.3.0",
+    "typescript": "^2.5.3"
   },
   "repository": "https://github.com/igniteram/protractor-cucumber-typescript"
 }

pages/searchPage.ts

@@ -1,11 +1,11 @@
-import { $ } from 'protractor';
+import { $ } from "protractor";
 
 export class SearchPageObject {
     public searchTextBox: any;
     public searchButton: any;
 
     constructor() {
-        this.searchTextBox = $("input[name='q']");
+        this.searchTextBox = $("#lst-ib");
         this.searchButton = $("input[value='Google Search']");
     }
-}
+}

stepdefinitions/clearPage.ts

@@ -1,10 +1,8 @@
-import { SearchPageObject } from '../pages/searchPage';
-import { defineSupportCode } from 'cucumber';
+import { SearchPageObject } from "../pages/searchPage";
+const { Then } = require("cucumber");
 
-defineSupportCode(function ({ Then }) {
-    let search: SearchPageObject = new SearchPageObject();
+const search: SearchPageObject = new SearchPageObject();
 
-    Then(/^I clear the search text$/, async () => {
-        await search.searchTextBox.clear();
-    });
-})
+Then(/^I clear the search text$/, async () => {
+     await search.searchTextBox.clear();
+});

stepdefinitions/homePage.ts

@@ -1,13 +1,19 @@
-import { browser } from 'protractor';
-import { SearchPageObject } from '../pages/searchPage';
-import { defineSupportCode } from 'cucumber';
-let chai = require('chai').use(require('chai-as-promised'));
-let expect = chai.expect;
-
-defineSupportCode(function ({ Given }) {
-    let search: SearchPageObject = new SearchPageObject();
-
-    Given(/^I am on google page$/, async () => {
-        await expect(browser.getTitle()).to.eventually.equal('Google');
-    });
-})
+import { browser } from "protractor";
+import { SearchPageObject } from "../pages/searchPage";
+const { Given } = require("cucumber");
+const chai = require("chai").use(require("chai-as-promised"));
+const expect = chai.expect;
+
+const search: SearchPageObject = new SearchPageObject();
+
+Given(/^I am on google page$/, async () => {
+    await expect(browser.getTitle()).to.eventually.equal("Google");
+});
+
+Given(/^I am on cucumber search results page$/, async () => {
+    await expect(browser.getTitle()).to.eventually.equal("Cucumber - Google Search");
+});
+
+Given(/^I am on protractor search results page$/, async () => {
+    await expect(browser.getTitle()).to.eventually.equal("Protractor - Google Search");
+});

stepdefinitions/search.ts

@@ -1,14 +1,13 @@
-import { SearchPageObject } from '../pages/searchPage';
-import { defineSupportCode } from 'cucumber';
+import { browser, protractor } from "protractor";
+import { SearchPageObject } from "../pages/searchPage";
+const { When, Then } = require("cucumber");
 
-defineSupportCode(function ({ When, Then }) {
-    let search: SearchPageObject = new SearchPageObject();
-    When(/^I type "(.*?)"$/, async (text) => {
-        await search.searchTextBox.sendKeys(text);
-    });
+const search: SearchPageObject = new SearchPageObject();
 
-    Then(/^I click on search button$/, async () => {
-        await search.searchButton.click();
-    });
+When(/^I type "(.*?)"$/, async (text) => {
+    await search.searchTextBox.sendKeys(text);
+});
 
-})
+Then(/^I click on search button$/, async () => {
+    await browser.actions().sendKeys(protractor.Key.ENTER).perform();
+});