每天進(jìn)步一點(diǎn)點(diǎn)，關(guān)注我們哦，每天分享測(cè)試技術(shù)文章

本文章出自【碼同學(xué)軟件測(cè)試】

碼同學(xué)公眾號(hào)：自動(dòng)化軟件測(cè)試，領(lǐng)取資料可加：magetest

碼同學(xué)抖音號(hào)：小碼哥聊軟件測(cè)試

01Windows下安裝

方法一

① 安裝node.js(https://nodejs.org/en/download/)，根據(jù)版本選擇32位或64位。

② 確認(rèn)ndejs?和?npm是否安裝上:

C:\Users\xiang>node -v

v12.18.0

C:\Users\xiang>npm -v

6.14.

③ 生成package.json（假設(shè)準(zhǔn)備安裝在c:\Cypress>）

C:\Users\xiang>cd c:\Cypress

C:\Cypress>npm init

④ 安裝Cypress

C:\Cypress>npm install cypress --save-dev

方法二

① 安裝yarn (https://yarnpkg.com/en/docs/install#windows-stable)

② 確認(rèn)yarn是否安裝上

C:\Users\xiang>yarn -v

1.22.4

③ 安裝Cypress

C:\Users\xiang>cd c:\Cypress

C:\Cypress>yarn add cypress --dev

02運(yùn)行

方法一

C:\Cypress\node_modules\.bin>cypress open

方法二

C:\Cypress>yarn run cypress open

方法三（我經(jīng)常用的方法）

配置C:\Cypress\package.json

{

? "license": "ISC",

? "scripts": {

? ? "cypress:open": "cypress open",

? ? "cypress:run": "cypress run"

? },

? "devDependencies": {

? ? "cypress": "^4.8.0"

? }

}

打開運(yùn)行控制器

C:\Cypress>yarn run cypress open

運(yùn)行默認(rèn)路徑下的所有測(cè)試代碼

C:\Cypress>yarn run cypress run

默認(rèn)路徑為C:\Cypress\cypress\integration，可以通過

{

? …

"integrationFolder": "cypress/integration/demo",

…

}

改變默認(rèn)路徑，上述代碼中默認(rèn)路徑改為

C:\Cypress\cypress\integration\demo

03測(cè)試框架&代碼案例

• before():

  相當(dāng)于unittest中的def setUp(cls)方法或者Junit的@Before方法標(biāo)簽；

• after():

  相當(dāng)于unittest中的?def teardown(cls)?方法或者Junit的 @Before方法標(biāo)簽；

• beforeEach()?:

  相當(dāng)于unittest中的def setUpClass(cls)?方法或者Junit的@BeforeClass方法標(biāo)簽；

• afterEach()?:

  相當(dāng)于unittest中的def tearDownClass(cls)?方法或者Junit的@AfterClass方法標(biāo)簽。

GUI測(cè)試代碼案例

1、第一個(gè)測(cè)試代碼

測(cè)試電子商務(wù)系統(tǒng)登錄程序

describe('login',function(){

? const username = 'cindy'

? const password = '123456'

? context('測(cè)試電子商務(wù)網(wǎng)站',function(){

? ? it('登錄成功，調(diào)到商品列表頁面',function(){

? ? ? cy.visit('http://127.0.0.1:8000')

? ? ? cy.get('input[name=username]').type(username)

? ? ? cy.get('input[name=password]').type(password)

? ? ? cy.get('form').submit()

? ? ? //斷言

? ? ? cy.url().should('include','/goods_view')

? ? ? cy.get('title').should('contain','電子商務(wù)系統(tǒng)')

? ? ?})??

? ? })

})

2、元素查找 - get

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

根據(jù)元素 id?查找

cy.get('#kw')

根據(jù)元素名稱查找

cy.get('input[name="wd"]')

根據(jù)元素的類名查找

cy.get('.s_ipt')

根據(jù)CSS selector查找、

cy.get('input[maxlength ="100"]')

3、元素查找 – contains

根據(jù)元素文本查找

cy.contains('value')??

根據(jù)元素屬性及其文本查找

cy.get('div[name="ele-name"]').contains('value')

使用正則匹配元素文本以查找

cy.get('.class-name').contains(/[0-9]*/)

4、操作

type(String)、輸入，比如

cy.get('#kw'). type('Testing')

click()、點(diǎn)擊，比如

cy.get('.btn'). click ()

clear()、清空input或textarea的內(nèi)容，比如

cy.get('.ant-input').clear()

submit()、提交表單，比如

cy.get('.ant-form').submit()

dblclick()、元素雙擊，比如

cy.get('.ant-btn').dblclick()

rightclick()、元素右擊，比如

cy.get('.ant-btn').rightclick()

select(String)、對(duì)元素選擇，比如

cy.get('.ant-select').select('apples')

check()、勾選checkbox，比如

cy.get('.ant-checkbox').check()

Uncheck、反選 checkbox，比如

cy.get('.ant-checkbox').uncheck()

scrollIntoView()、如果某個(gè)元素不在當(dāng)前可視范圍，可以滑動(dòng)至可視范圍，比如

cy.get('#id').scrollIntoView()

scrollTo(String)、指定位置滑動(dòng)，比如

cy.scrollTo('bottom')、cy.get('#id').scrollTo(250, 250)

5、鼠標(biāo)操作

免費(fèi)領(lǐng)取碼同學(xué)軟件測(cè)試課程筆記+超多學(xué)習(xí)資料+完整視頻+面試題，可加微信：magetest

鼠標(biāo)懸停事件：

cy.get('button').trigger('mouseover')

鼠標(biāo)按下：

cy.get('button').trigger('mousedown')

鼠標(biāo)抬起：

cy.get('button').trigger('mouseleave')

cy.get('button').trigger('mouseup')

鼠標(biāo)長按事件：

cy.get('button').trigger('mousedown')

cy.wait(1000)

cy.get('button').trigger('mouseleave')

鼠標(biāo)拖拽事件

cy.get('[data-cy=draggable]')

? .trigger('mousedown', { which: 1, pageX: 600, pageY: 100 })

? .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })

