Merge branch 'main' into feauture/payment-void-on-failure

.github/workflows/e2e.yaml

@@ -15,6 +15,7 @@ concurrency:
 jobs:
   end-2-end-tests:
     strategy:
+      fail-fast: false
       matrix:
         include:
           - MAGENTO_VERSION: 2.4.5
@@ -56,16 +57,14 @@ jobs:
       - name: Prepare logs
         if: always()
         run: |
-            mkdir -p logs
+            mkdir -p logs/magento
             docker-compose logs > logs/container_logs.log
-            docker cp magento-plugin-magento-1:/bitnami/magento/var/log logs
+            docker cp magento-plugin-magento-1:/bitnami/magento/var/log logs/magento
       - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: results-${{ matrix.MAGENTO_VERSION }}-${{ github.run_number }}
           path: |
             playwright-report/
-            var/log/
-            magento.log
-            nginx-proxy.log
+            logs/
 

Test/End-2-End/Components/Cart.js

@@ -1,13 +1,16 @@
-import {expect} from "@playwright/test";
+import { expect } from "@playwright/test";
+import GoTo from "./GoTo";
 
 export default class Cart {
-    constructor(page) {
-        this.page = page;
-    }
+  constructor(page) {
+    this.page = page;
+  }
 
-    async addStandardItemToCart() {
-        await this.page.goto('./affirm-water-bottle.html');
-        await this.page.getByRole("button", {name: "Add to cart"}).click();
-        await expect(this.page.getByText(/You added [A-Za-z0-9 ]+ to your shopping cart/i)).toBeVisible();
-    }
+  async addStandardItemToCart() {
+    await new GoTo(this.page).product.standard();
+    await this.page.getByRole("button", { name: "Add to cart" }).click();
+    await expect(
+      this.page.getByText(/You added [A-Za-z0-9 ]+ to your shopping cart/i),
+    ).toBeVisible();
+  }
 }

Test/End-2-End/Components/CheckoutPage.js

@@ -1,22 +1,50 @@
-import {expect} from "@playwright/test";
+import { expect } from "@playwright/test";
 
 export default class CheckoutPage {
-    constructor(page) {
-        this.page = page;
-    }
-
-    async getGrandTotalElement() {
-        return await this.page.getByRole('row', { name: 'Order Total £' }).locator('span')
-    }
-    async getGrandTotalValue(stripSign = false) {
-        const value = await (await this.getGrandTotalElement()).innerText();
-        return stripSign ? value.replace('£', '') : value;
-    }
-
-    async applyDiscountCode(discountCode) {
-        await this.page.getByText('Apply Discount Code').click();
-        await this.page.getByPlaceholder('Enter discount code').fill(discountCode);
-        await this.page.getByRole('button', { name: 'Apply Discount' }).click();
-        await expect(await this.page.getByText('Your coupon was successfully applied.')).toBeVisible();
-    }
+  constructor(page) {
+    this.page = page;
+  }
+
+  async getGrandTotalElement() {
+    return await this.page
+      .getByRole("row", { name: "Order Total £" })
+      .locator("span");
+  }
+  async getGrandTotalValue(stripSign = false) {
+    const value = await (await this.getGrandTotalElement()).innerText();
+    return stripSign ? value.replace("£", "") : value;
+  }
+
+  async applyDiscountCode(discountCode) {
+    await this.page.getByText("Apply Discount Code").click();
+    await this.page.getByPlaceholder("Enter discount code").fill(discountCode);
+    await this.page.getByRole("button", { name: "Apply Discount" }).click();
+    await expect(
+      await this.page.getByText("Your coupon was successfully applied."),
+    ).toBeVisible();
+  }
+
+  async selectPayByBank() {
+    await this.page.getByLabel("Pay by Bank").click();
+  }
+
+  async selectRvvupTestMethod() {
+    await this.page.getByLabel("Rvvup Payment Method").click();
+  }
+
+  async selectClearpay() {
+    await this.page.getByLabel("Clearpay").click();
+  }
+
+  async selectCard() {
+    await this.page.getByLabel("Pay by Card").click();
+  }
+
+  async selectPaypal() {
+    await this.page.getByLabel("PayPal", { exact: true }).click();
+  }
+
+  async pressPlaceOrder() {
+    await this.page.getByRole("button", { name: "Place order" }).click();
+  }
 }

Test/End-2-End/Components/GoTo.js

