#2 Add Card payment for checkout (#17)

Propery tag links instead of "getByText" for more robust testing Removed/CamelCased several comments
adyen-examples · Jan 20, 2023 · b391ad2 · b391ad2
1 parent 1a6a22b
commit b391ad2
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 22 deletions.
diff --git a/tests/checkout/card.spec.js b/tests/checkout/card.spec.js
@@ -1,18 +1,39 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
 
-
 test('Card', async ({ page }) => {
     await page.goto('/');
 
     await expect(page).toHaveTitle(/Checkout Demo/);
     await expect(page.locator('text="Select a demo"')).toBeVisible();
 
-    // Select Card
-    await page.locator('text="Card"').click();
+    // Select "Card"
+    await page.getByRole('link', { name: 'Card' }).click();
     await expect(page.locator('text="Cart"')).toBeVisible();
 
     // Click "Continue to checkout"
-    await page.click('text="Continue to checkout"');
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
     await expect(page.locator('text="Card number"')).toBeVisible();
+
+    // Find iframe and fill "Card number" field
+    const cardNumberFrame = page.frameLocator('internal:attr=[title="Iframe for secured card number"i]');
+    await cardNumberFrame.getByPlaceholder('1234 5678 9012 3456').fill('4166 6766 6766 6746');
+
+    // Find iframe and fill "Expiry date" field
+    const expiryDateFrame = page.frameLocator('internal:attr=[title="Iframe for secured card expiry date"i]');
+    await expiryDateFrame.getByPlaceholder('MM/YY').fill('03/30');
+
+    // Find iframe and fill "CVC / CVV" field
+    const cvcFrame = page.frameLocator('internal:attr=[title="Iframe for secured card security code"i]');
+    await cvcFrame.getByPlaceholder('3 digits').fill('737');
+
+    // Find and fill "Name on card" field - Note: this field is not contained within an iframe
+    await page.getByPlaceholder('J. Smith').fill('J. Smith');
+
+    // Click "Pay" button
+    const payButton = page.locator('.adyen-checkout__button__text >> visible=true');
+    await expect(payButton).toBeVisible();
+    await payButton.click();
+
+    await expect(page.locator('text="Return Home"')).toBeVisible();
 });
diff --git a/tests/checkout/dropin-card.spec.js b/tests/checkout/dropin-card.spec.js
@@ -0,0 +1,43 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('Dropin Card', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page).toHaveTitle(/Checkout Demo/);
+    await expect(page.locator('text="Select a demo"')).toBeVisible();
+
+    // Select "Drop-in"
+    await page.getByRole('link', { name: 'Drop-in' }).click();
+    await expect(page.locator('text="Cart"')).toBeVisible();
+
+    // Click "Continue to checkout"
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
+    await expect(page.locator('text="Credit or debit card"')).toBeVisible();
+
+    // Select "Credit or debit card"
+    await page.getByRole('button', { name: 'Credit or debit card' }).click();
+    await expect(page.locator('[aria-label="Credit or debit card"]')).toHaveAttribute('aria-expanded', 'true');
+
+    // Find iframe and fill "Card number" field
+    const cardNumberFrame = page.frameLocator('internal:attr=[title="Iframe for secured card number"i]');
+    await cardNumberFrame.getByPlaceholder('1234 5678 9012 3456').fill('4166 6766 6766 6746');
+
+    // Find iframe and fill "Expiry date" field
+    const expiryDateFrame = page.frameLocator('internal:attr=[title="Iframe for secured card expiry date"i]');
+    await expiryDateFrame.getByPlaceholder('MM/YY').fill('03/30');
+
+    // Find iframe and fill "CVC / CVV" field
+    const cvcFrame = page.frameLocator('internal:role=region[name="Credit or debit card"i] >> internal:attr=[title="Iframe for secured card security code"i]');
+    await cvcFrame.getByPlaceholder('3 digits').fill('737');
+
+    // Find and fill "Name on card" field - Note: this field is not contained within an iframe
+    await page.getByPlaceholder('J. Smith').fill('J. Smith');
+
+    // Click "Pay" button
+    const payButton = page.locator('.adyen-checkout__button__text >> visible=true');
+    await expect(payButton).toBeVisible();
+    await payButton.click();
+
+    await expect(page.locator('text="Return Home"')).toBeVisible();
+});
diff --git a/tests/checkout/dropin-sepa.spec.js b/tests/checkout/dropin-sepa.spec.js
@@ -1,27 +1,27 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
 
