如何在Playwright或Cypress中执行document.querySelector处理Shadow DOM？

一、原生JS（document.querySelector）直接操作方法 #

如果必须用原生JS操作，核心是正确获取Shadow DOM宿主，再访问其shadowRoot定位内部元素，同时要触发必要的输入事件保证页面感知到内容变化：

// 获取Shadow DOM宿主元素（避免用:nth-child(17)这种易变选择器，优先用唯一标识）
const shadowHost = document.querySelector('flt-glass-pane');
if (shadowHost?.shadowRoot) {
  // 填充邮箱输入框
  const emailInput = shadowHost.shadowRoot.querySelector('#email');
  if (emailInput) {
    emailInput.value = 'asad.test@test.com';
    // 触发input事件，确保页面表单状态更新
    emailInput.dispatchEvent(new Event('input', { bubbles: true }));
  }

  // 填充密码输入框
  const pwdInput = shadowHost.shadowRoot.querySelector('#current-password');
  if (pwdInput) {
    pwdInput.value = 'abcdddddd';
    pwdInput.dispatchEvent(new Event('input', { bubbles: true }));
  }

  // 点击提交按钮
  const submitBtn = shadowHost.shadowRoot.querySelector('flt-semantics-placeholder');
  submitBtn?.click();
}

注意点： #

• 不要依赖body > flt-glass-pane:nth-child(17)这种基于DOM层级的选择器，页面结构变化会直接失效
• 直接修改value后必须触发input/change事件，否则页面的表单校验、状态同步可能不生效

二、修正Playwright写法（稳定识别Shadow DOM） #

Playwright原生支持Shadow DOM定位，无需手动处理shadowRoot，用>> shadow=语法即可穿透：

// 填充邮箱
await page.locator('flt-glass-pane >> shadow=#email').fill('asad.test@tests.com');

// 填充密码
await page.locator('flt-glass-pane >> shadow=#current-password').fill('pwdstr');

// 点击提交按钮
await page.locator('flt-glass-pane >> shadow=flt-semantics-placeholder').click();

之前写法不稳定的原因： #

依赖Tab切换和可见性选择器，容易受页面渲染顺序、元素聚焦状态影响，直接用Shadow DOM定位语法更可靠。

三、修正Cypress写法（正确处理Shadow DOM） #

Cypress需要先开启Shadow DOM支持，再用链式语法定位内部元素：

1. 首先在cypress.config.js中开启配置：

module.exports = {
  e2e: {
    includeShadowDom: true,
    // 其他配置项
  },
};

2. 测试代码：

cy.visit('https://staging.edisoninteractive.tv');

// 链式定位并填充邮箱
cy.get('flt-glass-pane')
  .shadow()
  .find('#email')
  .type('asadW@abc.com')
  .trigger('input');

// 链式定位并填充密码
cy.get('flt-glass-pane')
  .shadow()
  .find('#current-password')
  .type('jdkjdkjdkdjdkjdkjdkjdkjd')
  .trigger('input');

// 点击提交按钮
cy.get('flt-glass-pane')
  .shadow()
  .find('flt-semantics-placeholder')
  .click();

之前写法的错误点： #

• 没有链式调用cy.type()，导致cy.type()在全局上下文查找元素，而非Shadow DOM内
• 缺少trigger('input')触发状态更新
• 未开启Shadow DOM支持（旧版本Cypress默认关闭）

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