Interact with elements inside iframes and shadow DOM in Playwright

Steps

1. To target an element inside a same-origin iframe, obtain a `FrameLocator` with `page.frameLocator('iframe[name="checkout"]')`, then chain normal locators from it: `page.frameLocator('#payment').getByLabel('Card number').fill('...')`.
2. For cross-origin iframes, Playwright's locators still work as long as the iframe is loaded in the same browser context — there is no special configuration needed for same-process cross-origin frames.
3. Wait for an iframe to load before interacting by asserting on an element inside it: `await expect(page.frameLocator('#embed').getByRole('heading')).toBeVisible()`.
4. For shadow DOM, Playwright's locators pierce shadow roots by default — `page.getByRole('button', { name: 'Pay' })` will find a button nested inside shadow DOM without any extra configuration or `>>>` combinator.
5. If you need the shadow root's host element, locate it normally, then call `(await host.elementHandle()).evaluate(el => el.shadowRoot.querySelector('...'))`.