使用我們的 Cypress 框架教學增強您的 Web 測試

 

什麼是柏樹？

在今天 DevOps 以及雲端運算時代，在這個時代，Web應用程式正在經歷持續的發展和演變。 持續部署 隨著流水線的不斷發展，測試自動化框架也需要不斷創新。 Cypress 是一款端到端的測試自動化框架，非常適合現代 Web 應用環境。它是一個 JavaScript 框架，運行在 Node.js 平台上。使用 Cypress，您可以快速輕鬆地編寫和執行整合測試、單元測試和端到端測試。

Cypress 自備一個開源的測試運行器，易於設定和使用。您可以使用此測試運行器在本地編寫和運行每日測試。測試套件準備好後，您可以將其與持續集成 (CI) 工具集成，並使用控制面板記錄測試。測試運行器可讓您即時監控命令的執行過程。您無需安裝任何伺服器、依賴項或驅動程式。 Cypress 對開發者非常友好，測試也易於理解。

Cypress 透過對測試進行快照，讓您了解每一步的運行情況。當測試失敗時，您可以直接使用 Chrome DevTools 等工具進行偵錯。當您修改測試時，Cypress 會自動重新載入。因此，不會出現非同步問題。

Cypress 與 Selenium 有何不同？

由於 Selenium 是開源領域最受歡迎的自動化測試框架，Cypress 經常被拿來與它比較。然而，這兩個工具在架構和功能上存在根本性的差異。 Selenium 測試在瀏覽器外部運行，並使用 JWP 協定驅動瀏覽器，而 Cypress 則在瀏覽器應用程式的相同循環中運行。因此，它可以原生存取應用程式的每個物件。

由於架構上的差異，Selenium 更適合端對端測試，而 Cypress 速度更快，在某些情況下也更可靠。

柏樹安裝

安裝 Cypress 非常簡單方便。該框架提供了兩種安裝 Cypress 的方法。

1. 命令列工具
2. 桌面應用

第一步：安裝Node.js和Node套件管理器（npm）

Cypress 是一個基於 Node.js 的 JavaScript 框架。因此，請先安裝 Node.js，然後再安裝 Cypress。目前 LTS 版本為 12.8.1。現在，npm 也已包含在 Node.js 中，所以您無需單獨安裝。目前 npm 版本為 6.14.5。您可以存取 Node.js 官網並在此處下載 LTS 版本： https://nodejs.org/en/download/

使用 .msi 檔案安裝 node.js

接受許可協議。

選擇 node js 資料夾，然後按一下下一步。

在自訂設定中，選擇您想要安裝的功能。您可以點擊“下一步”並安裝預設項目。

如果你想從 C/C++ 執行 npm 模組，你需要安裝原生模組工具。否則，直接點選下一步。

在下一個畫面上，點選「安裝」。

完成安裝過程。

若要檢查 node.js 和 npm 是否已安裝成功，請開啟命令提示符，並輸入以下命令：

• 節點 -v
• npm -v

步驟 2：建立專案資料夾

要將所有工作保存在一個資料夾中，請建立一個新資料夾，然後導航到該資料夾。

• mkdir experitestcypress
• cd experitestcypress

步驟 3：建立 package.json 文件

若要建立 package.json 文件，請在命令提示字元中鍵入下列命令

• npm初始化-y

步驟 4：使用 npm 安裝 Cypress

導航到專案資料夾，然後輸入以下命令，從 CLI 安裝 Cypress。

• npm install cypress --save-dev

請稍等幾分鐘，程式需要下載並安裝所需的二進位。

第五步：打開柏樹

Cypress 已成功安裝。若要開啟 Cypress 測試運行器，請在命令提示字元中輸入以下命令。

• .node_modules.bincypress 打開

首次開啟時，它會建立一個包含測試腳本檔案的範例資料夾。

現在Cypress已經可以使用了。

創建你的第一個測試

要執行您的第一個測試，請在 Cypress 建立的整合資料夾中建立一個測試檔案。這裡，測試檔案被命名為 experitest_sample.js。

• 觸碰 experitestcypress/cypress/integration/experitest_sample.js

由於 Windows 無法識別觸控命令，請在整合資料夾中手動建立 .js 檔案。為此，請打開一個文字檔案並將其另存為 .js 檔案。

打開測試運行器後，它會顯示您建立的 experitest_sample.js 檔案。

運行第一次測試

要執行第一個測試，您可以使用任何 IDE 編輯 experitest_sample.js 檔案。對於此測試，請開啟 .js 檔案並新增以下簡單程式碼，然後儲存檔案。

[javascript] describe('Experitest First Test', () => { it('First test is successful!', () => { expect(true).to.equal(true) }) }) [/javascript]

現在，點擊測試運行器中的文件，它將打開瀏覽器並運行測試。

這裡，Chrome 瀏覽器由自動化測試軟體控制。

現在開啟 experitest_sample.js 文件，將「First test」改為「Second test」。儲存檔案後，瀏覽器會自動刷新並顯示新的結果。

以下是另一個範例。打開 experitest_sample.js 文件，輸入以下程式碼並儲存：

[javascript] describe('Experitest 網站', () => { it('開啟 Experitest 網站', () => { cy.visit('https://experitest.com') }) }) [/javascript]

儲存後，測試執行程式將在瀏覽器中開啟 Experitest 網站。

所以，測試運行器運作正常。您可以編寫不同的測試腳本並執行它們！

從命令列執行測試

若要從命令列介面執行此測試腳本，請在命令提示字元中鍵入下列命令：

• npx cypress run –record –spec “cypress/integration/experitest_sample.js”

測試成功運行後，工具將顯示結果。

安裝 Cypress 桌面工具

若要安裝桌面工具，請開啟 Cypress 網站並下載 Cypress 桌面軟體：

https://www.cypress.io/

這是桌面工具的直接下載連結：

https://download.cypress.io/desktop

下載壓縮檔案後，解壓縮軟體並開啟 Cypress 應用程式。

現在，選擇您的專案資料夾並開始使用測試運行器。

只需點擊 JavaScript 文件，該工具就會執行測試。

使用 Cypress 框架進行測試自動化

正如我們之前所展示的，Cypress 框架非常適合端到端測試自動化，是測試現代 Web 應用的絕佳解決方案。由於它是一個基於 Node.js 的 JavaScript 框架，因此您可以輕鬆編寫所有測試。在本文中，我們也了解了測試運行器。我們看到了它的易用性，以及如何在無需安裝任何伺服器、依賴項或驅動程式的情況下，即時監控命令的執行過程。當然，如果您想了解它如何與我們的 SeeTest 平台配合使用，歡迎繼續閱讀。 點此註冊免費試用 SeeTest 為了親自嘗試。另請訪問 Digital.ai Continuous Testing 了解我們的測試產品如何為您的企業帶來益處。

Guy Arieli – 技術長