The Payment iFrame Bug

The Scenario

The card number field is provided by the payment vendor inside an iframe. The Pay button belongs to your own page, outside the iframe. The test types the card number successfully and then fails to find the Pay button, even though it is clearly visible in the screenshot.

Your Task

Fix the context handling so the test can type into the frame and then click the button, and make the pattern safe to reuse for the expiry and CVC frames that the next test will need.

What Good Looks Like

• The driver returns to the main document after the frame work.
• The return happens even if something inside the frame throws.
• The helper is reusable for other frames.

it('pays with a card', async () => {
  await driver.get('https://app.example.com/checkout');

  const cardFrame = await driver.findElement(By.css("iframe[name='card-number']"));
  await driver.switchTo().frame(cardFrame);
  await driver.findElement(By.id('cardNumber')).sendKeys('4242424242424242');

  // Fails here: NoSuchElementError: #pay
  await driver.findElement(By.id('pay')).click();

  await driver.wait(until.elementLocated(By.css('.confirmation')), 10000);
});