賽普拉斯自動化:與之相關的 15 個重要因素

在本教程中,我們將詳細討論賽普拉斯自動化框架。 我們將在本文中介紹 Cypress 是什麼、它與其他測試框架的區別、Cypress 的架構以及安裝過程。 Cypress 是一個令人興奮的話題,學習起來也很有趣。 讓我們開始!

賽普拉斯自動化框架

Cypress Automation Framework 是一個純基於 Javascript 的測試工具,主要專注於現代 Web 應用程序中的前端測試。 使用賽普拉斯,可以通過可視化界面輕鬆測試應用程序,以見證測試執行。 因此,賽普拉斯使腳本編寫和測試執行變得容易,對開發人員和 QA 工程師來說都是一個福音。 此外,它還帶有一個獨特的測試運行器,這使得 DOM 操作變得容易並直接在瀏覽器上運行。

表中的內容

什麼是賽普拉斯?

Cypress 更快、更好,並提供在瀏覽器上運行的確定性測試。Cypress 主要與 Selenium 進行比較,但它是完全不同的。 Cypress 不在 Selenium 之上運行,這意味著它是完全獨立的。 相反,Cypress 運行在 Mocha 之上,Mocha 又是一個富含 Javascript 的測試框架。 它僅與 Chai 斷言庫兼容,該庫可以訪問範圍廣泛的 BDD 和 TDD 斷言。

Cypress 主要關註三種不同類型的測試. 它們是端到端測試、單元測試和集成測試。 賽普拉斯可以執行任何可以在瀏覽器中運行的測試。 此外,它還帶有不同的模擬功能和驗證,這些功能和驗證對前端測試很著迷。

Cypress 支持的瀏覽器有 Chrome、Firefox、Edge、Electron 和 Brave。 此外,使用 Cypress 可以輕鬆實現跨瀏覽器測試。 最後,雖然 Cypress 只支持 Javascript,但也可以用 Typescript 編寫,主要是用 Javascript 編寫。

賽普拉斯自動化

Cypress 是一個開源工具,帶有免費的測試運行器,但其定價範圍適用於團隊和企業,他們向您收取儀表板費用。 但是,儀表板在一定程度上是免費的,除非您具有 Flake 檢測、電子郵件支持、Jira 集成等附加功能。

Cypress 主要用於自動化 web 上的腳本(可以自動化在瀏覽器上運行的任何東西)。 它永遠不能在原生移動應用程序上運行,但如果在瀏覽器中開發,它可以自動化移動應用程序的某些功能。

特別服務

賽普拉斯提供了許多出色的功能,這些功能從任何其他自動化工具中脫穎而出。 在這裡,讓我們討論一些主要功能,一旦我們開始編寫測試用例,我們將在稍後介紹其他部分!

  1. 自動等待 – Cypress 具有自動等待的優勢。 我們永遠不需要添加強制等待和睡眠來等待 DOM 獲取元素。 Cypress 會自動等待與元素的任何交互和斷言的執行。 因此,測試很快!
  2. 時間旅行 – 賽普拉斯在測試執行期間捕獲屏幕截圖。 我們只需將鼠標懸停在儀表板中執行的命令上,即可實時直觀地查看結果。 這樣,測試更容易調試
  3. 調試測試 – 賽普拉斯可以通過開發者工具等流行工具調試測試。 錯誤是可讀的,堆棧很容易追踪。
  4. 存根請求 – 賽普拉斯可以選擇確認和控制存根和間諜使用的功能行為、網絡響應或計時器。
  5. 持續集成 – Cypress 不依賴於任何其他附加 CI 服務。 但是,在運行測試命令時,可以輕鬆訪問集成。

關於賽普拉斯的神話

有一種說法是 Cypress 只能在對 Javascript 友好的 Web 應用程序上運行。 但是,Cypress 可以測試使用 Django、Ruby on Rails、Laravel 等構建的任何 Web 應用程序。此外,Cypress 支持任何編程語言,例如 PHP、Python、Ruby、C# 等。但是,我們使用 Javascript 編寫測試; 除此之外,賽普拉斯適用於任何應用程序。

Cypress 的組件

Cypress 中有兩個主要組件。 他們是 測試運行器 及 我的帳戶.

柏
賽普拉斯測試運行器
賽普拉斯測試功能

測試運行器 – 賽普拉斯提供了這個獨特的測試運行器,用戶可以在其中查看執行期間的命令和被測應用程序。