? .trigger('mouseup')

describe('baidu',function(){

? context('測(cè)試百度網(wǎng)站',function(){

? ? it('查詢成功',function(){

? ? ? cy.visit('https://www.baidu.com')

? ? ? cy.get('input[name=wd]').type("軟件測(cè)試")

? ? ? cy.get('#su').click()

? ? ? cy.get('title').should('contain','百度搜索')

? ? ?})?

? ? it('進(jìn)入高級(jí)查詢成功',function(){

? ? ? cy.get('a[name=tj_settingicon]').trigger('mouseover')

? ? ? cy.get('.bdpfmenu').should('exist')

? ? ?})??

? })

})

6、斷言

針對(duì)長度的斷言

cy.get('li.selected').should('have.length',3)

針對(duì)類的斷言

cy.get('from').fijd('input').should('not.have.class','disabled')

針對(duì)值斷言

cy.get('textarea').should('have.value','3testing')

針對(duì)文本內(nèi)容的斷言

cy.get('a').parent('span.help').should('contain','click me')

針對(duì)元素可見與否的斷言

cy.get('button').should('be.visible')

針對(duì)元素存在與否的斷言

cy.get('#loading').should('not.exist')

針對(duì)元素狀態(tài)的State的斷言

cy.get(':radio').should('be.checked')

針對(duì)CSS的斷言

cy.get('.completed').should('have.css','text-decoration','line-through')

7、跨iframe操作

