Iframes

An iframe embeds another HTML document. ShopEase shows the payment gateway's card form in an iframe. Selenium can see only one document at a time, so you must switch into the frame first.

<iframe id="payment-frame" src="https://pay.example.com/card-form"></iframe>
<!-- inside the frame: <input id="card-number"> <button id="pay-now">Pay</button> -->

// by id/name, by index (0-based), or by WebElement
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("payment-frame")));
driver.findElement(By.id("card-number")).sendKeys("4111111111111111");
driver.findElement(By.id("pay-now")).click();

driver.switchTo().defaultContent();   // back to the main page
driver.switchTo().parentFrame();      // or one level up, for nested frames

Run PaymentTest.main()

org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"#card-number"}