Test runner 下有幾個子組件。 他們是

  1. 命令日誌 – 這是測試套件的可視化表示。 您可以看到測試中執行的命令、斷言詳細信息和測試塊。
  2. 測試狀態菜單 – 此菜單顯示通過或失敗的測試用例數量以及執行所需的時間。
  3. 網址預覽 – 這會為您提供有關您正在測試的 URL 的信息,以跟踪所有 URL 路徑。
  4. 視口大小 – 您可以設置應用程序的視口大小以測試不同的響應式佈局
  5. 應用預覽 – 此部分顯示實時運行的命令。 在這裡,您可以使用 Devtools 調試或檢查每個基礎。

儀表板: Cypress Dashboard 能夠訪問正在記錄的測試。 使用儀表板服務,我們可以見證通過、失敗或跳過測試的數量。 此外,我們可以使用 cy 查看失敗測試的快照。 屏幕截圖()命令。 您還可以見證整個測試的視頻或失敗測試的剪輯。

賽普拉斯架構

大多數測試工具在瀏覽器之外的服務器上運行,並通過網絡執行命令。 但是,賽普拉斯在應用程序運行的瀏覽器上運行。 這樣,它就可以訪問瀏覽器中的所有 DOM 元素和所有內容。

節點服務器在客戶端的 Cypress 後面運行。 因此,節點服務器和賽普拉斯相互交互,伴隨並執行任務以支持執行。 由於它可以訪問前端和後端,因此可以很好地完成執行期間對應用程序的實時響應,並且還可以執行甚至在瀏覽器之外運行的任務。

賽普拉斯架構

Cypress 還與網絡層交互並捕獲命令 通過閱讀和更改網絡流量。 最後,賽普拉斯從節點服務器向瀏覽器發送 HTTP 請求和響應。 由於賽普拉斯在網絡層運行,它有助於修改可能干擾 Web 瀏覽器自動化的代碼。 Node 服務器和瀏覽器之間的通信是通過 WebSocket 進行的,它在代理啟動後開始執行。

Cypress 控制著在瀏覽器內外運行的所有命令。 由於安裝在本地機器上,直接與操作系統交互,可以輕鬆錄製視頻、抓拍快照、訪問網絡層、執行文件系統操作。 Cypress 可以訪問來自 DOM、窗口對象、本地存儲、網絡層和 DevTools 的所有內容。

安裝賽普拉斯

本節將討論在編寫我們的測試用例之前需要遵循的安裝過程。 下載 Cypress 有兩種不同的方法。 他們是

  1. 通過 npm 安裝
  2. 直接下載

在我們安裝 Cypress 之前,我們可能需要一些先決條件才能開始通過 npm 安裝。 讓我們詳細看看它們。

先決條件

在編寫我們的測試用例之前,我們將需要某些先決條件。

  • 如上所述,Cypress 運行在節點服務器上; 因此我們必須安裝 Node.js。
  • 此外,為了編寫我們的測試用例,我們需要一個代碼編輯器或 IDE。

在此示例中,我們將使用 Visual Studio Code。 因此,讓我們深入了解細節。

Mac 上的 Node.js 安裝

在這裡,我們將討論在 Mac 中下載 Node.js 的步驟。 導航 https://nodejs.org/en/download/. 您現在將登陸下載頁面。

macOS 中的節點包

1. 單擊 macOS 安裝程序。 單擊後,您可以找到下面下載的包文件。 點擊 pkg 文件安裝 Node.js

安裝程序介紹

2. 單擊 .pkg 文件後,節點安裝程序將打開。 介紹部分為您提供了 Node.js 和 npm 版本。 點擊繼續

同意許可
在安裝程序中允許訪問

3. 單擊同意按鈕,然後單擊繼續。 將出現一個彈出窗口,允許訪問下載文件夾中的文件。 單擊確定。

選擇目的地

4. 在此部分中,您可以選擇 Node.js 必須下載到的目的地。 同樣,您可以根據您的系統空間進行選擇。 這裡我選擇默認位置。

安裝類型
輸入用戶名和密碼進行安裝

5. 單擊安裝按鈕。 單擊後,會出現一個詢問您系統密碼的彈出窗口。 輸入您的密碼,然後單擊安裝軟件。

安裝摘要

6. 加油! 我們已經安裝了 Node.js 和 npm 包。 單擊關閉以完成安裝。

Mac 中的 Visual Studio Code 安裝

我們已經成功安裝了 Node.js。 現在讓我們安裝我們的代碼編輯器 Visual Studio Code。 VS Code 是一個強大的工具,具有 Javascript 的所有內置功能。 因此,讓我們深入了解 Visual Studio Code 的安裝步驟。

這裡我們將討論在 Mac 中下載 VS 代碼的步驟。 首先,導航到 https://code.visualstudio.com/download 登陸VS代碼的下載頁面。

在 Mac 上安裝 VS Code

1. 單擊 Mac 圖標。 您可以在下面看到一個包正在下載。

已安裝的 zip 包