describe('login',function(){

? context('啄木鳥',function(){

? ? it('點(diǎn)擊我的介紹成功',function(){

? ? ? cy.visit('http://www.3testing.com')

? ? ? cy.get('#head',{timeout: 2000})

? ? ? ? ? ? .then($iframe => {

? ? ? ? ? ? ? ? cy.wrap($iframe.contents().find("#introduce"));

? ? ? ? ? ? })

? ? ? ? ? ? .then($btn => {

? ? ? ? ? ? ? ? cy.wrap($btn).click()

? ? ? ? ? ? });

? ? ? //斷言

? ? ? cy.url().should('include','introduce.html')

? ? ? cy.get('title').should('contain','啄木鳥')

? ? ?})??

? })

})

8、多窗口操作

Cypress不支持多窗口操作。

04API測(cè)試

1、普通API測(cè)試

describe('login',function(){

? const username = 'cindy'

? const password = '123456'

? const producturl="http://127.0.0.1:8000/login_action/"

? cy.request({

? ? ? ? method: 'POST',

? ? ? ? url: producturl,

? ? ? ? body: {

? ? ? ? ? username: username

? ? ? ? ? password: password

}

? ? ? })

? })

2、CSRF token API測(cè)試

describe('login',function(){

? const username = 'cindy'

? const password = '123456'

? const producturl="http://127.0.0.1:8000/login_action/"

? ? Cypress.Commands.add('loginByCSRF', (csrfToken) => {

? ? cy.request({

? ? ? ? method: 'POST',

? ? ? ? url: producturl,

? ? ? ? failOnStatusCode: false, // 不要失敗，這樣我們才能斷言

? ? ? ? form: true, // 我們正在提交一份常規(guī)表格

? ? ? ? body: {

? ? ? ? ? username,

? ? ? ? ? password,

? ? ? ? ? csrfmiddlewaretoken: csrfToken // 將此作為主體的一部分插入

? ? ? ? }

? ? ? })

? })

? // csrf在返回的html中,我測(cè)試的Django產(chǎn)品的CSRF token用這種方法

? it('策略#1:從HTML解析令牌', function(){

? ? // 如果我們不能改變我們的服務(wù)器代碼以使解析CSRF令牌變得更容易，

? ? // 我們可以簡單地使用cy.request來獲取登錄頁面，然后解析HTML內(nèi)容

? ? // 以找到嵌入在頁面中的CSRF令牌

? ? cy.request(producturl)

? ? ? .its('body')

? ? ? .then((body) => {

? ? ? ? //我們可以用Cypress.$解析字符串主體，從而使我們能夠輕松地查詢到它

? ? cy.log(body)

? ? ? ? const $html = Cypress.$(body)

? ? ? ? const csrf? = $html.find("input[name=csrfmiddlewaretoken]").val()

? ? cy.loginByCSRF(csrf)

? ? ? ? ? .then((resp) => {

? ? ? ? ? ? expect(resp.status).to.eq(200)

? ? ? expect(resp.body).to.contain("Company 2017")

? ? ? ? ? })

? ? ? })

? ? })

? })

/*

? // 如果csrf在響應(yīng)頭中

? it('策略#2:從響應(yīng)頭解析令牌', function(){

? ? // 如果我們將csrf令牌嵌入到響應(yīng)頭中，那么我們就可以更容易地提取它,

? ? // 而不必深究最終的HTML

? ? cy.request(producturl)

? ? ? .its('headers')

? ? ? .then((headers) => {

? ? ? ? const csrf = headers['csrftoken']

? ? cy.log(csrf)

? ? ? ? cy.loginByCSRF(csrf)

? ? ? ? ? .then((resp) => {

? ? ? ? ? ? expect(resp.status).to.eq(200)

? ? ? ? ? ? expect(resp.body).to.contain("Company 2017")

? ? ? ? ? })

? ? ? })

? ? })

? ?}) */

免費(fèi)領(lǐng)取碼同學(xué)軟件測(cè)試課程筆記+超多學(xué)習(xí)資料+學(xué)習(xí)完整視頻 ? 可加：magetest／關(guān)注碼同學(xué)公眾號(hào)：自動(dòng)化軟件測(cè)試

本文著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。