使用Cypress進(jìn)行UI測(cè)試（一）安裝Cypress&第一個(gè)測(cè)試用例

• • Cypress簡(jiǎn)介
  • 安裝cypress并運(yùn)行官網(wǎng)示例
  • 項(xiàng)目結(jié)構(gòu)介紹
  • 用例結(jié)構(gòu)介紹
  • 第一個(gè)測(cè)試用例

Cypress簡(jiǎn)介

Cypress同TestCafe一樣，也是被譽(yù)為UI自動(dòng)化測(cè)試后Selenium時(shí)代的三駕馬車之一，從GitHub的star數(shù)量來(lái)說(shuō)，Cypress遠(yuǎn)超TestCafe，可見(jiàn)其受歡迎程度。筆者項(xiàng)目中也是使用的Cypress，確實(shí)很好用，所以想要推薦給大家。
Cypress主要有以下特點(diǎn)：
1.Cypress記錄了測(cè)試用例運(yùn)行snapshots，可以查看用例運(yùn)行軌跡，易于Debug
2.內(nèi)置自動(dòng)等待，不需要手動(dòng)加wait或者sleep
3.交互式的TestRunner界面，測(cè)試情況一目了然
4.可以模擬網(wǎng)絡(luò)請(qǐng)求流量
5.dashboard可以完美展示CI運(yùn)行情況

之后的系列文章會(huì)一一介紹這些特點(diǎn)，今天這篇會(huì)介紹如何安裝Cypress，然后使用Cypress運(yùn)行第一個(gè)測(cè)試用例。

安裝cypress并運(yùn)行官網(wǎng)示例

1.在任意目錄下新建一個(gè)空文件夾，然后執(zhí)行：npm init 初始化一個(gè)項(xiàng)目
2.使用IntelliJ打開(kāi)項(xiàng)目，在命令行執(zhí)行：npm install cypress --save-dev
3.打開(kāi)cypress：node_modules/.bin/cypress open
首次打開(kāi)的cypress會(huì)自動(dòng)加載一些example，如下圖
我們也可以將打開(kāi)cypress的命令寫在package.json文件中，以后打開(kāi)cypress直接運(yùn)行：npm run cypress:open即可

"scripts": {"cypress:open": "node_modules/.bin/cypress open" }

點(diǎn)擊運(yùn)行第一個(gè)測(cè)試用例actions.spec.js，這是cypress會(huì)啟動(dòng)Chrome瀏覽器運(yùn)行該測(cè)試用例，并且可以在TestRunner的左邊看到運(yùn)行了哪些測(cè)試用例，哪些成功了，哪些失敗了，一目了然。

項(xiàng)目結(jié)構(gòu)介紹

然后我們回到我們的項(xiàng)目源碼中，可以看到新增了一些文件和目錄，新增了cypress目錄并在其下有四個(gè)文件夾，新增了cypress.json文件。這是剛剛我們運(yùn)行cypress引入的cypress給的demo，它也就幫我們生成好了標(biāo)準(zhǔn)的目錄結(jié)構(gòu)。目錄結(jié)構(gòu)如下圖所示：

下面我們就來(lái)介紹一下使用cypress進(jìn)行UI測(cè)試的項(xiàng)目源碼目錄結(jié)構(gòu)。
1.fixtures：存放測(cè)試用例需要使用的測(cè)試數(shù)據(jù)。
2.integration：存放測(cè)試用例，我們可以看到文件夾下的所有js文件均以spec結(jié)尾，這也是cypress的內(nèi)在設(shè)置，它只會(huì)將以spec的文件識(shí)別為測(cè)試用例，當(dāng)然不一定是js文件，它也支持.jsx/.coffee/.cjsx文件。
3.plugins：加載插件的文件，cypress支持很多插件，可在其官網(wǎng)查看，下文也將介紹幾個(gè)常用插件。
4.support：里面的command.js文件用于自定義命令，index.js文件可以用于配置一些通用配置，每個(gè)測(cè)試用例運(yùn)行前會(huì)先運(yùn)行該文件。
5.cypress.json：cypress默認(rèn)的全局配置文件，比如配置生成報(bào)告的路徑、訪問(wèn)的baseUrl、用例運(yùn)行超時(shí)時(shí)間等等。具體的配置可參照官網(wǎng)：https://docs.cypress.io/guides/references/configuration.html#Options，下文也將介紹一些常見(jiàn)配置。

用例結(jié)構(gòu)介紹

我們可以打開(kāi)其中的一個(gè)用例actions.spec.js查看一下用例結(jié)構(gòu)，一個(gè)js文件有多個(gè)context/describe，一個(gè)describe包含了多個(gè)it描述的測(cè)試用例，所以可以將一個(gè)describe包含的內(nèi)容當(dāng)作一個(gè)測(cè)試集，其中包含多個(gè)測(cè)試用例。

第一個(gè)測(cè)試用例

下面我們就用cypress開(kāi)始寫我們的第一個(gè)測(cè)試用例：微博首頁(yè)搜索，然后注冊(cè)賬號(hào)。
如果你之前從未寫過(guò)UI測(cè)試，甚至不知道怎么開(kāi)頭，那么我們就可以按以下步驟進(jìn)行：
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', '手機(jī)號(hào)長(zhǎng)度11位，以13/14/15/16/17/18/19開(kāi)頭')}) })

我們使用pageObject的思想重構(gòu)測(cè)試用例：
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('手機(jī)號(hào)長(zhǎng)度11位，以13/14/15/16/17/18/19開(kāi)頭')}) })

由此可見(jiàn)，只要了解一些cypress的常用api，寫測(cè)試用例是十分簡(jiǎn)單的。

總結(jié)

以上是生活随笔為你收集整理的使用Cypress进行UI测试（一）安装Cypress第一个测试用例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。