Update e2e test for new UI

tests/e2e/fixtures/base-page.ts

@@ -4,7 +4,6 @@ import { ProductPage } from "../pages/product-page";
 import { CheckoutPage } from "../pages/checkout-page";
 import { HostedPaymentsPage } from "../pages/hosted-payments-page";
 import { MockUkBankPage } from "../pages/mock-uk-bank-page";
-import { PaymentConfirmationPage } from "../pages/payment-confirmation-page";
 import { MockUkBankAccountsPage } from "../pages/mock-uk-bank-accounts-page";
 import { OrderConfirmationPage } from "../pages/order-confirmation-page";
 
@@ -14,7 +13,6 @@ export const test = base.extend<{
     hostedPaymentsPage: HostedPaymentsPage;
     mockUkBankPage: MockUkBankPage;
     mockUkBankAccountsPage: MockUkBankAccountsPage;
-    paymentConfirmationPage: PaymentConfirmationPage;
     orderConfirmationPage: OrderConfirmationPage;
 
 }>({
@@ -33,10 +31,7 @@ export const test = base.extend<{
     mockUkBankAccountsPage: async ({ page }, use) => {
         await use(new MockUkBankAccountsPage(page));
     },
-    paymentConfirmationPage: async ({ page }, use) => {
-        await use(new PaymentConfirmationPage(page));
-    },
     orderConfirmationPage: async ({ page }, use) => {
         await use(new OrderConfirmationPage(page));
     },
-});
+});

tests/e2e/magento-e2e-tests.spec.ts → tests/e2e/magento-e2e-tests-no-widget.spec.ts

@@ -9,14 +9,13 @@ test.describe('Truelayer magento plugin E2E Tests', () => {
         hostedPaymentsPage,
         mockUkBankPage,
         mockUkBankAccountsPage,
-        paymentConfirmationPage,
         orderConfirmationPage,
     }) => {
         // arrange
         await productPage.navigateTo();
         await productPage.addToCart();
         await checkoutPage.navigateToShippingStep();
-        await checkoutPage.fillShippingDetailsAndSubmit('[email protected]');
+        await checkoutPage.fillShippingDetailsAndSubmit('[email protected]', isMobile);
         await checkoutPage.clickPaymentMethod();
         await checkoutPage.clickPlaceOrderButton();
 
@@ -28,7 +27,6 @@ test.describe('Truelayer magento plugin E2E Tests', () => {
         }
         await mockUkBankPage.enterOnlineBankingDetailsAndContinue();
         await mockUkBankAccountsPage.selectAccountAndContinue();
-        // await paymentConfirmationPage.waitForProcessingAndContinue();
         await orderConfirmationPage.waitForProcessingAndReturnToStore();
     })
 });

tests/e2e/pages/checkout-page.ts

@@ -24,7 +24,7 @@ export class CheckoutPage {
 
     // Methods
 
-    async fillShippingDetailsAndSubmit(email: string) {
+    async fillShippingDetailsAndSubmit(email: string, isMobile: boolean = false) {
         await this.emailField().isVisible();
         await this.emailField().fill(email);
         await this.firstNameField().isVisible();
@@ -41,6 +41,9 @@ export class CheckoutPage {
         await this.addressField().fill('10 Downing Street')
         await this.postcodeField().isVisible();
         await this.postcodeField().fill('SW1A 2AB');
+        if (isMobile) {
+            await this.page.locator('body').click({position: {x: 0, y: 0}});
+        }
 
         await this.submitShippingInfoAndWaitForPageLoad();
     }
@@ -52,11 +55,9 @@ export class CheckoutPage {
     }
 
     async submitShippingInfoAndWaitForPageLoad() {
-        await this.nextStepButton().isEnabled();
+        await expect(this.nextStepButton()).toBeEnabled({timeout: 5000});
         await this.nextStepButton().click();
-        await this.page.waitForSelector('.loading-mask', { state: 'visible' });
-        await this.page.waitForSelector('.loading-mask', { state: 'hidden' });
-        await this.page.waitForSelector(this.paymentMethodSelector, { state: 'visible' });
+        await this.page.waitForSelector(this.paymentMethodSelector, { state: 'visible', timeout: 15000 });
     }
 
     async clickPaymentMethod() {
@@ -72,4 +73,4 @@ export class CheckoutPage {
         await this.placeOrderButton().isEnabled();
         await this.placeOrderButton().click();
     }
-} 
+}

tests/e2e/pages/hosted-payments-page.ts

@@ -8,9 +8,9 @@ export class HostedPaymentsPage {
     }
 
     // Locators
-    mockBank = () => this.page.getByLabel('Select Mock UK Payments - Redirect Flow', { exact: true });
-    continueButton = () => this.page.getByTestId('confirm-redirect-button');
-    continueOnDesktopButton = () => this.page.getByTestId('continue-desktop');
+    mockBank = () => this.page.getByText('Mock UK Payments - Redirect Flow', { exact: true });
+    continueButton = () => this.page.getByTestId('go-to-bank-button');
+    continueOnDesktopButton = () => this.page.getByText('on this device');
 
     // Methods
     async selectMockBankAndContinueOnDesktop() {
@@ -29,4 +29,4 @@ export class HostedPaymentsPage {
         await this.continueButton().isVisible();
         await this.continueButton().click();
     }
-}
+}

tests/e2e/pages/order-confirmation-page.ts

@@ -14,6 +14,10 @@ export class OrderConfirmationPage {
     // Methods
     async waitForProcessingAndReturnToStore() {
         await this.paymentBeingProcessedText().isVisible();
-        await expect(this.orderConfirmedText()).toBeVisible({timeout: 90000});
+        await this.expectOrderConfirmed(90000);
     }
-}
+
+    async expectOrderConfirmed(timeout: number) {
+        await expect(this.orderConfirmedText()).toBeVisible({timeout});
+    }
+}

tests/e2e/pages/product-page.ts

@@ -17,11 +17,11 @@ export class ProductPage {
         await this.addToCartButton().click();
         const cartCounter = this.cartCounter()
         await cartCounter.isVisible();
-        await expect(cartCounter).toHaveText('1', {timeout: 1000})
+        await expect(cartCounter).toHaveText('1', {timeout: 5000})
     }
 
     async navigateTo(){
         const url = `${process.env.E2E_TEST_URL as string}/catalog/product/view/id/1/s/test-product/category/2/`;
         await this.page.goto(url);
     }
-}
+}