关于cypress:Cypress-里的-ensureAttached-检测原理

41次阅读

共计 1538 个字符，预计需要花费 4 分钟才能阅读完成。

上面是我用 Cypress 开发的端到端测试。click 调用里的 force:true 参数是我起初加上去的。

如果不增加，会遇到谬误音讯：

在办法 $Cy.ensureAttached 外面跑进去的，这个办法位于 runner/cypress_runner.js 上面。

我想晓得这个 cypress_runner.js 的本地地位：

本地申请的 url：http://localhost:4200/__cypre…

远端端口：59701?

重定向到 __?

这个文件有 20 万行代码：

狐疑这个宏大的文件是 merge 起来的：

这里能看到所有的 ensure 查看：

断点触发时，从 callstack 是很难发现到底是哪一行 e2e spec 代码触发的这个 ensureAttached 查看：

然而能够通过输出参数里指定的 select，到 e2e 代码里搜寻：

cx-hamburger-menu [aria-label=\”Menu\”]

通过参数阐明，点击了 cx-hamburge 的 button 元素：

很容易就找到了：

具体逻辑就是，查看元素的 ownerDocument 属性：

这是 Web API 里 Node 元素的规范属性，见官网。

接口的只读 ownerDocument 属性: 返回节点的顶级文档对象。

应用例子：

// Given a node "p", get the top-level HTML
// child of the document object

const d = p.ownerDocument;
const html = d.documentElement;

而后再判断这个 document 对象，是否有 activeWindow:

  return nodes.every(node => {const doc = _document__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].getDocumentFromElement(node);

    if (!_document__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"].hasActiveWindow(doc)) {return false;}

    return node.isConnected;
  });
};

这里 Cypress 还针对 firefox 进行了不同的解决：

因为在 firefox 里，即便 detached document, 也还保留了一个指向 window 的 reference.

const hasActiveWindow = doc => {
  // in firefox, detached documents still have a reference to their window
  // but document.location is null
  if (Cypress.isBrowser('firefox') && !doc.location) {return false;}

  return !!doc.defaultView;
};

defaultView 是 Web API 另一个规范的接口。