Merge pull request #34 from 07souravkunda/sdk

Add sdk to main

Author: francisf

.gitignore

@@ -1,3 +1,8 @@
 node_modules
 local.log
 screenshots
+log/
+browserstack.err
+**/.DS_Store
+.vscode/
+.env

README.md

@@ -1,38 +1,58 @@
 # cucumber-js-browserstack
 
-[Cucumber-JS](https://github.com/cucumber/cucumber-js) Integration with BrowserStack.
-
-Master branch contains **Selenium 3** samples, for **Selenium 4 - W3C protocol** please checkout [selenium-4](https://github.com/browserstack/cucumber-js-browserstack/tree/selenium-4) branch
+[Cucumber-JS](https://github.com/cucumber/cucumber-js) Integration with BrowserStack for E2E functional testing of UI using Selenium and [browserstack-node-sdk](https://www.npmjs.com/package/browserstack-node-sdk).
 
 ![BrowserStack Logo](https://d98b8t1nnulk5.cloudfront.net/production/images/layout/logo-header.png?1469004780)
 
 <img src = "https://cucumber.io/images/cucumber-logo.svg" height = "100">
 
 
-## Setup
-* Clone the repo
-* Install dependencies `npm install`
-* Update `*.conf.js` files inside the `conf/` directory with your [BrowserStack Username and Access Key](https://www.browserstack.com/accounts/settings)
+## Run sample build
 
-## Running your tests
-* To run a single test, run `npm run single`
-* To run local tests, run `npm run local`
-* To run parallel tests, run `npm run parallel`
+---
+- Clone the repo
+- Install dependencies `npm install`
+- Set your [BrowserStack Username and Access Key](https://www.browserstack.com/accounts/settings) in [browserstack.yml](browserstack.yml) `npx setup --username userName --key accessKey`
+- To run sample test, run `npm run sample-test` or `yarn run sample-test`
+- To run tests on private websites,
+   - set browserstackLocal: true at [browserstack.yml](browserstack.yml)
+   - run `npm run sample-local-test` or `yarn run sample-local-test`
 
  Understand how many parallel sessions you need by using our [Parallel Test Calculator](https://www.browserstack.com/automate/parallel-calculator?ref=github)
 
-## Notes
-* You can view your test results on the [BrowserStack Automate dashboard](https://www.browserstack.com/automate)
-* To test on a different set of browsers, check out our [platform configurator](https://www.browserstack.com/automate/node#setting-os-and-browser)
-* You can export the environment variables for the Username and Access Key of your BrowserStack account
-  
+## Integrate your test suite
+
+---
+1. Install browserstack-node-sdk as a dev-dependency
+```
+npm i -D browserstack-node-sdk
+or
+yarn add --dev browserstack-node-sdk
+```
+2. Setup
+```
+npx setup --username userName --key accessKey
+```
+  * Adds a browserstack.yml file at root of your mocha project with your [BrowserStack Username and Access Key](https://www.browserstack.com/accounts/settings).
+  * Adds a new command for running tests on browserstack in scripts tag of package.json,
   ```
-  export BROWSERSTACK_USERNAME=<browserstack-username> &&
-  export BROWSERSTACK_ACCESS_KEY=<browserstack-access-key>
+  "scripts": {
+    "test": "cucumber-js [args]",
+    "browserstack-test": "browserstack-node-sdk cucumber-js [args]"
+  },
   ```
-  
+
+
+## Notes
+
+---
+- You can view your test results on the [BrowserStack Automate dashboard](https://www.browserstack.com/automate)
+- To test on a different set of browsers, check out our [platform configurator](https://www.browserstack.com/automate/node#setting-os-and-browser)
+
 ## Additional Resources
-* [Documentation for writing Automate test scripts in Node](https://www.browserstack.com/automate/node)
-* [Customizing your tests on BrowserStack](https://www.browserstack.com/automate/capabilities)
-* [Browsers & mobile devices for selenium testing on BrowserStack](https://www.browserstack.com/list-of-browsers-and-platforms?product=automate)
-* [Using REST API to access information about your tests via the command-line interface](https://www.browserstack.com/automate/rest-api)
+
+---
+- [Documentation for writing Automate test scripts in Node](https://www.browserstack.com/automate/node)
+- [Customizing your tests on BrowserStack](https://www.browserstack.com/automate/capabilities)
+- [Browsers & mobile devices for selenium testing on BrowserStack](https://www.browserstack.com/list-of-browsers-and-platforms?product=automate)
+- [Using REST API to access information about your tests via the command-line interface](https://www.browserstack.com/automate/rest-api)

browserstack.yml

@@ -0,0 +1,69 @@
+# =============================
+# Set BrowserStack Credentials
+# =============================
+# Add your BrowserStack userName and acccessKey here or set BROWSERSTACK_USERNAME and
+# BROWSERSTACK_ACCESS_KEY as env variables
+userName: YOUR_USERNAME
+accessKey: YOUR_ACCESS_KEY
+# ======================
+# Organizing your tests
+# ======================
+# Use `projectName`, `buildName`, `name` capabilities to organise your tests
+# `name` is the name of your test sessions and is automatically picked from your
+# test name and doesn't need to be set manually when using BrowserStack SDK
+# `buildName` is used to name your CI/CD job or the execution of your test suite.
+# Ensure you add a dynamic identifier, like an incremental build number from your
+# CI/CD or timestamp at the end of every build; otherwise tests from different
+# executions will be grouped together on BrowserStack
+buildName: browserstack-build-1
+# Use `projectName` to set the name of your project. Example, Marketing Website
+projectName: BrowserStack Samples
+# =======================================
+# Platforms (Browsers / Devices to test)
+# =======================================
+# Platforms object contains all the browser / device combinations you want to test on.
+# Entire list available here -> (https://www.browserstack.com/list-of-browsers-and-platforms/automate)
+platforms:
+  - os: OS X
+    osVersion: Big Sur
+    browser: Chrome
+    browserVersion: latest
+  - os: Windows
+    osVersion: 10
+    browser: Edge
+    browserVersion: latest
+  - device: iPhone 13
+    browserName: Safari
+    osVersion: 15
+  - device: Samsung Galaxy S22 Ultra
+    browserName: chrome # Try 'samsung' for Samsung browser
+    osVersion: 12.0
+# =======================
+# Parallels per Platform
+# =======================
+# The number of parallel threads to be used for each platform set.
+# BrowserStack's SDK runner will select the best strategy based on the configured value
+#
+# Example 1 - If you have configured 3 platforms and set `parallelsPerPlatform` as 2, a total of 6 (2 * 3) parallel threads will be used on BrowserStack
+#
+# Example 2 - If you have configured 1 platform and set `parallelsPerPlatform` as 5, a total of 5 (1 * 5) parallel threads will be used on BrowserStack
+parallelsPerPlatform: 1
+# ==========================================
+# BrowserStack Local
+# (For localhost, staging/private websites)
+# ==========================================
+# Set browserStackLocal to true if your website under test is not accessible publicly over the internet
+# Learn more about how BrowserStack Local works here -> https://www.browserstack.com/docs/automate/selenium/local-testing-introduction
+browserstackLocal: true # <boolean> (Default false)
+# browserStackLocalOptions:
+# Options to be passed to BrowserStack local in-case of advanced configurations
+  # localIdentifier: # <string> (Default: null) Needed if you need to run multiple instances of local.
+  # forceLocal: true  # <boolean> (Default: false) Set to true if you need to resolve all your traffic via BrowserStack Local tunnel.
+  # Entire list of arguments availabe here -> https://www.browserstack.com/docs/automate/selenium/manage-incoming-connections
+# ===================
+# Debugging features
+# ===================
+debug: false # <boolean> # Set to true if you need screenshots for every selenium command ran
+networkLogs: false # <boolean> Set to true to enable HAR logs capturing
+consoleLogs: errors # <string> Remote browser's console debug levels to be printed (Default: errors)
+# Available options are `disable`, `errors`, `warnings`, `info`, `verbose` (Default: errors)

conf/local.conf.js

@@ -1,26 +1,32 @@
 'use strict';
 
-var assert = require('cucumber-assert');
+var assert = require('assert');
+const { Given, When, Then } = require("@cucumber/cucumber");
+const { By, until } = require("selenium-webdriver");
 
-module.exports = function() {
-  var productText = "";
-  this.Given(/^I visit bstackdemo website/, function (next) {
-    this.driver.get('https://bstackdemo.com/').then(next);
-  });
+var productText = "";
+Given(/^I visit bstackdemo website/, async function () {
+  await this.driver.get('https://bstackdemo.com/');
+});
 
-  this.When(/^I add a product to the cart/, function (next) {
-    const productOnScreen = this.driver.findElement({xpath: '//*[@id="1"]/p'})
-    productOnScreen.getText().then(function (text) {
-      productText = text;
-    });
-    this.driver.findElement({xpath: '//*[@id="1"]/div[4]'}).click().then(next);
-  });
+When(/^I add a product to the cart/, async function () {
+  await this.driver.wait(until.elementLocated(By.xpath('//*[@id="1"]/p')));
+  productText = await this.driver.findElement(By.xpath('//*[@id="1"]/p')).getText();
+  await this.driver.findElement({xpath: '//*[@id="1"]/div[4]'}).click();
+});
 
-  this.Then(/^I should see the same product in the cart section/, function (next) {
-    this.driver.findElement({xpath: "//*[@id=\'__next\']/div/div/div[2]/div[2]/div[2]/div/div[3]/p[1]"})
-    .getText()
-    .then(function (text) {
-      assert.equal(text, productText, next, 'Expected product to be ' + productText)
-    })
-  });
-};
+Then(/^I should see the same product in the cart section/, async function () {
+  await this.driver.wait(until.elementLocated(By.className("float-cart__content")));
+  await this.driver.findElement(By.className("float-cart__content"));
+
+  await this.driver.wait(until.elementLocated(By.xpath('//*[@id="__next"]/div/div/div[2]/div[2]/div[2]/div/div[3]/p[1]')));
+  let productCartText = await this.driver
+          .findElement(
+            By.xpath(
+              '//*[@id="__next"]/div/div/div[2]/div[2]/div[2]/div/div[3]/p[1]'
+            )
+          )
+          .getText();
+
+  assert.equal(productCartText, productText, 'Expected product to be ' + productText)
+});

conf/parallel.conf.js

@@ -1,19 +1,13 @@
 'use strict';
 
-var assert = require('cucumber-assert');
-var webdriver = require('selenium-webdriver');
+var assert = require('assert');
+const { When, Then } = require("@cucumber/cucumber");
 
-module.exports = function() {
+When(/^I open health check$/, async function () {
+  await this.driver.get('http://bs-local.com:45691/check');
+});
 
-  this.When(/^I open health check$/, function (next) {
-    this.driver.get('http://bs-local.com:45691/check');
-    next();
-  });
-
-  this.Then(/^I should see "([^"]*)"$/, function (sourceMatch, next) {
-    this.driver.getPageSource()
-      .then(function(source) {
-        assert.equal(source.indexOf(sourceMatch) > -1, true, next, 'Expected source to contain ' + sourceMatch);
-      });
-  });
-};
+Then(/^I should see "([^"]*)"$/, async function (sourceMatch) {
+  let source = await this.driver.getPageSource();
+  assert.equal(source.indexOf(sourceMatch) > -1, true, 'Expected source to contain ' + sourceMatch);
+});

conf/single.conf.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var configure = function () {
-    this.setDefaultTimeout(60 * 1000);
-};
+const { setDefaultTimeout } = require("@cucumber/cucumber");
 
-module.exports = configure;
+setDefaultTimeout(60 * 1000);

features/step_definitions/bstack-steps.js

@@ -1,53 +1,23 @@
 'use strict';
 
-var webdriver = require('selenium-webdriver');
-var browserstack = require('browserstack-local');
+const { Builder, Capabilities } = require("selenium-webdriver");
+const { Before, After } = require("@cucumber/cucumber");
 
-var config_file = '../../conf/' + (process.env.CONFIG_FILE || 'single') + '.conf.js';
-var config = require(config_file).config;
-
-var username = process.env.BROWSERSTACK_USERNAME || config.user;
-var accessKey = process.env.BROWSERSTACK_ACCESS_KEY || config.key;
-
-var createBrowserStackSession = function (config, caps) {
-  return new webdriver.Builder().
-    usingServer(`https://${username}:${accessKey}@${config.server}/wd/hub`).
-    withCapabilities(caps).
+var createBrowserStackSession = function(){
+  return new Builder().
+    usingServer('http://localhost:4444/wd/hub').
+    withCapabilities(Capabilities.chrome()).
     build();
 }
 
-var myHooks = function () {
-  var bs_local = null;
-
-  this.Before(function (scenario, callback) {
-    var world = this;
-    var task_id = parseInt(process.env.TASK_ID || 0);
-    var caps = config.capabilities[task_id];
-
-    if (caps["bstack:options"] && caps["bstack:options"]['local']) {
-      // Code to start browserstack local before start of test and stop browserstack local after end of test
-      bs_local = new browserstack.Local();
-      bs_local.start({ key: accessKey }, function (error) {
-        if (error) return console.log(error.red);
+Before(function (scenario, callback) {
+  var world = this;
+  world.driver = createBrowserStackSession();
+  callback();
+});
 
-        world.driver = createBrowserStackSession(config, caps);
-        callback();
-      });
-    }
-    else {
-      world.driver = createBrowserStackSession(config, caps);
-      callback();
-    }
+After(function(scenario, callback){
+  this.driver.quit().then(function(){
+    callback();
   });
-
-  this.After(function (scenario, callback) {
-    this.driver.quit().then(function () {
-      if (bs_local) {
-        bs_local.stop(callback);
-      }
-      else callback();
-    });
-  });
-};
-
-module.exports = myHooks;
+});