feat: add getIframeElement for accessing iframe elements

juspay · Oct 24, 2024 · 278f1b5 · 278f1b5
1 parent f53537a
commit 278f1b5
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 50 deletions.
diff --git a/cypress-tests/cypress/support/commands.ts b/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,30 +146,45 @@ 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(
+  "getIframeElement",
+  (iframeSelector, elementSelector) => {
+    return cy
+      .get(iframeSelector)
+      .its("0.contentDocument.body")
+      .should("not.be.empty")
+      .then(cy.wrap)
+      .find(elementSelector)
+      .should("be.visible");
+  }
+);
diff --git a/cypress-tests/cypress/support/types.ts b/cypress-tests/cypress/support/types.ts
@@ -1,31 +1,45 @@
-
-export { }; // indicate that file is a module
+export {}; // indicate that file is a module
 
 export type CustomerData = {
-    cardNo: string
-    cardExpiry: string
-    cardCVV: string
-    cardHolderName: string
-    email: string
-    address: string
-    city: string
-    country: string
-    state: string
-    postalCode: string
-    threeDSCardNo: string
-}
+  cardNo: string;
+  cardExpiry: string;
+  cardCVV: string;
+  cardHolderName: string;
+  email: string;
+  address: string;
+  city: string;
+  country: string;
+  state: string;
+  postalCode: string;
+  threeDSCardNo: string;
+};
 
 declare global {
-    namespace Cypress {
-        interface Chainable {
-            enterValueInIframe(selector: string, value: string): Chainable<JQuery<HTMLElement>>
-            selectValueInIframe(selector: string, value: string): Chainable<JQuery<HTMLElement>>
-            hardReload(): Chainable<JQuery<HTMLElement>>
-            testDynamicFields(
-                customerData: CustomerData, testIdsToRemoveArr: string[], isThreeDSEnabled: boolean
-            ): Chainable<JQuery<HTMLElement>>
-            createPaymentIntent(secretKey: string, createPaymentBody: Record<string, any>): Chainable<Response<any>>
-            getGlobalState(key: string): Chainable<Response<any>>
-        }
+  namespace Cypress {
+    interface Chainable {
+      enterValueInIframe(
+        selector: string,
+        value: string
+      ): Chainable<JQuery<HTMLElement>>;
+      selectValueInIframe(
+        selector: string,
+        value: string
+      ): Chainable<JQuery<HTMLElement>>;
+      hardReload(): Chainable<JQuery<HTMLElement>>;
+      testDynamicFields(
+        customerData: CustomerData,
+        testIdsToRemoveArr: string[],
+        isThreeDSEnabled: boolean
+      ): Chainable<JQuery<HTMLElement>>;
+      createPaymentIntent(
+        secretKey: string,
+        createPaymentBody: Record<string, any>
+      ): Chainable<Response<any>>;
+      getGlobalState(key: string): Chainable<Response<any>>;
+      getIframeElement(
+        iframeSelector: string,
+        elementSelector: string
+      ): Chainable<JQuery<HTMLElement>>;
     }
-}
+  }
+}