若是想從頭學起Cypress，能夠看下面的系列文章哦html
https://www.cnblogs.com/poloyy/category/1768839.htmlnode
前言
這裏的栗子項目時 Cypress 提供的，在 github 上，因此要 clone 到本地的話須要裝 Git 哦！git
下載被測應用
進入要安裝該應用的目錄，cmd 敲github
git clone git@github.com:cypress-io/cypress-example-recipes.git
進入項目目錄下，安裝項目所需依賴包，敲web
npm install
安裝成功後，項目的文件結構以下圖；全部被測應用栗子都在 examples 文件夾中npm
啓動被測應用
啓動測試應用時，能夠進入不一樣子項目文件夾來啓動不一樣的應用；瀏覽器
假如，咱們要測試表單類型的登陸，能夠打開如下被測應用服務器
cd examples\logging-in__html-web-forms>
啓動本地server網絡
npm start
啓動成功後，cmd窗口將顯示服務器的地址和端口函數
打開瀏覽器訪問：http://localhost:7077/，便可看到登陸頁面
快速測試登陸頁面
首先，設計測試用例步驟
- 訪問http://localhost:7077
- 輸入用戶名、密碼，點擊登陸
- 若是用戶名和密碼正確，則登陸成功，不然登陸失敗
接下來，咱們來看看實現測試用例的步驟
建立測試
在此目錄下 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 操做，分紅了三步走
- form sub：提交表單
- page load：頁面加載
- new url：訪問新的頁面
Console 輸出每一個命令的詳細信息
瀏覽器F12便可見到熟悉的開發者工具頁面了
以上圖爲栗子，一個 submitting form 表單提交的請求，在 Console 中打印了詳細的信息，能夠快速瞭解在運行時的詳細狀態信息
暫停測試並逐步運行、恢復執行
在調試測試代碼時，Cypress 提供了兩個命令來暫停測試運行
- cy.pause()
- 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 的各部份內容哦