refactor(cypress): add testIds as selectors in card payment for adyen…

… connector 3DS flow e2e test

cypress-tests/cypress/e2e/card-payment-adyen-connector-3ds-flow.cy.ts

@@ -1,81 +1,80 @@
 import {
-    adyenTestCard,
-    changeObjectKeyValue,
-    confirmBody,
+  adyenTestCard,
+  changeObjectKeyValue,
+  confirmBody,
+  createPaymentBody,
+  getClientURL,
+} from "cypress/support/utils";
+import { CardData } from "cypress/support/types";
+
+describe("Card Payment for Adyen Connector for 3DS Flow Test", () => {
+  const publishableKey = Cypress.env("HYPERSWITCH_PUBLISHABLE_KEY");
+  const secretKey = Cypress.env("HYPERSWITCH_SECRET_KEY");
+  let getIframeBody: () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
+  const iframeSelector =
+    "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
+
+  const cardData: CardData = {
+    cardNo: adyenTestCard,
+    expiryDate: "03/30",
+    cvc: "737",
+  };
+  // const cardData: CardData = {
+  //   cardNo: adyenTestCard,
+  //   expiryDate: adyenExpiryDate,
+  //   cvc: adyenCvc,
+  // }
+  changeObjectKeyValue(
     createPaymentBody,
-    getClientURL,
-  } from "cypress/support/utils";
-  import { CardData } from "cypress/support/types";
-
-  describe("Card Payment for Adyen Connector for 3DS Flow Test", () => {
-    const publishableKey = Cypress.env("HYPERSWITCH_PUBLISHABLE_KEY");
-    const secretKey = Cypress.env("HYPERSWITCH_SECRET_KEY");
-    let getIframeBody: () => Cypress.Chainable<JQuery<HTMLBodyElement>>;
-    const iframeSelector =
-      "#orca-payment-element-iframeRef-orca-elements-payment-element-payment-element";
-
-    const cardData: CardData = {
-      cardNo: "4212 3456 7891 0006",
-      expiryDate: "03/30",
-      cvc: "737",
-    };
-    // const cardData: CardData = {
-    //   cardNo: adyenTestCard,
-    //   expiryDate: adyenExpiryDate,
-    //   cvc: adyenCvc,
-    // }
-    changeObjectKeyValue(
-      createPaymentBody,
-      "profile_id",
-      Cypress.env("PROFILE_ID")
-    );
-    changeObjectKeyValue(createPaymentBody, "authentication_type", "three_ds");
-    createPaymentBody["request_external_three_ds_authentication"] = true;
-
-    beforeEach(() => {
-      getIframeBody = () => cy.iframe(iframeSelector);
-      cy.createPaymentIntent(secretKey, createPaymentBody).then(() => {
-        cy.getGlobalState("clientSecret").then((clientSecret) => {
-          cy.visit(getClientURL(clientSecret, publishableKey));
-        });
+    "profile_id",
+    Cypress.env("PROFILE_ID")
+  );
+  changeObjectKeyValue(createPaymentBody, "authentication_type", "three_ds");
+  createPaymentBody["request_external_three_ds_authentication"] = true;
+
+  beforeEach(() => {
+    getIframeBody = () => cy.iframe(iframeSelector);
+    cy.createPaymentIntent(secretKey, createPaymentBody).then(() => {
+      cy.getGlobalState("clientSecret").then((clientSecret) => {
+        cy.visit(getClientURL(clientSecret, publishableKey));
       });
     });
-
-    // Test for rendering the correct page title
-    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");
-    });
-
-    // Test to fill in card details and complete payment
-    it("should check card payment for adyen connector 3DS flow", function () {
-      cy.fillCardDetails(iframeSelector, cardData);
-
-      // Validate URL redirection to Adyen connector for 3DS Auth
-      cy.url()
-        .should("include", "adyen.com")
-        .then((url) => {
-          // Log the URL to the Cypress command log
-          cy.log(`Current URL: ${url}`);
-        });
-
-      cy.wait(5000);
-      cy.get("#root").should("be.ok");
-
-      // Interact with the 3DS secure authentication iframe
-      cy.iframe(".adyen-checkout__iframe").find("[name=answer]").type("password");
-
-      cy.iframe(".adyen-checkout__iframe").find("#buttonSubmit").click();
-      cy.wait(2000); // Wait for confirmation message to display
-      cy.contains("Thanks for your order!").should("be.visible");
-    });
   });
-
+
+  // Test for rendering the correct page title
+  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");
+  });
+
+  // Test to fill in card details and complete payment
+  it("should check card payment for adyen connector 3DS flow", function () {
+    cy.fillCardDetails(iframeSelector, cardData);
+
+    // Validate URL redirection to Adyen connector for 3DS Auth
+    cy.url()
+      .should("include", "adyen.com")
+      .then((url) => {
+        // Log the URL to the Cypress command log
+        cy.log(`Current URL: ${url}`);
+      });
+
+    cy.wait(5000);
+    cy.get("#root").should("be.ok");
+
+    // Interact with the 3DS secure authentication iframe
+    cy.iframe(".adyen-checkout__iframe").find("[name=answer]").type("password");
+
+    cy.iframe(".adyen-checkout__iframe").find("#buttonSubmit").click();
+    cy.wait(2000); // Wait for confirmation message to display
+    cy.contains("Thanks for your order!").should("be.visible");
+  });
+});

cypress-tests/cypress/support/commands.ts

@@ -24,7 +24,7 @@
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 import "cypress-iframe";
-import { createPaymentBody } from "./utils"
+import { createPaymentBody } from "./utils";
 import * as testIds from "../../../src/Utilities/TestUtils.bs";
 // commands.js or your custom support file
 const iframeSelector =
@@ -146,44 +146,55 @@ Cypress.Commands.add(
   }
 );
 
