使用Cypress进行UI测试(一)安装Cypress第一个测试用例
使用Cypress進行UI測試(一)安裝Cypress&第一個測試用例
- Cypress簡介
- 安裝cypress并運行官網示例
- 項目結構介紹
- 用例結構介紹
- 第一個測試用例
Cypress簡介
Cypress同TestCafe一樣,也是被譽為UI自動化測試后Selenium時代的三駕馬車之一,從GitHub的star數量來說,Cypress遠超TestCafe,可見其受歡迎程度。筆者項目中也是使用的Cypress,確實很好用,所以想要推薦給大家。
Cypress主要有以下特點:
1.Cypress記錄了測試用例運行snapshots,可以查看用例運行軌跡,易于Debug
2.內置自動等待,不需要手動加wait或者sleep
3.交互式的TestRunner界面,測試情況一目了然
4.可以模擬網絡請求流量
5.dashboard可以完美展示CI運行情況
之后的系列文章會一一介紹這些特點,今天這篇會介紹如何安裝Cypress,然后使用Cypress運行第一個測試用例。
安裝cypress并運行官網示例
1.在任意目錄下新建一個空文件夾,然后執行:npm init 初始化一個項目
2.使用IntelliJ打開項目,在命令行執行:npm install cypress --save-dev
3.打開cypress:node_modules/.bin/cypress open
首次打開的cypress會自動加載一些example,如下圖
我們也可以將打開cypress的命令寫在package.json文件中,以后打開cypress直接運行:npm run cypress:open即可
點擊運行第一個測試用例actions.spec.js,這是cypress會啟動Chrome瀏覽器運行該測試用例,并且可以在TestRunner的左邊看到運行了哪些測試用例,哪些成功了,哪些失敗了,一目了然。
項目結構介紹
然后我們回到我們的項目源碼中,可以看到新增了一些文件和目錄,新增了cypress目錄并在其下有四個文件夾,新增了cypress.json文件。這是剛剛我們運行cypress引入的cypress給的demo,它也就幫我們生成好了標準的目錄結構。目錄結構如下圖所示:
下面我們就來介紹一下使用cypress進行UI測試的項目源碼目錄結構。
1.fixtures:存放測試用例需要使用的測試數據。
2.integration:存放測試用例,我們可以看到文件夾下的所有js文件均以spec結尾,這也是cypress的內在設置,它只會將以spec的文件識別為測試用例,當然不一定是js文件,它也支持.jsx/.coffee/.cjsx文件。
3.plugins:加載插件的文件,cypress支持很多插件,可在其官網查看,下文也將介紹幾個常用插件。
4.support:里面的command.js文件用于自定義命令,index.js文件可以用于配置一些通用配置,每個測試用例運行前會先運行該文件。
5.cypress.json:cypress默認的全局配置文件,比如配置生成報告的路徑、訪問的baseUrl、用例運行超時時間等等。具體的配置可參照官網:https://docs.cypress.io/guides/references/configuration.html#Options,下文也將介紹一些常見配置。
用例結構介紹
我們可以打開其中的一個用例actions.spec.js查看一下用例結構,一個js文件有多個context/describe,一個describe包含了多個it描述的測試用例,所以可以將一個describe包含的內容當作一個測試集,其中包含多個測試用例。
第一個測試用例
下面我們就用cypress開始寫我們的第一個測試用例:微博首頁搜索,然后注冊賬號。
如果你之前從未寫過UI測試,甚至不知道怎么開頭,那么我們就可以按以下步驟進行:
1.Visit a web page.
2.Query for an element.
3.Interact with that element.
4.Assert about the content on the page
用例代碼如下
weiboSignUpTest.spec.js
我們使用pageObject的思想重構測試用例:
weiboSignUpPage.js
weiboSignUpTest.spec.js
import signUpPage from './weiboSignUpPage'describe('weibo sign up test', () => {beforeEach('visit sign up page of weibo', () => {cy.visit('https://weibo.com/signup/signup.php')})it('should sign up in weibo successfully', () => {signUpPage.inputUserName('123')signUpPage.inputPassword('123098')signUpPage.selectBirthday('1995', '2', '21')signUpPage.inputPinCode('123')signUpPage.submit()signUpPage.shouldShowErrorMessage('手機號長度11位,以13/14/15/16/17/18/19開頭')}) })由此可見,只要了解一些cypress的常用api,寫測試用例是十分簡單的。
總結
以上是生活随笔為你收集整理的使用Cypress进行UI测试(一)安装Cypress第一个测试用例的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: IBM-142-XML认证
- 下一篇: 今天发现百度地图街景拼接的一处BUG