使用Playwright无法稳定填充Shadow DOM中登录字段，求助排查

针对你遇到的Shadow DOM元素定位不稳定、重复选择器匹配、Target closed错误，结合Flutter Web页面的特性，给出以下解决方案：

1. 精准定位多层Shadow DOM元素 #

Flutter Web的UI通常嵌套在多层Shadow DOM中，直接使用全局选择器会导致定位偏差。需通过宿主元素逐层定位到Shadow Root，再查找目标元素：

• 先定位Flutter页面的核心容器（通常是flt-glass-pane或flt-platform-view）
• 使用shadowLocator()链式定位内部元素，避免跨Shadow DOM的全局匹配

2. 过滤重复/隐藏元素 #

错误日志显示找到多个#current-password且元素处于隐藏状态，必须添加可见性与状态过滤，确保操作的是当前可交互的元素：

• 使用filter({ visible: true })筛选可见元素
• 结合waitFor({ state: 'enabled' })确保元素处于可交互状态

3. 等待页面渲染稳定 #

Flutter Web页面渲染存在延迟，需等待关键元素加载完成后再执行操作，避免超时或元素未就绪：

• 等待核心容器加载完成后再定位内部元素
• 可按需延长操作超时时间（如{ timeout: 10000 }）

修改后的示例代码 #

import { test, expect } from '@playwright/test'

test.describe('Shadow DOM 登录自动化', () => {
  test('填充登录页面', async ({ page }) => {
    await page.goto('https://staging.edisoninteractive.tv/')

    // 等待Flutter核心容器加载完成
    const fltContainer = page.locator('flt-glass-pane');
    await fltContainer.waitFor({ state: 'visible', timeout: 10000 });

    // 定位Shadow DOM内的邮箱输入框并填充
    const emailInput = fltContainer.shadowLocator('input[type="email"]');
    await emailInput.waitFor({ state: 'enabled' });
    await emailInput.fill('abcyser@test.com');

    // 定位Shadow DOM内的密码输入框并填充（过滤可见元素）
    const passwordInput = fltContainer.shadowLocator('input[type="password"]').filter({ visible: true });
    await passwordInput.waitFor({ state: 'enabled' });
    await passwordInput.fill('dkkdkdkdkkd');

    // 提交登录
    await passwordInput.press('Enter');
  })
})

额外调试技巧 #

• 启用Playwright调试模式（PWDEBUG=1），暂停在关键步骤，查看Shadow DOM结构
• 使用page.locator('flt-glass-pane').shadowLocator('*').all()打印Shadow内所有元素，确认选择器正确性
• 避免依赖Tab键切换焦点，直接定位目标元素更稳定

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