initial commit

Author: Abhi Singh

.gitignore

@@ -0,0 +1,10 @@
+node_modules
+screenshots
+videos
+downloads
+mochawesome-report
+report
+log
+*.log
+results
+build_artifacts

README.md

@@ -1,2 +1,39 @@
 # cucumber-js-cypress-browserstack
-Creating a sample repo for Cypress - Cucumber
+
+## Introduction
+
+Cypress is a next generation front end testing tool built for the modern web. Cucumber is a software tool that supports behavior-driven development (BDD).
+
+This BrowserStack Example repository demonstrates a Cypress framework with parallel testing capabilities. The Cypress test scripts are written for the open source [BrowserStack Demo web application](https://bstackdemo.com) ([Github](https://github.com/browserstack/browserstack-demo-app)). This BrowserStack Demo App is an e-commerce web application which showcases multiple real-world user scenarios. The app is bundled with offers data, orders data and products data that contains everything you need to start using the app and run tests out-of-the-box.
+
+The Cypress tests are run on different platforms like on-prem and BrowserStack using various run configurations and test capabilities.
+
+## Pre-requisites
+
+You need BrowserStack credentials to be able to run Cypress tests. You have to replace `YOUR_USERNAME` and `YOUR_ACCESS_KEY` in the sample scripts in this repository with your BrowserStack credentials which can be found in your [Account Settings](https://www.browserstack.com/accounts/settings) page.
+
+**Alternatively, you can set the environment variables `BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY` with your credentials and all the scripts in this repository should work fine**
+
+## Run Cypress test on BrowserStack
+
+1. Clone this repository
+2. Install the dependencies using `npm install`
+3. Run the sample script using `npm run bstack`
+
+## Run sample test on privately hosted websites
+
+1. Clone the [BrowserStack demo application](https://github.com/browserstack/browserstack-demo-app) repository.
+
+```sh
+git clone https://github.com/browserstack/browserstack-demo-app
+```
+
+2. Please follow the README.md on the BrowserStack demo application repository to install and start the dev server on localhost.
+3. You can then run the sample Local test using `npm run bstack-local`
+
+## Additional Resources
+
+- View your test results on the [BrowserStack Automate dashboard](https://www.browserstack.com/automate)
+- Documentation for writing [Automate test scripts in Cypress](https://www.browserstack.com/docs/automate/cypress)
+- [List of Browsers & mobile devices](https://www.browserstack.com/list-of-browsers-and-platforms/cypress_testing) for automation testing on BrowserStack
+- For testing public web applications behind IP restriction, [Inbound IP Whitelisting](https://www.browserstack.com/local-testing/inbound-ip-whitelisting) can be enabled with the [BrowserStack Enterprise](https://www.browserstack.com/enterprise) offering

cypress.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require("cypress");
+const cucumber = require("cypress-cucumber-preprocessor").default;
+
+module.exports = defineConfig({
+  watchForFileChanges: true,
+  reporter: "mochawesome",
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      on("file:preprocessor", cucumber());
+    },
+    specPattern: "**/*.feature",
+    baseUrl: "https://bstackdemo.com/",
+    excludeSpecPattern: ["*.js"],
+  },
+});

cypress/e2e/e2e.feature

@@ -0,0 +1,12 @@
+Feature: End to End Feature
+
+  @e2e
+  Scenario: End to End Scenario
+    Given I navigate to website
+    And I SignIn as "fav_user" with "testingisfun99" password
+    And I add three products to cart
+    And I click on Buy Button
+    And I enter shipping details "first", "last", "test address", "test province" and "123456"
+    And I click on Checkout Button
+    And I click on "Orders" link
+    Then I should see elements in list

cypress/support/e2e.js

@@ -0,0 +1,15 @@
+class login {
+  username() {
+    return cy.get("#username", { timeout: 30000 });
+  }
+  password() {
+    return cy.get("#password", { timeout: 30000 });
+  }
+  logInButton() {
+    return cy.get("#login-btn", { timeout: 30000 });
+  }
+  logOutButton() {
+    return cy.get("#logout", { timeout: 30000 });
+  }
+}
+export default login;

cypress/support/pages/login.page.js

@@ -0,0 +1,15 @@
+class orders {
+  checkout() {
+    return cy.get("#checkout-shipping-continue", { timeout: 30000 });
+  }
+  return() {
+    return cy.get(
+      ".button.button--tertiary.optimizedCheckout-buttonSecondary",
+      { timeout: 30000 }
+    );
+  }
+  orders() {
+    return cy.get("#orders", { timeout: 30000 });
+  }
+}
+export default orders;

cypress/support/pages/orders.page.js

@@ -0,0 +1,18 @@
+class purchase {
+  item1() {
+    return cy
+      .get("#1", { timeout: 30000 })
+      .should("be.visible")
+      .children(".shelf-item__buy-btn");
+  }
+  item2() {
+    return cy.get("#2").children(".shelf-item__buy-btn");
+  }
+  item3() {
+    return cy.get("#5").children(".shelf-item__buy-btn");
+  }
+  buyButton() {
+    return cy.get(".buy-btn");
+  }
+}
+export default purchase;

cypress/support/pages/purchase.page.js

@@ -0,0 +1,58 @@
+const { Given, Then, And } = require("cypress-cucumber-preprocessor/steps");
+
+require("cypress-xpath");
+
+import Login from "../pages/login.page";
+import Purchase from "../pages/purchase.page";
+import Orders from "../pages/orders.page";
+
+const login = new Login();
+const purchase = new Purchase();
+const orders = new Orders();
+
+Given("I navigate to website", () => {
+  cy.visit(Cypress.config().baseUrl + "signin");
+});
+
+And("I SignIn as {string} with {string} password", (username, password) => {
+  login
+    .username()
+    .should("be.visible")
+    .click({ force: true })
+    .type(username + "{enter}");
+  login
+    .password()
+    .click({ force: true })
+    .type(password + "{enter}");
+  login.logInButton().click();
+});
+And("I add three products to cart", () => {
+  purchase.item1().click({ force: true });
+  purchase.item2().click({ force: true });
+  purchase.item3().click({ force: true });
+});
+And("I click on Buy Button", () => {
+  purchase.buyButton().click({ force: true });
+});
+And(
+  "I enter shipping details {string}, {string}, {string}, {string} and {string}",
+  (first, last, address, province, pincode) => {
+    cy.get("#firstNameInput").type(first);
+    cy.get("#lastNameInput").type(last);
+    cy.get("#addressLine1Input").type(address);
+    cy.get("#provinceInput").type(province);
+    cy.get("#postCodeInput").type(pincode);
+  }
+);
+And("I click on Checkout Button", () => {
+  orders.checkout().click();
+  cy.contains("Continue ").click();
+});
+And("I click on {string} link", (link) => {
+  cy.contains(link).click();
+});
+Then("I should see elements in list", () => {
+  cy.xpath("/html/body/div/main/div/div/div/div[2]/div/div[2]")
+    .children("div")
+    .should("have.length", 3);
+});

cypress/support/step_definitions/e2e.spec.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require("cypress");
+const cucumber = require("cypress-cucumber-preprocessor").default;
+
+module.exports = defineConfig({
+  watchForFileChanges: true,
+  reporter: "mochawesome",
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      on("file:preprocessor", cucumber());
+    },
+    specPattern: "**/*.feature",
+    baseUrl: "http://localhost:3000/",
+    excludeSpecPattern: ["*.js"],
+  },
+});