1、前言

一提起 Web UI 自動化時，大多數都會想到自動化測試工具 Selenium。隨著測試技術的不斷發(fā)展，出現了很多優(yōu)秀的自動化測試工具。

本篇將介紹一款目前市面上很受歡迎的自動化測試工具-Cypress。

Cypress 是一個易于使用、快速穩(wěn)定、可靠性高、全面性強的自動化測試框架，因此很多自動化測試都在使用它。

2、簡介

Cypress 是一個基于 JavaScript 的端到端測試框架，它專注于提供簡單易用、可靠穩(wěn)定的自動化測試解決方案。Cypress 提供了一個強大的 API，可以輕松編寫、運行和調試測試用例，同時還提供了豐富的命令和斷言庫，幫助測試人員更高效地編寫測試用例。Cypress 還內置了自動化截圖、視頻錄制、實時重載等功能，讓測試人員更加高效地進行測試工作。

特性：

1、時間穿梭：Cypress 在測試運行時拍攝快照。只需將鼠標懸停在“命令日志”中的命令上，即可準確查看每一步發(fā)生了什么。

2、調試性：不要再猜測為什么你的測試失敗了。直接從 Chrome DevTools 等熟悉的工具進行調試。我們的可讀錯誤和堆棧跟蹤使調試速度極快。

3、實時重新加載：每當您對測試進行更改時，Cypress 會自動重新加載。查看應用程序中實時執(zhí)行的命令。

4、自動等待：不要在測試中添加等待或睡眠。Cypress 在繼續(xù)之前自動等待命令和斷言。不再是異步地獄。

官方地址：

https://www.cypress.io/

GitHub地址：

https://github.com/cypress-io/cypress

3、安裝

在 Windows 環(huán)境下進行部署。采用 Npm 方式安裝。

1、Node.js

如果你使用 npm 的方式安裝 Cypress，支持版本：

Node.js 12 或 14 及更高版本。

首先安裝 Node.js

下載地址：

https://nodejs.org/en/download/

因作者之前已安裝過 Node.js，則在命令行輸入以下命令，進行安裝驗證即可。

node --version

npm --version

如圖所示：系統(tǒng)已經有了 Node.js 環(huán)境，且滿足安裝 Cypress 的要求。

執(zhí)行 npm init -y 命令生成 package.json 文件。

例如在作者系統(tǒng)的 D 盤路徑下創(chuàng)建 CypressProjects 目錄。

打開命令行工具，跳轉到新創(chuàng)建的目錄里，輸入 npm init -y

配置生成 package.json 文件。

文件創(chuàng)建完成。里面包含了項目的配置信息。

2、Cypress

輸入安裝命令 npm install cypress --save-dev

（還是在創(chuàng)建的 CypressProjects 目錄里）

安裝完成后，目錄結構。

4、打開Cypress

打開命令行，跳轉到安裝目錄下（如 D:\CypressProjects）

執(zhí)行命令 node_modules\.bin\cypress open

打開 Cypress

可以看到支持端到端測試和組件測試。

端到端測試：從端到端構建和測試應用程序的整個體驗，以確保每個流符合您的期望。

組件測試：獨立地從設計系統(tǒng)構建和測試組件，以確保每個狀態(tài)符合您的期望。

端到端測試與組件測試之間的差異：

1、端到端測試：

（1）通過 cy.visit() 訪問 URL

（2）跨多個頁面測試流程和功能

（3）非常適合測試 CD 工作流中的集成流

2、組件測試：

（1）通過 cy.mount() 導入組件

（2）隔離測試設計系統(tǒng)的各個組件

（3）非常適合測試 CI 中的隔離流和組件

以端到端測試為例

選擇瀏覽器，選擇您首選的瀏覽器進行端到端測試。例如選擇 Electron。

之后點擊啟動端到端測試。

創(chuàng)建你的第一個規(guī)范，可選擇如下規(guī)范。

腳手架示例規(guī)范：我們將生成幾個示例規(guī)范，幫助指導您如何在 Cypress 中編寫測試。

創(chuàng)建新的空規(guī)范：我們將生成一個空的 spec 文件，用于開始測試應用程序。

點擊創(chuàng)建新的空規(guī)范。

跳轉到輸入新規(guī)格路徑對話框，輸入新規(guī)范的名稱即可。這里填寫默認名稱。

點擊創(chuàng)建規(guī)范。

成功添加規(guī)范。

點擊運行規(guī)范，執(zhí)行成功。

5、第一個腳本

修改已創(chuàng)建的 spec.cy.js 規(guī)范。

修改前的腳本內容：

describe('empty spec', () => {
??it('passes', () => {
????cy.visit('https://example.cypress.io')
??})
})

修改后的腳本內容：

describe('公眾號：AllTests軟件測試', () => {
??it('訪問首頁', () => {
????cy.visit('https://www.baidu.com/')?// 訪問網站首頁
????cy.contains('百度一下')?// 確認頁面包含指定文本
??})

??it('搜索關鍵詞', () => {
????cy.get('input[name="wd"]')?// 獲取搜索框
??????.type('cypress')?// 輸入搜索關鍵詞
????cy.get('input[type="submit"]')?// 獲取搜索按鈕
??????.click()?// 點擊搜索按鈕
????cy.contains('cypress')?// 確認搜索結果頁面包含指定文本
??})
})

上面的測試腳本包含兩個測試用例，第一個測試用例訪問網站首頁并確認頁面包含指定文本；第二個測試用例搜索關鍵詞并確認搜索結果頁面包含指定文本。在這個示例中，我們使用了 Cypress 提供的 API 來訪問頁面、獲取元素、輸入文本、點擊按鈕等操作，同時使用了 Cypress 提供的斷言庫來確認頁面是否包含指定文本。

運行結果，執(zhí)行成功。

6、Cypress設置

設置打開方式，修改 package.json 文件。

方式一：cypress run??是以無頭瀏覽器模式跑測試用例文件夾下的所有測試用例。

"scripts": {
??"cypress:run":?"cypress run"
}

例如：

{
??"name":?"cypressprojects",
??"version":?"1.0.0",
??"description":?"",
??"main":?"index.js",
??"scripts": {
????"cypress:run":?"cypress run"
??},
??"keywords": [],
??"author":?"",
??"license":?"ISC",
??"devDependencies": {
????"cypress":?"^10.6.0"
??}
}

保存后，打開命令行，輸入命令 npm run cypress:run

方式二：cypress open?會打開測試用例集的界面，需要手動運行。

"scripts": {
??"cypress:open":?"cypress open"
}

例如：

{
??"name":?"cypressprojects",
??"version":?"1.0.0",
??"description":?"",
??"main":?"index.js",
??"scripts": {
????"cypress:open":?"cypress open"
??},
??"keywords": [],
??"author":?"",
??"license":?"ISC",
??"devDependencies": {
????"cypress":?"^10.6.0"
??}
}

保存后，打開命令行，輸入命令 npm run cypress:open

更多官方示例：

https://github.com/cypress-io/cypress-example-recipes

7、Cypress目錄

最后： 下方這份完整的軟件測試視頻學習教程已經整理上傳完成，朋友們如果需要可以自行免費領取【保證100%免費】

這些資料，對于【軟件測試】的朋友來說應該是最全面最完整的備戰(zhàn)倉庫，這個倉庫也陪伴上萬個測試工程師們走過最艱難的路程，希望也能幫助到你！

文章來源地址http://www.zghlxwxcb.cn/news/detail-494755.html

到了這里，關于前端自動化測試框架-Cypress的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！