2. 點擊下載的文件解壓包。 解壓縮後,您可以在 Finder 的下載中找到 Visual Studio Code。

下載中的 VS Code

3. 加油! 我們已經下載了我們的代碼編輯器。 單擊該圖標以打開 Visual Studio Code。

創建新的 Cypress 項目

我們現在將看到如何在我們的 Visual Studio Code 中創建一個新的節點項目。 單擊 VS Code 圖標後,您將進入歡迎頁面。 接下來,單擊“添加工作區”文件夾以創建新文件夾。

創建新項目

單擊文件夾後,您將看到一個彈出窗口,要求添加新文件夾。 現在單擊要添加工作區的位置。 接下來,單擊新建文件夾並將文件夾名稱添加為 CypressProject,然後單擊打開。

新建文件夾

現在我們已經為 Cypress 測試創建了一個文件夾。 在開始編寫測試之前,我們應該安裝 package.json 文件。 在安裝之前,讓我們了解一下什麼是 package.json 文件。

什麼是 Package.json 文件?

Package.json 包含文件中的所有 npm 包,通常位於項目根目錄中。 它通常位於 Node.js 項目的根目錄中。 該文件包含項目所需的所有適用元數據。 它向 npm 提供所有信息,並幫助識別項目和處理依賴項。 Package.json 文件包含項目名稱、版本、許可證、依賴項等信息。
現在我們已經了解了什麼是 package.json 文件。 因此,讓我們開始在 Visual Studio 代碼中下載文件的步驟。

打開終端

1. 要執行我們的命令,我們需要打開終端。 在 VS 代碼的頂部,單擊 終端. 下拉菜單打開後,點擊 新航站樓.

安裝 package.json 文件

2. 終端打開後,在項目目錄中鍵入以下命令,然後按 Enter。

npm init

3. 按 Enter 後,您可以看到顯示的某些信息。 您可以在終端中輸入所需的詳細信息,然後按 Enter 以獲取所有字段。

項目詳情
  • 包裹名字: 您可以為您的包提供任何名稱。 我將它留空,因為它預先填充了我們創建的文件夾名稱。
  • 版本: 這給出了npm的版本信息。 您可以跳過此步驟並按 Enter。
  • 產品描述:在這裡,您可以為包裹提供一條附加信息。 如果需要,您可以鍵入說明並再次按 Enter。
  • 入口點:這代表應用程序的入口點。 由於它預先填充了 index.js,我們可以跳過此字段並按 Enter。
  • 測試命令: 用於運行測試的命令。 這裡不需要提供任何命令,但如果需要,您絕對可以提供任何命令。
  • Git 存儲庫:此字段需要 git 存儲庫的路徑。 您也可以將此字段留空。
  • 關鍵詞:幫助識別項目的唯一關鍵字。 您也可以跳過此字段。
  • 作者:這通常是此人的用戶名。 您可以添加您的姓名並按 Enter。
  • 執照:許可證已預先填充了 ISC。 您可以按 Enter 繼續。
  • 4. 按 Enter 後,終端將通過列出您提供的所有詳細信息來要求確認。 類型  並再次按 Enter。
Package.json 文件創建確認

我們現在已經生成了一個 package.json 文件。 您可以使用我們提供的信息在代碼編輯器中查看該文件。

創建 Package.json 文件

Cypress的安裝步驟

我們已經安裝了 Cypress 下載、節點和初始化 npm 的所有先決條件。 如上所述,有兩種方法可以下載 Cypress。

通過 npm 下載 Cypress

您必須在終端中傳遞下面提到的命令才能安裝 Cypress。 此外,您必須在項目目錄中給出命令來安裝節點並生成 package.json 文件。

npm install cypress --save-dev
賽普拉斯安裝命令

傳遞命令後,它將下載項目所需的所有相關依賴項。 在撰寫本文時,最新版本的 Cypress 是 7.7.0. 下載時版本可能不同。

成功安裝 Cypress

參考上圖,可以看到我們已經下載了 Cypress。 您可以通過終端中下載的表示和 package.json 文件中添加的 devDependencies 進行驗證。

直接下載

如果您沒有在項目中使用 Node 或 npm 包,我們可以直接從他們的 CDN 下載 Cypress。 但是,無法通過直接下載在儀表板中記錄測試。

您可以通過點擊下載 Cypress 直接從這裡下載 鏈接. 這將直接下載軟件包。 下載包後,打開 zip 文件並雙擊。 Cypress 無需安裝任何依賴項即可運行。 此下載將始終基於最新版本,並且將自動檢測平台。 但是,建議通過 npm 下載 Cypress 而不是直接下載。

有關技術的更多帖子,請訪問我們的 技術頁面.

回到頁首