使用Cypress无法定位Shadow DOM中的登录元素，请求技术协助

问题概况 #

测试基于Flutter/CANVAS构建的登录页面时，邮箱（#email）和密码（#current-password）字段位于Shadow DOM内，原Cypress代码因语法错误无法定位到目标元素，导致超时报错；同时Playwright也因Flutter页面的交互限制难以完成操作。

原代码错误分析 #

原代码存在以下关键问题：

• .shadow未调用方法（应为.shadow()），无法进入Shadow DOM根节点
• 未使用链式调用，cy.get('#email')是在主DOM而非Shadow DOM中查找元素
• cy.type()未与元素定位语句链式绑定，语法无效

原错误代码：

it('Edison Launchpad ', function(){
        cy.visit('https://staging.edisoninteractive.tv');
       // cy.get('body > :nth-child(17)').type('asadW@abc.com')
       cy.get('flt-glass-pane')
       .shadow
       cy.get('#email')
       cy.type('asadW@abc.com')
       cy.get('#current-password')
       cy.type('jdkjdkjdkdjdkjdkjdkjdkjd')
       .should('contain.text', 'email');
 })

修正后的Cypress代码 #

通过正确链式调用进入Shadow DOM，并添加等待确保元素加载完成：

it('Edison Launchpad Login', function() {
  cy.visit('https://staging.edisoninteractive.tv');
  
  // 进入flt-glass-pane的Shadow DOM根节点，查找并填写邮箱
  cy.get('flt-glass-pane')
    .shadow() // 调用方法进入Shadow DOM
    .find('#email') // 在Shadow DOM内定位邮箱输入框
    .should('be.visible') // 等待元素可见，避免超时
    .type('asadW@abc.com');

  // 同理处理密码输入框
  cy.get('flt-glass-pane')
    .shadow()
    .find('#current-password')
    .should('be.visible')
    .type('jdkjdkjdkdjdkjdkjdkjdkjd');

  // 若需断言，需针对正确元素（如登录按钮或提示文本）调整选择器
  // cy.get('flt-glass-pane').shadow().find('登录按钮选择器').click();
});

额外注意事项 #

由于页面基于Flutter构建，可能存在以下特殊情况：

• 部分输入框并非标准HTML元素，而是通过Canvas渲染，此时Cypress的type()可能无法直接生效，可尝试使用cy.invoke('val', '输入内容')或模拟键盘事件
• 若Shadow DOM层级更深，需逐层进入（比如cy.get('父元素').shadow().find('子元素').shadow().find('目标元素')）
• 可通过浏览器DevTools的「Elements」面板，开启「Show user agent shadow DOM」选项，确认元素的实际Shadow DOM结构

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