Select bank correctly for iDEAL (#59)

* Select bank correctly for iDEAL
* Fix utility functionality so it selects the correct cvc-field when multiple stored payment methods (CVC) are present


---------

Co-authored-by: Kwok He Chu <>

tests/checkout/ideal.spec.js

@@ -15,17 +15,11 @@ test('iDEAL', async ({ page }) => {
     await page.getByRole('link', { name: 'Continue to checkout' }).click();
 
     // Click "Select your bank"
-    await page.getByTitle('Select your bank').click();
+    await page.getByPlaceholder('Search...').click();
 
     // Choose "Test Issuer"
-    const selectButton = await page.getByTitle('Select your bank');
-    if (await selectButton.count() === 0) {
-        // Click radio button for > Adyen-Web 5.53.x or higher
-        await page.getByPlaceholder('Search...').click();
-    } else {
-        await selectButton.click();
-    }
-
+    await page.getByText('Test Issuer', { exact: true }).click();
+
     // Click "Continue to Test Issuer"
     await page.getByRole('button', { name: 'Continue to Test Issuer' }).click();
     await expect(page.locator('text="iDEAL Issuer Simulation"')).toBeVisible();

tests/utilities.js

@@ -63,8 +63,15 @@ module.exports = {
         const expiryDateFrame = await page.frameLocator('iframe[title*="expiry date"]');
         await expiryDateFrame.getByPlaceholder('MM/YY').fill(expiryDate);
 
-        const cvcFrame = await page.frameLocator('iframe[title="Iframe for security code"]');
-        await cvcFrame.getByPlaceholder('3 digits').fill(cvc);
+        // Find iframe and fill "CVC" field
+        const cardRegion = await page.getByRole('region[name="Credit or debit card"i]'); 
+        if (await cardRegion.count() === 0) {
+            // Handle drop-in
+            await page.frameLocator('iframe[title="Iframe for security code"]').getByPlaceholder('3 digits').fill(cvc);
+        } else {
+            // Handle drop-in when there are are multiple CVC fields with stored payment methods, we select the correct CVC field
+            await cardRegion.frameLocator('iframe[title*="security code"]').getByPlaceholder('3 digits').fill(cvc); 
+        }
 
         // Find and fill "Name on card" field - Note: this field is not contained within an iframe
         await page.getByPlaceholder('J. Smith').fill(nameOnCard);