Automate interactions inside nested iframes and open shadow DOM in Playwright

Steps

1. For iframes, use page.frameLocator('iframe[name=payment]') to create a FrameLocator scoped to the iframe, then chain locators inside it: page.frameLocator('iframe').getByRole('textbox', { name: 'Card number' })
2. For nested iframes, chain frameLocator calls: page.frameLocator('iframe#outer').frameLocator('iframe#inner').getByLabel('CVV')
3. For open shadow DOM, Playwright locators pierce shadow boundaries automatically — getByRole and CSS selectors work through shadow roots without any special configuration
4. For closed shadow DOM (shadowRoot mode 'closed'), direct Playwright locator piercing does not work; you must use page.evaluate() to access the shadow root via JavaScript if the application exposes a reference
5. Verify the correct frame context is active by asserting on a unique element within the frame before interacting; cross-origin iframes may restrict content access