使用Cypress无法访问shadow host内PDF viewer的original-url属性怎么办

修正后可运行代码 #

context('Test',{ includeShadowDom: true }, () => {
    before(() => {
        cy.login();
    });

    it('downloads the generated pdf form', { includeShadowDom: true }, () => {
        cy.get('.viewer')
          .shadow()
          .find('embed#plugin', { timeout: 10000 })
          .should('be.visible')
          .invoke('attr', 'original-url')
          .then(pdfUrl => {
              cy.downloadFile(pdfUrl, '/genPdfs/', 'genPdf.pdf')
          })
    })
})

核心修改说明 #

• 原find('original-url')逻辑错误：original-url是<embed>元素的属性，不是标签名，需要先定位到id为plugin的embed元素才能获取对应属性
• 原$pdfDest.text()用法错误：元素自定义属性不能通过text()读取，需要用attr('original-url')方法获取
• 原genPdf.pdf未加引号：会被JS识别为未定义变量，作为文件名需要包裹为字符串格式
• 新增超时和可见性校验：适配模态框加载延迟，避免元素未渲染完成就触发查找逻辑，解决找不到元素的报错

参考截图 #

• 页面审查结果：
  
• Cypress报错示例：
  
• 使用#选择器时的同类报错：
  

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