共计 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 另一个规范的接口。
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 的原创文章,尽在:” 汪子熙 ”: