[ECP-9498] Introduce test case for shopper cancellation (#135)

Co-authored-by: Can Demiralp <[email protected]>

projects/common/redirect/PayPalPaymentPage.js

@@ -8,11 +8,11 @@ export class PayPalPaymentPage {
     this.passwordInput = page.locator("#password");
     this.loginButton = page.locator("#btnLogin");
     this.agreeAndPayNowButton = page.locator("#payment-submit-btn");
+    this.cancelButton = page.locator("#cancelLink");
 
     this.loggingInAnimation = page.locator("#app-loader");
     this.cookiesWrapper = page.locator("#ccpaCookieBanner");
     this.cookiesDeclineButton = this.cookiesWrapper.getByRole('button', { name: 'decline' });
-
   }
 
   async loginToPayPal(username, password) {
@@ -35,12 +35,19 @@ export class PayPalPaymentPage {
 
     await this.loggingInAnimation.waitFor({ state: "visible", timeout: 10000 });
     await this.loggingInAnimation.waitFor({ state: "hidden", timeout: 15000 });
+
     if (await this.cookiesDeclineButton.isVisible()) {
-      await this.cookiesDeclineButton.click();
-  }
+        await this.cookiesDeclineButton.click();
+    }
+
     await this.agreeAndPay();
   }
 
+  async cancelAndGoToStore() {
+    await this.waitForPopupLoad(this.page);
+    await this.cancelButton.click();
+  }
+
   async waitForPopupLoad(page) {
     await page.waitForURL(/.*sandbox.paypal.com*/,
       {

projects/magento/pageObjects/checkout/PayPalComponentsMagento.page.js

@@ -0,0 +1,34 @@
+import { PayPalComponents } from "../../../common/checkoutComponents/PayPalComponents.js";
+import { PayPalPaymentPage } from "../../../common/redirect/PayPalPaymentPage.js";
+import { PaymentDetailsPage } from "../plugin/PaymentDetails.page.js";
+
+export class PayPalComponentsMagentoPage extends PayPalComponents {
+    constructor(page) {
+        super(page);
+        this.page = page;
+    }
+
+    async payViaPayPal(username, password) {
+        const popup = await this.initiatePayPalPopup()
+        await new PayPalPaymentPage(popup).makePayPalPayment(username, password);
+    }
+
+    async cancelPayPal() {
+        const popup = await this.initiatePayPalPopup();
+        await new PayPalPaymentPage(popup).cancelAndGoToStore();
+    }
+
+    async initiatePayPalPopup() {
+        const paymentDetailPage = new PaymentDetailsPage(this.page);
+        const payPalSection = await paymentDetailPage.selectPayPal();
+
+        await this.page.waitForLoadState("load", { timeout: 15000 });
+
+        const [popup] = await Promise.all([
+            this.page.waitForEvent("popup"),
+            payPalSection.proceedToPayPal(),
+        ]);
+
+        return popup;
+    }
+}

projects/magento/pageObjects/plugin/PaymentDetails.page.js

@@ -6,12 +6,14 @@ import { IDealComponents } from "../../../common/checkoutComponents/iDealCompone
 import { OneyComponents } from "../../../common/checkoutComponents/OneyComponents.js";
 import { GiftcardComponentsMagento } from "../checkout/GiftcardComponentsMagento.js";
 import { AmazonPayComponents } from "../../../common/checkoutComponents/AmazonPayComponents.js";
+import { expect } from "@playwright/test";
 
 export class PaymentDetailsPage {
   constructor(page) {
     this.page = page;
 
     this.emailField = page.locator("#customer-email");
+    this.errorMessage = page.locator(".message-error");
 
     this.creditCardRadioButton = page.locator("#adyen_cc");
     this.idealWrapper = page.locator("#adyen-ideal-form");
@@ -152,4 +154,11 @@ export class PaymentDetailsPage {
     await this.page.waitForLoadState("domcontentloaded", { timeout: 15000 });
     await this.activePaymentMethod.scrollIntoViewIfNeeded();
   }
+
+  async verifyPaymentRefusal() {
+    await this.page.waitForLoadState("domcontentloaded", { timeout: 15000 });
+    expect(await this.errorMessage.innerText()).toContain(
+        "The payment is REFUSED."
+    );
+  }
 }

projects/magento/tests/PayPalPayment.spec.js

@@ -6,39 +6,30 @@ import {
 } from "../helpers/ScenarioHelper.js";
 import { proceedToPaymentAs } from "../helpers/ScenarioHelper.js";
 import { PaymentDetailsPage } from "../pageObjects/plugin/PaymentDetails.page.js";
-import { PayPalPaymentPage } from "../../common/redirect/PayPalPaymentPage.js";
+import { PayPalComponentsMagentoPage } from "../pageObjects/checkout/PayPalComponentsMagento.page.js";
 
 const paymentResources = new PaymentResources();
 const users = paymentResources.guestUser;
 
 test.describe("Payment via PayPal", () => {
   test.beforeEach(async ({ page }) => {
     await goToShippingWithFullCart(page);
+    await proceedToPaymentAs(page, users.dutch);
   });
 
   test("should succeed", async ({ page }) => {
-    await proceedToPaymentAs(page, users.dutch);
-
-    await payViaPayPal(
-      page,
+    await new PayPalComponentsMagentoPage(page).payViaPayPal(
       paymentResources.payPalUserName,
       paymentResources.payPalPassword
     );
 
     await verifySuccessfulPayment(page);
   });
 
-  async function payViaPayPal(page, username, password) {
-    const paymentDetailPage = new PaymentDetailsPage(page);
-    const payPalSection = await paymentDetailPage.selectPayPal();
-
-    await page.waitForLoadState("load", { timeout: 15000 });
-
-    const [popup] = await Promise.all([
-      page.waitForEvent("popup"),
-      payPalSection.proceedToPayPal(),
-    ]);
+  test("should fail if shopper cancels", async ({ page }) => {
+    await new PayPalComponentsMagentoPage(page).cancelPayPal(page);
 
-    await new PayPalPaymentPage(popup).makePayPalPayment(username, password);
-  }
+    const paymentDetailPage = new PaymentDetailsPage(page);
+    await paymentDetailPage.verifyPaymentRefusal();
+  });
 });