使用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即可

"scripts": {"cypress:open": "node_modules/.bin/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

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', () => {cy.get('input[name=username]').type('123')cy.get('input[name=passwd]').type('123098')cy.get('select[node-type=birthday_year]').select('1995')cy.get('select[node-type=birthday_month]').select('2')cy.get('select[node-type=birthday_day]').select('21')cy.get('input[name=pincode]').type('123')cy.get('a[action-type=btn_submit]').click()cy.get('.error').should('contain', '手機號長度11位，以13/14/15/16/17/18/19開頭')}) })

我們使用pageObject的思想重構測試用例：
weiboSignUpPage.js

function inputUserName(userName) {cy.get('input[name=username]').type(userName) }function inputPassword(password) {cy.get('input[name=passwd]').type(password) }function selectBirthday(year, month, day) {cy.get('select[node-type=birthday_year]').select(year)cy.get('select[node-type=birthday_month]').select(month)cy.get('select[node-type=birthday_day]').select(day) }function inputPinCode(pinCode) {cy.get('input[name=pincode]').type(pinCode) }function submit() {cy.get('a[action-type=btn_submit]').click() }function shouldShowErrorMessage(errorMessage) {cy.get('.error').should('contain', errorMessage)}module.exports = {inputUserName: inputUserName,inputPassword: inputPassword,inputPinCode: inputPinCode,selectBirthday: selectBirthday,submit: submit,shouldShowErrorMessage: shouldShowErrorMessage }

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第一个测试用例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。