乐趣区

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

jiezi

上面是我用 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 另一个规范的接口。

In browsers, document.defaultView returns the window object associated with a document, or null if none is available.

这个也是只读属性，返回 document 关联的 window 对象。如果元素所在的 document 对象曾经 detach from DOM，则 defaultView 指向 null.

node.isConnected：

接口 的只读 isConnected 属性 返回一个布尔值，批示节点是否（间接或间接）连贯到上下文对象，例如 Document(一般 DOM 状况下的对象），或 ShadowRoot 影子 DOM 状况下的对象。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”:

退出移动版