@@ -0,0 +1,23 @@
+export default class GoTo {
+  constructor(page) {
+    this.page = page;
+    this.product = new GoToProduct(page);
+  }
+
+  async checkout() {
+    await this.page.goto("./checkout");
+  }
+
+  async cart() {
+    await this.page.goto("./checkout/cart");
+  }
+}
+class GoToProduct {
+  constructor(page) {
+    this.page = page;
+  }
+
+  async standard() {
+    await this.page.goto("./affirm-water-bottle.html");
+  }
+}

Test/End-2-End/Components/OrderConfirmation.js

@@ -0,0 +1,20 @@
+import { expect } from "@playwright/test";
+
+export default class OrderConfirmation {
+  constructor(page) {
+    this.page = page;
+  }
+
+  async expectOnOrderConfirmation(isPending = false) {
+    await expect(
+      this.page.getByRole("heading", { name: "Thank you for your purchase!" }),
+    ).toBeVisible();
+    if (isPending) {
+      await expect(
+        this.page.getByText(
+          "Your payment is being processed and is pending confirmation. You will receive an email confirmation when the payment is confirmed.",
+        ),
+      ).toBeVisible();
+    }
+  }
+}

Test/End-2-End/Components/PaymentMethods/CardCheckout.js

@@ -0,0 +1,72 @@
+import CheckoutPage from "../CheckoutPage";
+
+export default class CardCheckout {
+  constructor(page) {
+    this.page = page;
+    this.checkoutPage = new CheckoutPage(page);
+  }
+
+  async checkout() {
+    await this.checkoutPage.selectCard();
+    // Credit card form
+    await this.page
+      .frameLocator(".st-card-number-iframe")
+      .getByLabel("Card Number")
+      .fill("4111 1111 1111 1111");
+    await this.page
+      .frameLocator(".st-expiration-date-iframe")
+      .getByLabel("Expiration Date")
+      .fill("1233");
+    await this.page
+      .frameLocator(".st-security-code-iframe")
+      .getByLabel("Security Code")
+      .fill("123");
+
+    await this.checkoutPage.pressPlaceOrder();
+    // OTP form
+    await this.page.frameLocator('iframe[title="Bank Authentication"]').getByPlaceholder(' Enter Code Here')
+      .fill("1234");
+    await this.page
+      .frameLocator('iframe[title="Bank Authentication"]')
+      .getByRole("button", { name: "SUBMIT" })
+      .click();
+  }
+
+  async checkoutUsingFrictionless3DsCard() {
+    await this.checkoutPage.selectCard();
+    // Credit card form
+    await this.page
+      .frameLocator(".st-card-number-iframe")
+      .getByLabel("Card Number")
+      .fill("4000 0000 0000 2701");
+    await this.page
+      .frameLocator(".st-expiration-date-iframe")
+      .getByLabel("Expiration Date")
+      .fill("1233");
+    await this.page
+      .frameLocator(".st-security-code-iframe")
+      .getByLabel("Security Code")
+      .fill("123");
+
+    await this.checkoutPage.pressPlaceOrder();
+  }
+
+  async checkoutUsingInvalidCard() {
+    await this.checkoutPage.selectCard();
+    // Credit card form
+    await this.page
+      .frameLocator(".st-card-number-iframe")
+      .getByLabel("Card Number")
+      .fill("4000 0000 0000 2537");
+    await this.page
+      .frameLocator(".st-expiration-date-iframe")
+      .getByLabel("Expiration Date")
+      .fill("1233");
+    await this.page
+      .frameLocator(".st-security-code-iframe")
+      .getByLabel("Security Code")
+      .fill("123");
+
+    await this.checkoutPage.pressPlaceOrder();
+  }
+}

Test/End-2-End/Components/PaymentMethods/ClearpayCheckout.js

@@ -0,0 +1,27 @@
+import CheckoutPage from "../CheckoutPage";
+
+export default class ClearpayCheckout {
+  constructor(page) {
+    this.page = page;
+    this.checkoutPage = new CheckoutPage(page);
+  }
+
+  /*
+   * On the checkout page, place a pay by bank order and complete it
+   */
+  async checkout() {
+    await this.checkoutPage.selectClearpay();
+    await this.checkoutPage.pressPlaceOrder();
+
+    const clearpayFrame = this.page.frameLocator(
+      "#rvvup_iframe-rvvup_CLEARPAY",
+    );
+    await clearpayFrame.getByRole("button", { name: "Accept All" }).click();
+
+    await clearpayFrame
+      .getByTestId("login-password-input")
+      .fill("XHvZsaUWh6K-BPWgXY!NJBwG");
+    await clearpayFrame.getByTestId('login-password-button').click();
+    await clearpayFrame.getByTestId('summary-button').click();
+  }
+}