-// SEPA payment
 test('Dropin SEPA', async ({ page }) => {
     await page.goto('/');
 
     await expect(page).toHaveTitle(/Checkout Demo/);
     await expect(page.locator('text="Select a demo"')).toBeVisible();
 
     // Select "Drop-in"
-    await page.locator('text="Drop-in"').click();
+    await page.getByRole('link', { name: 'Drop-in' }).click();
     await expect(page.locator('text="Cart"')).toBeVisible();
 
     // Click "Continue to checkout"
-    await page.click('text="Continue to checkout"');
+
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
     await expect(page.locator('text="SEPA Direct Debit"')).toBeVisible();
 
     // Select "SEPA"
     await page.locator('button[id^="button-sepadirectdebit"]').click();
     await page.fill('input[name="ownerName"]', "A. Klaassen");
     await page.fill('input[name="ibanNumber"]', "NL13TEST0123456789");
 
-    // Click "Pay"
+    // Click "Pay" button
     const payButton = page.locator('.adyen-checkout__button.adyen-checkout__button--pay >> visible=true');
     await expect(payButton).toBeVisible();
     await payButton.click();

diff --git a/tests/checkout/ideal.spec.js b/tests/checkout/ideal.spec.js
@@ -7,26 +7,27 @@ test('iDEAL', async ({ page }) => {
     await expect(page).toHaveTitle(/Checkout Demo/);
     await expect(page.locator('text="Select a demo"')).toBeVisible();
 
-    // select iDEAL
-    await page.locator('text="iDEAL"').click();
+    // Select "iDEAL"
+    await page.getByRole('link', { name: 'iDEAL' }).click();
     await expect(page.locator('text="Cart"')).toBeVisible();
 
-    // click "Continue to checkout"
-    await page.click('text="Continue to checkout"');
+    // Click "Continue to checkout"
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
     await expect(page.locator('text="Select your bank"')).toBeVisible();
 
-    // Select bank
+    // Click "Select your bank"
     await page.click('text="Select your bank"');
-    // Choose Test Issuer
+
+    // Choose "Test Issuer"
     const element = page.locator('input[aria-autocomplete="list"]');
     await element.type('Test Issuer');
     await element.press('Enter');
 
-    // click "Continue to Test Issuer"
+    // Click "Continue to Test Issuer"
     await page.click('text="Continue to Test Issuer"');
     await expect(page.locator('text="iDEAL Issuer Simulation"')).toBeVisible();
 
-    // click "Continue"
+    // Click "Continue"
     await page.click('text="Continue"');
     await expect(page.locator('text="Return Home"')).toBeVisible();
 });
diff --git a/tests/checkout/klarna-paynow.spec.js b/tests/checkout/klarna-paynow.spec.js
@@ -8,14 +8,14 @@ test('Klarna Pay Now', async ({ page }) => {
     await expect(page.locator('text="Select a demo"')).toBeVisible();
 
     // Select "Klarna Pay Now"
-    await page.locator('text="Klarna - Pay now"').click();
+    await page.getByRole('link', { name: 'Klarna - Pay now' }).click();
     await expect(page.locator('text="Cart"')).toBeVisible();
 
     // Click "Continue to checkout"
-    await page.click('text="Continue to checkout"');
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
     await expect(page.locator('text="Continue to Pay now with Klarna."')).toBeVisible();
 
-    // Click "Continue to Klarna"
+    // Click "Continue to Klarna"    
     await page.locator('text="Continue to Pay now with Klarna."').click();
     await expect(page).toHaveTitle("Je bestelling afronden");
 });
diff --git a/tests/subscription/card.spec.js b/tests/subscription/card.spec.js
@@ -1,14 +1,13 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
 
-
 test('Card', async ({ page }) => {
     await page.goto('/');
 
     await expect(page).toHaveTitle("Adyen Subscription Shopper View");
     await expect(page.locator('text="SHOPPER VIEW"')).toBeVisible();
 
-    // Select Card
+    // Select "Card"
     await page.getByRole('link', { name: 'Card' }).click();
     await expect(page.locator('text="SUBSCRIPTION DETAILS"')).toBeVisible();
 

diff --git a/tests/subscription/dropin-card.spec.js b/tests/subscription/dropin-card.spec.js
@@ -1,7 +1,6 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
 
-// SEPA payment
 test('Dropin Card', async ({ page }) => {
     await page.goto('/');