test: add 3DS flow E2E test for card payments for Adyen connector #754

kamini08 · 2024-10-26T05:16:45Z

Type of Change

Description

This PR introduces an end-to-end test for the 3DS flow of card payments using the Adyen connector. The test ensures that the 3DS authentication process is correctly implemented and functions as expected during the payment flow. It simulates user interactions with the payment interface, verifies the handling of 3DS challenges, and ensures the transaction completes successfully.

Motivation and Context

This change is required to validate the implementation of 3DS card payments, ensuring compliance with security standards and enhancing the reliability of payment transactions. It addresses the need for automated testing in the payment workflow, reducing the risk of issues in production.

Closes [CYPRESS] Add e2e test for card payment for Adyen Connector for 3DS Flow hyperswitch#6080

How did you test it?

Cypress

Checklist

I ran npm run re:build
I reviewed submitted code
I added unit tests for my changes where possible

fix #6080

… connector 3DS flow e2e test

semanticdiff-com · 2024-10-26T05:16:48Z

Review changes with

Changed Files

File	Status
package-lock.json	76% smaller
cypress-tests/cypress/support/commands.ts	70% smaller
cypress-tests/package-lock.json	8% smaller
cypress-tests/cypress/e2e/card-payment-adyen-connector-3ds-flow.cy.ts	0% smaller
cypress-tests/cypress/support/types.ts	0% smaller
cypress-tests/package.json	0% smaller

Sanskar2001 · 2024-11-04T11:27:26Z

cypress-tests/package.json

@@ -15,7 +15,7 @@
  "author": "juspay/hyperswitch-web-sdk",
  "license": "ISC",
  "devDependencies": {
-    "cypress": "^13.13.2",
+    "cypress": "^13.15.1",


Suggested change

"cypress": "^13.15.1",

"cypress": "^13.13.2",

This change is not needed

Sanskar2001 · 2024-11-04T11:27:51Z

cypress-tests/package.json

@@ -15,7 +15,7 @@
  "author": "juspay/hyperswitch-web-sdk",
  "license": "ISC",
  "devDependencies": {
-    "cypress": "^13.13.2",
+    "cypress": "^13.15.1",


This change is not needed

Sanskar2001 · 2024-11-04T11:28:23Z

cypress-tests/cypress/support/types.ts

+            fillCardDetails(
+                selector: string,
+                cardData: CardData
+              ): Chainable<Response<any>>


Suggested change

fillCardDetails(

selector: string,

cardData: CardData

): Chainable<Response<any>>

Sanskar2001 · 2024-11-04T11:30:08Z

cypress-tests/cypress/support/commands.ts

+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;
+      });
+  }
+);


This is not needed, please revert this change

Sanskar2001 · 2024-11-04T11:41:18Z

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

+  const cardData: CardData = {
+    cardNo: adyenTestCard,
+    expiryDate: "03/30",
+    cvc: "737",
+  };


Move this to support/utils.ts

Sanskar2001 · 2024-11-04T11:41:30Z

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

+  // const cardData: CardData = {
+  //   cardNo: adyenTestCard,
+  //   expiryDate: adyenExpiryDate,
+  //   cvc: adyenCvc,
+  // }


remove the comments

Sanskar2001 · 2024-11-04T11:45:55Z

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

+
+  // Test to fill in card details and complete payment
+  it("should check card payment for adyen connector 3DS flow", function () {
+    cy.fillCardDetails(iframeSelector, cardData);


Suggested change

cy.fillCardDetails(iframeSelector, cardData);

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);

getIframeBody().get("#submit").click();

Sanskar2001 · 2024-11-04T11:49:51Z

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

+        cy.log(`Current URL: ${url}`);
+      });
+
+    cy.wait(5000);


Suggested change

cy.wait(5000);

Why is this required? Can we please remove this?

Sanskar2001 · 2024-11-04T11:50:42Z

cypress-tests/cypress/support/commands.ts

+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();
+  }
+);


Suggested change

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();

}

);

This is not needed, please revert this change

Sanskar2001 · 2024-11-04T11:51:11Z

cypress-tests/cypress/support/commands.ts

+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;
+      });
+  }
+);


Suggested change

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;

});

}

);

Sanskar2001 · 2024-11-04T11:52:27Z

package-lock.json

Please revert back any changes in package-lock.json

kamini08 added 2 commits October 26, 2024 01:56

feat(cypress-tests): add cypress test for adyen 3DS card payment flow

d21029c

fix #6080

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

2052a9d

… connector 3DS flow e2e test

kamini08 requested review from seekshiva and Sanskar2001 as code owners October 26, 2024 05:16

kamini08 changed the title ~~feat(cypress): add 3DS flow E2E test for card payments for Adyen connector~~ test: add 3DS flow E2E test for card payments for Adyen connector Oct 26, 2024

gorakhnathy7 added the Hacktoberfest Issues that are up for grabs for Hacktoberfest participants label Oct 26, 2024

gorakhnathy7 assigned kamini08 Oct 28, 2024

kamini08 had a problem deploying to Testing October 28, 2024 12:29 — with GitHub Actions Failure

PritishBudhiraja added the Testing Add this label if the PR contains Testing related changes label Oct 29, 2024

Merge branch 'main' into cypress-card-adyen-connector-3ds-flow

46d51d5

gorakhnathy7 added the hacktoberfest-accepted label Oct 31, 2024

Sanskar2001 reviewed Nov 4, 2024

View reviewed changes

Sanskar2001 requested changes Nov 4, 2024

View reviewed changes

PritishBudhiraja added the Added Comments - waiting for author Add this label when comments added in the PR and waiting for the author to get those resolved. label Nov 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

test: add 3DS flow E2E test for card payments for Adyen connector #754

test: add 3DS flow E2E test for card payments for Adyen connector #754

kamini08 commented Oct 26, 2024 •

edited

Loading

semanticdiff-com bot commented Oct 26, 2024 •

edited

Loading

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

Sanskar2001 Nov 4, 2024

test: add 3DS flow E2E test for card payments for Adyen connector #754

Are you sure you want to change the base?

test: add 3DS flow E2E test for card payments for Adyen connector #754

Conversation

kamini08 commented Oct 26, 2024 • edited Loading

Type of Change

Description

Motivation and Context

How did you test it?

Checklist

semanticdiff-com bot commented Oct 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kamini08 commented Oct 26, 2024 •

edited

Loading

semanticdiff-com bot commented Oct 26, 2024 •

edited

Loading