Test/End-2-End/Components/PaymentMethods/PayByBankCheckout.js

@@ -0,0 +1,89 @@
+import { expect } from "@playwright/test";
+import CheckoutPage from "../CheckoutPage";
+
+export default class PayByBankCheckout {
+  constructor(page) {
+    this.page = page;
+    this.checkoutPage = new CheckoutPage(page);
+  }
+
+  /*
+   * On the checkout page, place a pay by bank order and complete it
+   */
+  async checkout() {
+    await this.checkoutPage.selectPayByBank();
+    await this.checkoutPage.pressPlaceOrder();
+
+    const frame = this.page.frameLocator("#rvvup_iframe-rvvup_YAPILY");
+    await frame.getByRole("button", { name: "Mock Bank" }).click();
+    await frame.getByRole("button", { name: "Log in on this device" }).click();
+  }
+
+  async decline() {
+    await this.checkoutPage.selectPayByBank();
+    await this.checkoutPage.pressPlaceOrder();
+
+    const frame = this.page.frameLocator("#rvvup_iframe-rvvup_YAPILY");
+    await frame.getByRole("button", { name: "Natwest" }).click();
+    await frame.getByRole("button", { name: "Log in on this device" }).click();
+
+    await this.page.getByRole("button", { name: "Cancel" }).click();
+    await expect(this.page.getByText("Payment Declined")).toBeVisible();
+  }
+
+  async declineInsufficientFunds() {
+    await this.checkoutPage.selectPayByBank();
+    await this.checkoutPage.pressPlaceOrder();
+
+    const frame = this.page.frameLocator("#rvvup_iframe-rvvup_YAPILY");
+    await frame.getByRole("button", { name: "Natwest" }).click();
+    await frame.getByRole("button", { name: "Log in on this device" }).click();
+
+    await this.page
+      .locator("input#customer-number")
+      .pressSequentially("123456789012");
+    await this.page.locator("button#customer-number-login").click();
+
+    await this.page.locator("input#pin-1").pressSequentially("5");
+    await this.page.locator("input#pin-2").pressSequentially("7");
+    await this.page.locator("input#pin-3").pressSequentially("2");
+    await this.page.locator("input#password-1").pressSequentially("4");
+    await this.page.locator("input#password-2").pressSequentially("3");
+    await this.page.locator("input#password-3").pressSequentially("6");
+    await this.page.getByRole("button", { name: "Continue" }).click();
+
+    await this.page
+      .locator("dl")
+      .filter({ hasText: "Account NameSydney Beard (Personal Savings)" })
+      .getByRole("button", { name: "Select account" })
+      .click();
+    await this.page.getByRole("button", { name: "Confirm payment" }).click();
+
+    await expect(this.page.getByText(/Insufficient funds/)).toBeVisible();
+  }
+
+  async exitModalBeforeCompletingTransaction() {
+    await this.checkoutPage.selectPayByBank();
+    await this.checkoutPage.pressPlaceOrder();
+
+    const frame = this.page.frameLocator("#rvvup_iframe-rvvup_YAPILY");
+    await frame.getByRole("button", { name: "Natwest" }).click();
+
+    // we want to open modal, open natwest in a new tab, close modal,
+    // complete natwest transaction, see where the redirect sends us to
+    await frame.getByRole("button", { name: "Log in on this device" }).click();
+
+    await this.page
+      .locator("input#customer-number")
+      .pressSequentially("123456789012");
+    await this.page.locator("button#customer-number-login").click();
+
+    await this.page.locator("input#pin-1").pressSequentially("5");
+    await this.page.locator("input#pin-2").pressSequentially("7");
+    await this.page.locator("input#pin-3").pressSequentially("2");
+    await this.page.locator("input#password-1").pressSequentially("4");
+    await this.page.locator("input#password-2").pressSequentially("3");
+    await this.page.locator("input#password-3").pressSequentially("6");
+    await this.page.getByRole("button", { name: "Continue" }).click();
+  }
+}