create e2e test with checkout widget

Author: artyom-jaksov-tl

.github/workflows/e2e-tests.yml

@@ -91,7 +91,9 @@ jobs:
           docker exec magento bin/magento config:set payment/truelayer/payment_page_primary_color \#000000;
           docker exec magento bin/magento config:set payment/truelayer/payment_page_secondary_color \#e53935;
           docker exec magento bin/magento config:set payment/truelayer/payment_page_tertiary_color \#32329f;
-          docker exec magento bin/magento config:set payment/truelayer/specificcountry GB,IE,ES,FR,DE,NL,LT;
+          docker exec magento bin/magento config:set payment/truelayer/preselected 0;
+          docker exec magento bin/magento config:set payment/truelayer/checkout_widget_recommended 1;
+          docker exec magento bin/magento config:set payment/truelayer/checkout_widget_enabled 1;
           docker exec magento bin/magento config:set payment/truelayer/sandbox_client_id ${{ secrets.TEST_CLIENT_ID }};
           docker exec magento bin/magento config:set payment/truelayer/sandbox_key_id ${{ secrets.TEST_KID }};
           docker exec magento bin/magento config:set payment/truelayer/sandbox_private_key sandbox/default/private-key.pem;
@@ -111,5 +113,11 @@ jobs:
           docker exec -w /data/extensions/magento2 magento npx playwright install-deps
           docker exec -w /data/extensions/magento2 magento npx playwright install
 
-      - name: Run tests
-        run: docker exec --env PW_TEST_HTML_REPORT_OPEN=never -w /data/extensions/magento2 magento npx playwright test --project=chromium --reporter=line
+      - name: Run test with checkout widget
+        run: docker exec --env PW_TEST_HTML_REPORT_OPEN=never -w /data/extensions/magento2 magento npx playwright test tests/e2e/magento-e2e-tests-with-widget.spec.ts --project="chromium" --reporter=line
+
+      - name: Disable checkout widget
+        run: docker exec magento bin/magento config:set payment/truelayer/checkout_widget_enabled 0;
+
+      - name: Run test without checkout widget
+        run: docker exec --env PW_TEST_HTML_REPORT_OPEN=never -w /data/extensions/magento2 magento npx playwright test tests/e2e/magento-e2e-tests-no-widget.spec.ts --project="chromium" --reporter=line

tests/e2e/magento-e2e-tests-with-widget.spec.ts

@@ -0,0 +1,37 @@
+import { chromium, webkit } from "@playwright/test";
+import { test } from "./fixtures/base-page";
+import { MockUkBankAccountsPage } from "./pages/mock-uk-bank-accounts-page";
+import { MockUkBankPage } from "./pages/mock-uk-bank-page";
+
+test.describe('Truelayer magento plugin E2E Tests', () => {
+    test('Successful Purchase of a Product using a valid email address', async ({
+        isMobile,
+        productPage,
+        checkoutPage,
+        orderConfirmationPage,
+    }) => {
+        // arrange
+        await productPage.navigateTo();
+        await productPage.addToCart();
+        await checkoutPage.navigateToShippingStep();
+        await checkoutPage.fillShippingDetailsAndSubmit('[email protected]', isMobile);
+        await checkoutPage.clickPaymentMethod();
+        await checkoutPage.clickWidgetPayButton();
+
+        const newTab = checkoutPage.page.context().waitForEvent('page');
+
+        if (isMobile === true) {
+            await checkoutPage.selectMockBankAndContinueOnMobile();
+        }
+        else {
+            await checkoutPage.selectWidgetMockBankAndContinueOnDesktop();
+        }
+        const mockUkBankPage = new MockUkBankPage(await newTab);
+        const mockUkBankAccountsPage = new MockUkBankAccountsPage(await newTab);
+        // }
+        await mockUkBankPage.enterOnlineBankingDetailsAndContinue();
+        await mockUkBankAccountsPage.selectAccountAndContinue();
+        await checkoutPage.expectPaymentProcessingText();
+        await orderConfirmationPage.expectOrderConfirmed(30000);
+    })
+});

tests/e2e/pages/checkout-page.ts

@@ -22,6 +22,15 @@ export class CheckoutPage {
     paymentMethodButton = () => this.page.locator(this.paymentMethodSelector);
     placeOrderButton = () => this.page.getByRole('button', { name: 'Place Order' });
 
+    private widgetInitPaymentframe = () => this.page.locator('#tl-checkout-widget').contentFrame();
+    private widgetBankingModal = () => this.page.locator('#tl-hpp-next').contentFrame();
+    widgetPayButton = () => this.widgetInitPaymentframe().getByTestId('checkout-button-loaded');
+    widgetSelectBankModal = () => this.widgetInitPaymentframe().getByText('Select your bank');
+    widgetMockBank = () => this.widgetBankingModal().getByTestId('provider-list-item-mock-payments-gb-redirect');
+    widgetContinueButton = () => this.widgetBankingModal().getByTestId('go-to-bank-button');
+    widgetContinueOnDesktopButton = () => this.widgetBankingModal().getByText('on this device');
+    widgetPaymentBeingProcessedText = () => this.widgetBankingModal().getByText('confirming your payment', {exact: false})
+
     // Methods
 
     async fillShippingDetailsAndSubmit(email: string, isMobile: boolean = false) {
@@ -73,4 +82,29 @@ export class CheckoutPage {
         await this.placeOrderButton().isEnabled();
         await this.placeOrderButton().click();
     }
+
+    async clickWidgetPayButton() {
+        await expect(this.widgetPayButton()).toBeVisible({timeout: 5000});
+        await this.widgetPayButton().click();
+    }
+
+    async selectWidgetMockBankAndContinueOnDesktop() {
+        await this.selectWidgetMockBankAndContinue();
+        await this.widgetContinueOnDesktopButton().click();
+    }
+
+    async selectMockBankAndContinueOnMobile() {
+        await this.selectWidgetMockBankAndContinue();
+    }
+
+    private async selectWidgetMockBankAndContinue(){
+        await expect(this.widgetMockBank()).toBeVisible({timeout: 15000})
+        await this.widgetMockBank().click();
+        await expect(this.widgetContinueButton()).toBeVisible({timeout: 10000})
+        await this.widgetContinueButton().click();
+    }
+
+    async expectPaymentProcessingText() {
+        await expect(this.widgetPaymentBeingProcessedText()).toBeVisible({timeout: 5000});
+    }
 }