Cypress如何访问位于shadow元素内部iframe中的button按钮？

解决方案 #

注意：该方案仅在iframe与父页面同源时生效，若iframe跨域，受浏览器同源策略限制，无法直接访问iframe内部DOM元素。

你需要依次穿透open状态的Shadow DOM和iframe两层隔离，才能获取到内部的按钮元素，示例代码如下：

// 获取mati-frame自定义元素节点
const matiFrame = document.querySelector('mati-frame');
// 访问其开放的Shadow Root
const shadowRoot = matiFrame.shadowRoot;
// 拿到Shadow Root内部的iframe节点
const innerIframe = shadowRoot.querySelector('iframe');

// 监听iframe加载完成事件，确保内部DOM已经渲染
innerIframe.addEventListener('load', () => {
  // 获取iframe的内部文档对象
  const iframeDocument = innerIframe.contentDocument || innerIframe.contentWindow.document;
  // 查找目标按钮
  const startBtn = iframeDocument.querySelector('button');

  // 可执行点击等操作
  startBtn?.click();
});

如果需要在页面初始加载完成后自动执行该逻辑，可以将上述代码包裹在DOM加载完成的监听回调中：

document.addEventListener('DOMContentLoaded', () => {
  // 上述逻辑代码
});

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