下面是我用 Cypress 開發的端到端測試。click 呼叫裡的 force:true 引數是我後來加上去的。

![](https://img-blog.csdnimg.cn/img_convert/f3b48e0a8fcde80f17378cfe156fcd83.png)

如果不新增，會遇到錯誤訊息：

![](https://img-blog.csdnimg.cn/img_convert/3b555d025269a033e0a6422bbbcb0618.png)

在方法 $Cy.ensureAttached 裡面跑出來的，這個方法位於 runner/cypress_runner.js 下面。

我想知道這個 cypress_runner.js 的本地位置：

![](https://img-blog.csdnimg.cn/img_convert/26545ff74eb12a3f01ec7fe926ac87d2.png)

本地請求的 url：http://localhost:4200/__cypress/runner/cypress_runner.js

遠端埠：59701?

![](https://img-blog.csdnimg.cn/img_convert/fb84d7657627a511236a145c9ecb19c6.png)

重定向到 __?

![](https://img-blog.csdnimg.cn/img_convert/11bf38eb0328d668e4f77e436971b141.png)

這個檔案有20萬行程式碼：

![](https://img-blog.csdnimg.cn/img_convert/4ef60ed51e85b954c72f03f1b4239497.png)

懷疑這個龐大的檔案是 merge 起來的：
![](https://img-blog.csdnimg.cn/img_convert/0275896f99960ff810ce835778aa7406.png)

這裡能看到所有的 ensure 檢查：
![](https://img-blog.csdnimg.cn/img_convert/22fbf8da28df514038fdf357ab89268b.png)

斷點觸發時，從 callstack 是很難發現到底是哪一行 e2e spec 程式碼觸發的這個 ensureAttached 檢查：
![](https://img-blog.csdnimg.cn/img_convert/cb42a2ef47844344da75a0e5792f8e68.png)

但是可以透過輸入引數裡指定的 select，到 e2e 程式碼裡搜尋：

![](https://img-blog.csdnimg.cn/img_convert/013e62ce437993f8f56123aa3c136874.png)

> cx-hamburger-menu [aria-label=\"Menu\"]

透過引數說明，點選了 cx-hamburge 的 button 元素：

![](https://img-blog.csdnimg.cn/img_convert/509a7ae119d6f20a46c73a8e7400eb09.png)

很容易就找到了：
![](https://img-blog.csdnimg.cn/img_convert/41725ed9c980fbe0e79c6b61b2f8a5fd.png)

具體邏輯就是，檢查元素的 ownerDocument 屬性：
![](https://img-blog.csdnimg.cn/img_convert/8b6c43070452297922aafc347e6014a1.png)

這是 Web API 裡 Node 元素的標準屬性，見[官網](https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument)。

介面的只讀 ownerDocument 屬性: 返回節點的頂級文件物件。

使用例子：

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

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

然後再判斷這個 document 物件，是否有 activeWindow:

```javascript
  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 進行了不同的處理：
![](https://img-blog.csdnimg.cn/img_convert/d66991f67d2a462349d4ae64a36bbb78.png)

因為在 firefox 裡，即使 detached document, 也還保留了一個指向 window 的 reference.

```javascript
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 另一個標準的[介面](https://developer.mozilla.org/en-US/docs/Web/API/Document/defaultView)。

> 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：

![](https://img-blog.csdnimg.cn/img_convert/d94411452fdbb6edf30dcbd02bbf1a82.png)

介面 的只讀isConnected屬性 返回一個布林值，指示節點是否（直接或間接）連線到上下文物件，例如Document(普通 DOM 情況下的物件），或ShadowRoot 影子 DOM 情況下的物件。

Cypress 裡的 ensureAttached 檢測原理

相關文章