下面是我用 Cypress 開(kāi)發(fā)的端到端測(cè)試。click 調(diào)用里的 force:true 參數(shù)是我后來(lái)加上去的。

如果不添加，會(huì)遇到錯(cuò)誤消息：

在方法 $Cy.ensureAttached 里面跑出來(lái)的，這個(gè)方法位于 runner/cypress_runner.js 下面。

我想知道這個(gè) cypress_runner.js 的本地位置：

本地請(qǐng)求的 url：http://localhost:4200/__cypress/runner/cypress_runner.js

遠(yuǎn)端端口：59701?

重定向到 __?

這個(gè)文件有20萬(wàn)行代碼：

懷疑這個(gè)龐大的文件是 merge 起來(lái)的：

這里能看到所有的 ensure 檢查：

斷點(diǎn)觸發(fā)時(shí)，從 callstack 是很難發(fā)現(xiàn)到底是哪一行 e2e spec 代碼觸發(fā)的這個(gè) ensureAttached 檢查：

但是可以通過(guò)輸入?yún)?shù)里指定的 select，到 e2e 代碼里搜索：

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

通過(guò)參數(shù)說(shuō)明，點(diǎn)擊了 cx-hamburge 的 button 元素：

很容易就找到了：

具體邏輯就是，檢查元素的 ownerDocument 屬性：

這是 Web API 里 Node 元素的標(biāo)準(zhǔn)屬性，見(jiàn)官網(wǎng)。

接口的只讀 ownerDocument 屬性: 返回節(jié)點(diǎn)的頂級(jí)文檔對(duì)象。

使用例子：

// Given a node "p", get the top-level HTML // child of the document objectconst d = p.ownerDocument; const html = d.documentElement;

然后再判斷這個(gè) document 對(duì)象，是否有 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 還針對(duì) firefox 進(jìn)行了不同的處理：

因?yàn)樵?firefox 里，即使 detached document, 也還保留了一個(gè)指向 window 的 reference.

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

defaultView 是 Web API 另一個(gè)標(biāo)準(zhǔn)的接口。

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

這個(gè)也是只讀屬性，返回 document 關(guān)聯(lián)的 window 對(duì)象。如果元素所在的 document 對(duì)象已經(jīng) detach from DOM，則 defaultView 指向 null.

node.isConnected：

接口 的只讀isConnected屬性 返回一個(gè)布爾值，指示節(jié)點(diǎn)是否（直接或間接）連接到上下文對(duì)象，例如Document(普通 DOM 情況下的對(duì)象），或ShadowRoot 影子 DOM 情況下的對(duì)象。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Cypress 里的 ensureAttached 检测原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。