Cypress|Cypress 里的 ensureAttached 检测原理
下面是我用 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 objectconst 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 进行了不同的处理：
文章图片
【Cypress|Cypress 里的 ensureAttached 检测原理】因为在 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的原创文章，尽在："汪子熙":
文章图片
推荐阅读
- 村里的故事|村里的故事 --赵大头
- 你眼里的不公平，其实很公平
- 时光，是行走在文字里的眷恋
- 住在棺材里的老人
- 冬日里的那一抹暖阳
- 计划生育科里的那些事（1）——神转折大赛
- 《拆掉思维里的墙（原来我还可以这样活》）
- 给你一个公司里的最高权力，你会做…|给你一个公司里的最高权力，你会做… … ?
- 茶事|茶事 | 单丛里的一泡奇葩
- 办公室里的＂完美＂S小姐