feat: Web Automation Testing Setup (#556)

Co-authored-by: Swati Mukherjee <[email protected]>

.github/workflows/run-automation-test.yml

@@ -0,0 +1,60 @@
+name: Run Cypress Tests
+
+on:
+  pull_request:
+  merge_group:
+  push:
+    branches:
+      - main
+
+jobs:
+  cypress:
+    runs-on: ubuntu-latest
+    environment: Testing
+    env:
+      HS_Pub_Key: ${{ secrets.HYPERSWITCH_PUBLISHABLE_KEY }}
+      HS_Sec_Key: ${{ secrets.HYPERSWITCH_SECRET_KEY }}
+      HS_Prof_Id: ${{ secrets.PROFILE_ID }}
+      HS_Server_Url: "https://sandbox.hyperswitch.io"
+      HS_Client_Url: "http://localhost:9050"
+      # Environment variables for Hyperswitch credentials and URLs
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+        # Checks out the repository so that the workflow can access the code
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20" # Specifies the version of Node.js to use
+          cache: "npm" # Caches npm dependencies to speed up subsequent installs
+
+      - name: Install dependencies
+        run: npm install
+        # Installs the necessary npm dependencies for the project
+
+      - name: Create .env file
+        working-directory: ./Hyperswitch-React-Demo-App
+        run: |
+          touch .env
+          echo STATIC_DIR = ./dist >> .env
+          echo HYPERSWITCH_PUBLISHABLE_KEY = $HS_Pub_Key >> .env
+          echo HYPERSWITCH_SECRET_KEY = $HS_Sec_Key >> .env
+          echo PROFILE_ID = $HS_Prof_Id >> .env
+          echo HYPERSWITCH_SERVER_URL = $HS_Server_Url >> .env
+          echo HYPERSWITCH_CLIENT_URL = $HS_Client_Url >> .env
+        # Creates a .env file with environment variables needed for the application
+
+      - name: Build and start local server
+        run: |
+          npm run re:build && npm start &
+          echo "Hyperswitch Web started" && cd Hyperswitch-React-Demo-App && npm start &
+          echo "Demo App started"
+        # Builds the project and starts both the Hyperswitch Web and Demo App servers in the background
+
+      - name: Run Cypress
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ./cypress-tests
+        # Runs Cypress tests located in the specified directory

.gitignore

@@ -11,6 +11,8 @@ public/app.css
 /dist/
 **/*.bs.js
 .github/CODEOWNERS
+screenshots
+!cypress-tests/package-lock.json
 
 # yarn
 .pnp.*

Hyperswitch-React-Demo-App/.env

@@ -4,4 +4,4 @@ HYPERSWITCH_SECRET_KEY=
 HYPERSWITCH_SERVER_URL=
 HYPERSWITCH_CLIENT_URL=
 SELF_SERVER_URL=
-
+PROFILE_ID=""

Hyperswitch-React-Demo-App/server.js

@@ -39,63 +39,70 @@ app.get("/urls", (req, res) => {
   });
 });
 
-function createPaymentRequest() {
-  return {
-    currency: "USD",
-    amount: 2999,
-    order_details: [
-      {
-        product_name: "Apple iPhone 15",
-        quantity: 1,
-        amount: 2999,
-      },
-    ],
-    confirm: false,
-    capture_method: "automatic",
-    authentication_type: "three_ds",
-    customer_id: "hyperswitch_sdk_demo_id",
-    email: "[email protected]",
-    description: "Hello this is description",
-    shipping: {
-      address: {
-        line1: "1467",
-        line2: "Harrison Street",
-        line3: "Harrison Street",
-        city: "San Fransico",
-        state: "California",
-        zip: "94122",
-        country: "US",
-        first_name: "joseph",
-        last_name: "Doe",
-      },
-      phone: {
-        number: "8056594427",
-        country_code: "+91",
-      },
+const paymentData = {
+  currency: "USD",
+  amount: 2999,
+  order_details: [
+    {
+      product_name: "Apple iPhone 15",
+      quantity: 1,
+      amount: 2999,
     },
-    metadata: {
-      udf1: "value1",
-      new_customer: "true",
-      login_date: "2019-09-10T10:11:12Z",
+  ],
+  confirm: false,
+  capture_method: "automatic",
+  authentication_type: "three_ds",
+  customer_id: "hyperswitch_sdk_demo_id",
+  email: "[email protected]",
+  description: "Hello this is description",
+  shipping: {
+    address: {
+      line1: "1467",
+      line2: "Harrison Street",
+      line3: "Harrison Street",
+      city: "San Fransico",
+      state: "California",
+      zip: "94122",
+      country: "US",
+      first_name: "joseph",
+      last_name: "Doe",
     },
-    billing: {
-      address: {
-        line1: "1467",
-        line2: "Harrison Street",
-        line3: "Harrison Street",
-        city: "San Fransico",
-        state: "California",
-        zip: "94122",
-        country: "US",
-        first_name: "joseph",
-        last_name: "Doe",
-      },
-      phone: {
-        number: "8056594427",
-        country_code: "+91",
-      },
+    phone: {
+      number: "8056594427",
+      country_code: "+91",
+    },
+  },
+  metadata: {
+    udf1: "value1",
+    new_customer: "true",
+    login_date: "2019-09-10T10:11:12Z",
+  },
+  billing: {
+    address: {
+      line1: "1467",
+      line2: "Harrison Street",
+      line3: "Harrison Street",
+      city: "San Fransico",
+      state: "California",
+      zip: "94122",
+      country: "US",
+      first_name: "joseph",
+      last_name: "Doe",
     },
-  };
+    phone: {
+      number: "8056594427",
+      country_code: "+91",
+    },
+  },
+}
+
+const profileId = process.env.PROFILE_ID;
+if(profileId) {
+  paymentData.profile_id = profileId;
+}
+
+function createPaymentRequest() {
+  return paymentData;
 }
 
 app.get("/create-payment-intent", async (_, res) => {

cypress-tests/cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  projectId: "6r9ayw",
+  chromeWebSecurity: false,
+  e2e: {
+    baseUrl: "http://localhost:9050",
+  },
+  retries: { runMode: 1, openMode: 1 },
+});

cypress-tests/cypress/e2e/card-flow-e2e-test.cy.ts

@@ -0,0 +1,47 @@
+import * as testIds from "../../../src/Utilities/TestUtils.bs";
+import { CLIENT_URL } from "../support/utils";
+
+describe("Card payment flow test", () => {
+  let getIframeBody : () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+  let iframeSelector =
+      "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+  beforeEach(() => {
+    getIframeBody = () => cy.iframe(iframeSelector);
+
+    cy.visit(CLIENT_URL);
+  });
+
+  it("page loaded successfully", () => {
+    cy.visit(CLIENT_URL);
+  });
+
+  it("title rendered correctly", () => {
+    cy.contains("Hyperswitch Unified Checkout").should("be.visible");
+  });
+
+  it("orca-payment-element iframe loaded", () => {
+    cy.get(
+      "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"
+    )
+      .should("be.visible")
+      .its("0.contentDocument")
+      .its("body");
+  });
+
+  it('should check if cards are saved', () => {
+    // Visit the page where the test will be performed
+    cy.visit(CLIENT_URL);
+
+    getIframeBody().find(`[data-testid=${testIds.addNewCardIcon}]`)
+    .then($element => {
+      if ($element.length > 0) {
+        getIframeBody().find('[data-testid=cvvInput]').type('123');
+        getIframeBody().get("#submit").click();
+        cy.wait(2000);
+        cy.contains("Thanks for your order!").should("be.visible");
+      } else {
+        cy.log(' new card card flow');
+      }
+    });
+  });
+});

cypress-tests/cypress/fixtures/paymentMethods.json

@@ -0,0 +1,9 @@
+{
+    "card":"Card",
+    "klarna":"Klarna",
+    "affirm":"Affirm",
+    "aliPay":"Ali Pay",
+    "weChatPay":"WeChat"
+
+  }
+

cypress-tests/cypress/fixtures/testCustomer.json

@@ -0,0 +1,15 @@
+{
+  "cardNo":"4242 4242 4242 4242",
+  "threeDSCardNo":"4000000000003220",
+  "cardExpiry":"04/24",
+  "cardCVV":"424",
+  "billingName":"Arun Mishra",
+  "cardHolderName":"Arun Mishra",
+  "email":"[email protected]",
+  "address":"123 Main Street Apt 4B",
+  "city":"New York",
+  "country":"United States",
+  "state":"New York",
+  "postalCode":"10001",
+  "paymentSuccessfulText":"Payment successful"
+}

cypress-tests/cypress/js-e2e-test-cases-to-refer/affirm-flow-e2e-test.cy.js

@@ -0,0 +1,53 @@
+import * as testIds from "../../src/Utilities/TestUtils.bs";
+describe("affirm payment flow test", () => {
+  let customerData;
+  let paymentMethodsData;
+  beforeEach(() => {
+    cy.visit("http://localhost:9060");
+
+    cy.wrap(
+      Cypress.automation("remote:debugger:protocol", {
+        command: "Network.clearBrowserCache",
+      })
+    );
+
+    cy.fixture("testCustomer").then((customer) => {
+      customerData = customer;
+    });
+    cy.fixture("paymentMethods").then((paymentMethods) => {
+      paymentMethodsData = paymentMethods;
+    });
+  });
+  it("page loaded successfully", () => {
+    cy.visit("http://localhost:9060");
+  });
+  it("title rendered correctly", () => {
+    cy.contains("Hyperswitch Unified Checkout").should("be.visible");
+  });
+
+  it("orca-payment-element iframe loaded", () => {
+    cy.get(
+      "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"
+    )
+      .should("be.visible")
+      .its("0.contentDocument")
+      .its("body");
+  });
+  it("affirm payment flow successful", () => {
+    let iframeSelector =
+      "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+
+    cy.frameLoaded(iframeSelector);
+    cy.wait(2000);
+
+    cy.iframe(iframeSelector)
+      .find(`[data-testid=${testIds.paymentMethodListTestId}]`)
+      .should("be.visible")
+      .contains(paymentMethodsData.affirm)
+      .click();
+
+    cy.get("#submit").click();
+
+    cy.url().should("include", "sandbox.hyperswitch");
+  });
+});

cypress-tests/cypress/js-e2e-test-cases-to-refer/alipay-flow-e2e-test.cy.js

@@ -0,0 +1,50 @@
+import * as testIds from "../../src/Utilities/TestUtils.bs";
+describe("Ali Pay payment flow test", () => {
+  let customerData;
+  let paymentMethodsData;
+  beforeEach(() => {
+    // cy.visit("http://localhost:9060", { cache: false });
+    cy.visit("http://localhost:9060");
+
+    cy.wrap(
+      Cypress.automation("remote:debugger:protocol", {
+        command: "Network.clearBrowserCache",
+      })
+    );
+    cy.fixture("testCustomer").then((customer) => {
+      customerData = customer;
+    });
+    cy.fixture("paymentMethods").then((paymentMethods) => {
+      paymentMethodsData = paymentMethods;
+    });
+  });
+  it("page loaded successfully", () => {
+    cy.visit("http://localhost:9060");
+  });
+  it("title rendered correctly", () => {
+    cy.contains("Hyperswitch Unified Checkout").should("be.visible");
+  });
+
+  it("orca-payment-element iframe loaded", () => {
+    cy.get(
+      "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element"
+    )
+      .should("be.visible")
+      .its("0.contentDocument")
+      .its("body");
+  });
+  it("ali pay payment flow successful", () => {
+    let iframeSelector =
+      "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+    cy.frameLoaded(iframeSelector);
+    cy.wait(2000);
+    cy.iframe(iframeSelector)
+      .find(`[data-testid=${testIds.paymentMethodDropDownTestId}]`)
+      .should("be.visible")
+      .select(paymentMethodsData.aliPay);
+
+    cy.get("#submit").click();
+
+    cy.url().should("include", "sandbox.hyperswitch");
+  });
+});