new playwright tests to replace the testcafe "usual suspects"

packages/e2e-playwright/app/config/webpack.config.js

@@ -19,8 +19,8 @@ const htmlPages = fs.readdirSync(basePageDir).map(fileName => ({
 const htmlPageGenerator = ({ id }, index) => {
     console.log('htmlPageGenerator', id, index);
     return new HTMLWebpackPlugin({
-        // make card index.html the rest of the pages will have page <lower case ID>.html
-        filename: `${id !== 'Cards' ? `${id.toLowerCase()}/` : ''}index.html`,
+        // make Dropin index.html the rest of the pages will have page <lower case ID>.html
+        filename: `${id !== 'Dropin' ? `${id.toLowerCase()}/` : ''}index.html`,
         template: path.join(__dirname, `../src/pages/${id}/${id}.html`),
         templateParameters: () => ({ htmlWebpackPlugin: { htmlPages } }),
         inject: 'body',

packages/e2e-playwright/models/card.ts

@@ -10,32 +10,51 @@ const CARD_IFRAME_LABEL = LANG['creditCard.encryptedCardNumber.aria.label'];
 const EXPIRY_DATE_IFRAME_LABEL = LANG['creditCard.encryptedExpiryDate.aria.label'];
 const CVC_IFRAME_LABEL = LANG['creditCard.encryptedSecurityCode.aria.label'];
 
+const INSTALLMENTS_PAYMENTS = LANG['installments.installments'];
+const REVOLVING_PAYMENT = LANG['installments.revolving'];
+
 class Card {
+    readonly page: Page;
+
     readonly rootElement: Locator;
     readonly rootElementSelector: string;
 
     readonly cardNumberField: Locator;
+    readonly cardNumberLabelElement: Locator;
     readonly cardNumberErrorElement: Locator;
     readonly cardNumberInput: Locator;
+    readonly brandingIcon: Locator;
 
     readonly expiryDateField: Locator;
-    readonly expiryDateErrorElement: Locator;
+    readonly expiryDateLabelText: Locator;
     readonly expiryDateInput: Locator;
+    readonly expiryDateErrorElement: Locator;
 
     readonly cvcField: Locator;
+    readonly cvcLabelText: Locator;
     readonly cvcErrorElement: Locator;
     readonly cvcInput: Locator;
 
+    readonly installmentsPaymentLabel: Locator;
+    readonly revolvingPaymentLabel: Locator;
+    readonly installmentsDropdown: Locator;
+    readonly selectorList: Locator;
+
     constructor(page: Page, rootElementSelector = '.adyen-checkout__card-input') {
+        this.page = page;
+
         this.rootElement = page.locator(rootElementSelector);
         this.rootElementSelector = rootElementSelector;
 
         /**
          * Card Number elements, in Checkout
          */
         this.cardNumberField = this.rootElement.locator('.adyen-checkout__field--cardNumber'); // Holder
+        this.cardNumberLabelElement = this.cardNumberField.locator('.adyen-checkout__label');
         this.cardNumberErrorElement = this.cardNumberField.locator('.adyen-checkout__error-text');
 
+        this.brandingIcon = this.rootElement.locator('.adyen-checkout__card__cardNumber__brandIcon');
+
         /**
          * Card Number elements, in iframe
          */
@@ -46,7 +65,9 @@ class Card {
          * Expiry Date elements, in Checkout
          */
         this.expiryDateField = this.rootElement.locator('.adyen-checkout__field--expiryDate'); // Holder
+        this.expiryDateLabelText = this.expiryDateField.locator('.adyen-checkout__label__text');
         this.expiryDateErrorElement = this.expiryDateField.locator('.adyen-checkout__error-text'); // Related error element
+        // Related error element
 
         /**
          * Expiry Date elements, in iframe
@@ -58,13 +79,22 @@ class Card {
          * Security code elements, in Checkout
          */
         this.cvcField = this.rootElement.locator('.adyen-checkout__field--securityCode'); // Holder
+        this.cvcLabelText = this.cvcField.locator('.adyen-checkout__label__text');
         this.cvcErrorElement = this.cvcField.locator('.adyen-checkout__error-text'); // Related error element
 
         /**
          * Security code elements, in iframe
          */
         const cvcIframe = this.rootElement.frameLocator(`[title="${CVC_IFRAME_TITLE}"]`);
         this.cvcInput = cvcIframe.locator(`input[aria-label="${CVC_IFRAME_LABEL}"]`);
+
+        /**
+         * Installments related elements
+         */
+        this.installmentsPaymentLabel = this.rootElement.getByText(INSTALLMENTS_PAYMENTS);
+        this.revolvingPaymentLabel = this.rootElement.getByText(REVOLVING_PAYMENT);
+        this.installmentsDropdown = this.rootElement.locator('.adyen-checkout__dropdown__button');
+        this.selectorList = this.rootElement.getByRole('listbox');
     }
 
     async isComponentVisible() {
@@ -81,13 +111,26 @@ class Card {
         await this.cardNumberInput.clear();
     }
 
+    async deleteExpiryDate() {
+        await this.expiryDateInput.clear();
+    }
+
+    async deleteCvc() {
+        await this.cvcInput.clear();
+    }
+
     async typeExpiryDate(expiryDate: string) {
         await this.expiryDateInput.type(expiryDate, { delay: USER_TYPE_DELAY });
     }
 
     async typeCvc(cvc: string) {
         await this.cvcInput.type(cvc, { delay: USER_TYPE_DELAY });
     }
+
+    async selectListItem(who: string) {
+        const listItem = this.selectorList.locator(`#listItem-${who}`);
+        return listItem;
+    }
 }
 
 export { Card };

packages/e2e-playwright/models/issuer-list.ts

@@ -2,7 +2,6 @@ import { Locator, Page } from '@playwright/test';
 import { USER_TYPE_DELAY } from '../tests/utils/constants';
 
 const SELECTOR_DELAY = 300;
-const KEYBOARD_DELAY = 300;
 
 class IssuerList {
     readonly rootElement: Locator;
@@ -43,18 +42,6 @@ class IssuerList {
     async typeOnSelectorField(filter: string) {
         await this.selectorCombobox.type(filter, { delay: USER_TYPE_DELAY });
     }
-
-    async pressKeyboardToNextItem() {
-        await this.page.keyboard.press('ArrowDown', { delay: KEYBOARD_DELAY });
-    }
-
-    async pressKeyboardToPreviousItem() {
-        await this.page.keyboard.press('ArrowDown', { delay: KEYBOARD_DELAY });
-    }
-
-    async pressKeyboardToSelectItem() {
-        await this.page.keyboard.press('Enter', { delay: KEYBOARD_DELAY });
-    }
 }
 
 export { IssuerList };

packages/e2e-playwright/pages/cards/card.avs.page.ts

@@ -14,7 +14,7 @@ class CardAvsPage {
     }
 
     async goto(url?: string) {
-        await this.page.goto('http://localhost:3024/');
+        await this.page.goto('http://localhost:3024/cards');
     }
 }
 

packages/e2e-playwright/pages/cards/card.fixture.ts

@@ -1,4 +1,4 @@
-import { test as base, expect } from '@playwright/test';
+import { test as base, expect, Page } from '@playwright/test';
 import { CardPage } from './card.page';
 import { CardAvsPage } from './card.avs.page';
 import { binLookupMock } from '../../mocks/binLookup/binLookup.mock';
@@ -8,13 +8,14 @@ type Fixture = {
     cardPage: CardPage;
     cardAvsPage: CardAvsPage;
     cardLegacyInputModePage: CardPage;
+    cardBrandingPage: CardPage;
+    cardExpiryDatePoliciesPage: CardPage;
+    cardInstallmentsPage: CardPage;
 };
 
 const test = base.extend<Fixture>({
     cardPage: async ({ page }, use) => {
-        const cardPage = new CardPage(page);
-        await cardPage.goto();
-        await use(cardPage);
+        await useCardPage(page, use);
     },
 
     cardAvsPage: async ({ page }, use) => {
@@ -24,20 +25,66 @@ const test = base.extend<Fixture>({
                 "window.cardConfig = { billingAddressRequired: true, billingAddressRequiredFields: ['street', 'houseNumberOrName', 'postalCode', 'city']};"
         });
 
-        const cardAvsPage = new CardAvsPage(page);
-        await cardAvsPage.goto();
-        await use(cardAvsPage);
+        // @ts-ignore
+        await useCardPage(page, use, CardAvsPage);
     },
 
     cardLegacyInputModePage: async ({ page }, use) => {
         await page.addInitScript({
             content: 'window.cardConfig = { legacyInputMode: true}'
         });
 
-        const cardPage = new CardPage(page);
-        await cardPage.goto();
-        await use(cardPage);
+        await useCardPage(page, use);
+    },
+
+    cardBrandingPage: async ({ page }, use) => {
+        const brands = JSON.stringify({ brands: ['mc', 'visa', 'amex', 'maestro', 'bcmc'] });
+        await page.addInitScript({
+            content: `window.cardConfig = ${brands}`
+        });
+
+        await useCardPage(page, use);
+    },
+
+    cardExpiryDatePoliciesPage: async ({ page }, use) => {
+        const mainConfig = JSON.stringify({
+            srConfig: {
+                moveFocus: false
+            }
+        });
+        await page.addInitScript({
+            content: `window.mainConfiguration = ${mainConfig}`
+        });
+
+        const brands = JSON.stringify({ brands: ['mc', 'visa', 'amex', 'synchrony_plcc'] });
+        await page.addInitScript({
+            content: `window.cardConfig = ${brands}`
+        });
+
+        await useCardPage(page, use);
+    },
+
+    cardInstallmentsPage: async ({ page }, use) => {
+        const installmentsConfig = JSON.stringify({
+            installmentOptions: {
+                mc: {
+                    values: [1, 2, 3],
+                    plans: ['regular', 'revolving']
+                }
+            }
+        });
+        await page.addInitScript({
+            content: `window.cardConfig = ${installmentsConfig}`
+        });
+
+        await useCardPage(page, use);
     }
 });
 
+const useCardPage = async (page: Page, use: any, PageType = CardPage) => {
+    const cardPage = new PageType(page);
+    await cardPage.goto();
+    await use(cardPage);
+};
+
 export { test, expect };

packages/e2e-playwright/pages/cards/card.page.ts

@@ -14,7 +14,7 @@ class CardPage {
     }
 
     async goto(url?: string) {
-        await this.page.goto('http://localhost:3024/');
+        await this.page.goto('http://localhost:3024/cards');
     }
 
     async pay() {

packages/e2e-playwright/pages/issuerList/issuer-list.page.ts

@@ -2,7 +2,7 @@ import { Page } from '@playwright/test';
 import { IssuerList } from '../../models/issuer-list';
 
 class IssuerListPage {
-    private readonly page: Page;
+    readonly page: Page;
 
     public readonly issuerList: IssuerList;