Cypress - 架構與環境搭建

---

Cypress 架構如下圖所示：

上圖來源：https://tutorialspoint.tw/cypress-architecturetest-automation

像 Selenium 這樣的自動化工具在瀏覽器外部執行。但是，Cypress 具有不同的架構。它在瀏覽器內部執行。Cypress 基本上基於伺服器 - Node.js。

Cypress 與 Node.js 持續互動，它們彼此協調工作。因此，Cypress 可用於測試應用程式的前端和後端。

因此，Cypress 能夠處理 UI 上即時執行的任務，同時也可以執行瀏覽器外部的操作。

Cypress 和 Selenium 的區別

Cypress 和 Selenium 的基本區別如下所示：

Cypress 環境搭建

要進行 Cypress 環境搭建，請訪問以下連結：https://nodejs.org/en/download/。將出現以下螢幕：

將有 Windows 和 macOS 安裝程式。我們必須根據本地作業系統獲取相應的軟體包。

對於 64 位 Windows 配置，以下彈出視窗將顯示以儲存安裝程式。

安裝完成後，將在 Program files 中建立一個 nodejs 檔案。應記下此檔案的路徑。然後，從“開始”選單中輸入環境變數，如下所示：

在“系統屬性”彈出視窗中，轉到“高階”，單擊“環境變數”。然後單擊“確定”。

在“環境變數”彈出視窗中，轉到“系統變數”部分，然後單擊“新建”。

在“新建系統變數”彈出視窗中，分別在“變數名”和“變數值”欄位中輸入 NODE_HOME 和 node.js 路徑（之前記下的）。

設定 node.js 檔案的路徑後，我們將在任何所需位置建立一個空資料夾（例如 cypressautomation）。

接下來，我們需要一個 JavaScript 編輯器來編寫 Cypress 程式碼。為此，我們可以從連結 https://vscode.com.tw/ 下載 Visual Studio Code。

根據本地作業系統，選擇正確的軟體包：

下載可執行檔案並完成所有安裝步驟後，將啟動 Visual Studio Code。

從“檔案”選單中選擇“開啟資料夾”選項。然後，將之前建立的 CypressAutomation 資料夾新增到 Visual Studio Code 中。

我們需要使用以下命令從終端建立 package.json 檔案：

我們必須輸入軟體包名稱、描述等詳細資訊，如下所示：

npm init

完成後，將在專案資料夾中建立 package.json 檔案，其中包含我們提供的資訊。

完成後，將在專案資料夾中建立 package.json 檔案，其中包含我們提供的資訊。

最後，要安裝 Cypress，請執行以下命令：

npm install cypress --save-dev

您將獲得以下輸出：