-
-Cypress.Commands.add("createPaymentIntent", (secretKey: string, createPaymentBody: any) => {
-  return cy
-    .request({
-      method: "POST",
-      url: "https://sandbox.hyperswitch.io/payments",
-      headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json",
-        "api-key": secretKey,
-      },
-      body: JSON.stringify(createPaymentBody),
-    })
-    .then((response) => {
-      expect(response.headers["content-type"]).to.include("application/json");
-      expect(response.body).to.have.property("client_secret");
-      const clientSecret = response.body.client_secret;
-      cy.log(clientSecret);
-      cy.log(response.toString());
-
-      globalState["clientSecret"] = clientSecret;
-    });
-});
+Cypress.Commands.add(
+  "createPaymentIntent",
+  (secretKey: string, createPaymentBody: any) => {
+    return cy
+      .request({
+        method: "POST",
+        url: "https://sandbox.hyperswitch.io/payments",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          "api-key": secretKey,
+        },
+        body: JSON.stringify(createPaymentBody),
+      })
+      .then((response) => {
+        expect(response.headers["content-type"]).to.include("application/json");
+        expect(response.body).to.have.property("client_secret");
+        const clientSecret = response.body.client_secret;
+        cy.log(clientSecret);
+        cy.log(response.toString());
+
+        globalState["clientSecret"] = clientSecret;
+      });
+  }
+);
 
 Cypress.Commands.add("getGlobalState", (key: any) => {
   return globalState[key];
 });
 
-Cypress.Commands.add("fillCardDetails", (iframeSelector: string, cardData: any) => {
-  const getIframeBody = () => cy.iframe(iframeSelector);
-
-  // Find and interact with card details input fields within the iframe
-  getIframeBody().find(`[data-testid=${testIds.addNewCardIcon}]`).click();
-  getIframeBody().find("[data-testid=cardNoInput]").type(cardData.cardNo);
-  getIframeBody().find("[data-testid=expiryInput]").type(cardData.expiryDate);
-  getIframeBody().find("[data-testid=cvvInput]").should("be.ok").type(cardData.cvc);
-
-  // Submit the payment details
-  getIframeBody().get("#submit").click();
-});
-
+Cypress.Commands.add(
+  "fillCardDetails",
+  (iframeSelector: string, cardData: any) => {
+    const getIframeBody = () => cy.iframe(iframeSelector);
+
+    // Find and interact with card details input fields within the iframe
+    getIframeBody().find(`[data-testid=${testIds.addNewCardIcon}]`).click();
+    getIframeBody()
+      .find(`[data-testid=${testIds.cardNoInputTestId}]`)
+      .type(cardData.cardNo);
+    getIframeBody()
+      .find(`[data-testid=${testIds.expiryInputTestId}]`)
+      .type(cardData.expiryDate);
+    getIframeBody()
+      .find(`[data-testid=${testIds.cardCVVInputTestId}]`)
+      .should("be.ok")
+      .type(cardData.cvc);
+
+    // Submit the payment details
+    getIframeBody().get("#submit").click();
+  }
+);