Playwright自动化测试：如何定位动态标识的iframe并填充输入框

当iframe的id、name属性及src中的编号动态变化时，依赖固定属性值的定位方式会失效。以下是几种可靠的解决方案：

方案1：通过src的固定前缀匹配iframe #

如果iframe的src包含固定的基础路径（比如示例中的https://something/link/），可以用frameLocator结合属性包含选择器定位iframe，再直接操作内部元素：

// 匹配src包含固定前缀的iframe，定位内部的card输入框并填充内容
await page.frameLocator('iframe[src*="https://something/link/"]').locator('input[id="card"]').fill('0123456789');

方案2：通过iframe内部的唯一元素反向定位 #

如果iframe没有稳定的外部属性，但内部的input[id="card"]是唯一的，可以遍历页面所有iframe，过滤出包含该元素的目标iframe：

// 从所有iframe中筛选出包含目标input的框架
const targetFrame = page.frames().find(frame => frame.locator('input[id="card"]').count() > 0);
await targetFrame?.locator('input[id="card"]').fill('0123456789');

方案3：通过稳定的父容器定位iframe #

如果iframe的父元素有固定的class/id等稳定特征，可以先定位父容器，再嵌套定位内部的iframe：

// 先定位稳定的父容器，再找内部的iframe，最后操作目标input
await page.locator('.stable-parent-selector iframe').frameLocator().locator('input[id="card"]').fill('0123456789');

注意事项 #

• 若页面存在多个符合条件的iframe，需补充更精准的筛选条件（比如结合iframe的其他稳定属性）
• 操作iframe内元素前，确保iframe已加载完成，必要时可添加waitForLoadState()等待：

const targetFrame = page.frames().find(frame => frame.locator('input[id="card"]').count() > 0);
await targetFrame?.waitForLoadState('domcontentloaded');
await targetFrame?.locator('input[id="card"]').fill('0123456789');

内容的提问来源于stack exchange，提问作者Aleksei Skvortsov