Cypress系列（3）- Cypress 的初次體驗_台北網頁設計

發佈日期: 作者:
8{icon} {views}

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

擁有後台管理系統的網站，將擁有強大的資料管理與更新功能，幫助您隨時新增網站的內容並節省網站開發的成本。

如果想從頭學起Cypress，可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

 

前言

這裏的栗子項目是 Cypress 提供的，在 github 上，所以要 clone 到本地的話需要裝 Git 哦！

 

下載被測應用

進入要安裝該應用的目錄，cmd 敲

git clone git@github.com:cypress-io/cypress-example-recipes.git

進入項目目錄下，安裝項目所需依賴包，敲

npm install

安裝成功后，項目的文件結構如下圖；所有被測應用栗子都在 examples 文件夾中

 

啟動被測應用

啟動測試應用時，可以進入不同子項目文件夾來啟動不同的應用；

假如，我們要測試表單類型的登錄，可以打開以下被測應用

cd examples\logging-in__html-web-forms>

 

啟動本地server

npm start

 

啟動成功后，cmd窗口將显示服務器的地址和端口

 

打開瀏覽器訪問：http://localhost:7077/，即可看到登錄頁面

 

快速測試登錄頁面

首先，設計測試用例步驟

  1. 訪問http://localhost:7077
  2. 輸入用戶名、密碼，點擊登錄
  3. 如果用戶名和密碼正確，則登錄成功，否則登錄失敗

 

接下來，我們來看看實現測試用例的步驟

 

創建測試

在此目錄下 cypress安裝路徑\node_modules\.bin\cypress\integration ，創建一個 js 文件，比如：testLogin.js

integration文件夾

  • Cypress 安裝完畢后自動生成的文件夾
  • 也是 Cypress 默認存放測試用例的根目錄，任何創建在此目錄下的文件都將被當作測試用例

 

編寫測試用例

首先，要在網頁上定位到用戶名、密碼輸入框，此案例中使用標籤+屬性名來定位；最終測試代碼如下

咱們在後面再講解代碼的意思哦

 

運行測試

進入 Cypress 安裝文件夾，cmd執行命令

yarn cypress:open

 

單擊 testLogin.js，Cypress 會啟動 Test  Runner 運行測試，運行成功后，將看到運行結果頁面；運行時長是真的快….

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

擁有後台管理系統的網站，將擁有強大的資料管理與更新功能，幫助您隨時新增網站的內容並節省網站開發的成本。

 

調試測試用例

前言

  • 測試用例運行時，難免會發生各種情況導致運行失敗；快速定位發生錯誤的位置，了解錯誤信息，一直是自動化測試的痛點
  • 而 Cypress 提供了多種 debug 能力，可以在測試運行錯誤時直達錯誤位置，並支持回放錯誤發生時的上下文信息，可直接看到測試失敗的原因 

 

Cypress Debug 能力介紹

每個命令均有快照且支持回放

像下圖，左側就是測試步驟，右側是測試頁面

  • 鼠標 hover 測試步驟，在右側可以看到執行該命令時的頁面效果
  • 鼠標點擊測試步驟，可以鎖定該步驟，然後查看上下文信息

 

支持查看測試運行時發生的特殊頁面事件

包括：

  • 網絡 XHR 請求
  • URL 哈希更改
  • 頁面加載
  • 表單提交

例如，上面測試用例中，點擊【submit】后產生的就是提交表單的請求，看下圖

可以看到一個 submit 操作，分成了三步走

  1. form sub：提交表單
  2. page load：頁面加載
  3. new url：訪問新的頁面

 

Console 輸出每個命令的詳細信息

瀏覽器F12即可見到熟悉的開發者工具頁面了

以上圖為栗子，一個 submitting form 表單提交的請求，在 Console 中打印了詳細的信息，可以快速了解在運行時的詳細狀態信息

 

暫停測試並逐步運行、恢復執行

在調試測試代碼時，Cypress 提供了兩個命令來暫停測試運行

  1. cy.pause()
  2. cy.debug()

 

cy.pause() 的栗子

在表單提交之前暫停測試，我們來看看運行結果

左上角有兩個按鈕，從左往右分別是

  • Resume：繼續執行測試用例並運行到結束
  • Next:get：測試會變成逐步運行，點一下執行下一個命令

 

cy.debug() 的栗子

運行測試看看下圖結果

測試運行在找到表單的時候，暫停運行並等待用戶操作

頂部的Paused in debugger，右邊兩個按鈕分別是
  • Resume Script Execution（F8）：繼續執行測試用例並運行到結束
  • Step Over next function call（F10）：跳轉到下一個調用debug()函數的地方 

 

當找到隱藏或多個元素時，可視化結果

更改 username 輸入框的定位器，使他匹配到不止一個元素

運行測試看看下面結果

因為定位表達式匹配到不止一個元素，所以執行 type() 方法時以失敗告終

 

總結

這一節咱們以測試一個登錄界面為需求，寫了一個簡單的測試用例來做栗子，後面將詳細講解 Cypress 的各部分內容哦

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益

擁有後台管理系統的網站，將擁有強大的資料管理與更新功能，幫助您隨時新增網站的內容並節省網站開發的成本。