準(zhǔn)備工作:
nodejs下載地址(默認(rèn)安裝自動(dòng)配置):http://nodejs.cn/download/
檢查安裝是否成功的命令:cmd下-輸入node -v
MicrosoftVSCode?編輯器地址(默認(rèn)安裝):https://visualstudio.microsoft.com/zh-hans/
cypress安裝:
打開(kāi)cmd輸入命令:npminstallcypress--save-dev
cypress項(xiàng)目配置
1.在磁盤中新建自己的項(xiàng)目如:D盤我新建自己的項(xiàng)目目錄my
2.在C:\Users\Lenovo\AppData\Local\Cypress\Cache\4.5.0\Cypress下打開(kāi)Cypress.exe
注意上面的lenovo換成自己的電腦用戶名,4.5.0可能版本有變化注意替換最笨的方法就是路徑一層一層往下找。
打開(kāi)后截圖如下:
{
"scripts":{
"cypress:open":"cypressopen",
"cypress:run":"cypressrun"
},
"devDependencies":{
"cypress":"^4.5.0",
"eslint-plugin-chai-friendly":"^0.6.0",
"eslint-plugin-cypress":"^2.10.3",
"mocha":"^6.0.2",
"mochawesome":"^6.1.1",
"mochawesome-merge":"^4.0.3",
"mochawesome-report-generator":"^5.1.0"
}
}
{"reporter":"mochawesome",
"reporterOptions":{
"overwrite":false,
"html":true,
"json":true
}
}
Cypress啟動(dòng)和使用:
打開(kāi)CMD進(jìn)入自建項(xiàng)目目錄下步鉴,輸入npm run cypress:open?回車古劲,打開(kāi)cypress編輯窗口
打開(kāi)之前安裝的MicrosoftVSCode 斥赋,編輯器:文件-打開(kāi)文件夾-選中自己建的項(xiàng)目
Cypress目錄結(jié)構(gòu)介紹(integration此目錄為用例存放目錄)
Cypress客戶端說(shuō)明
新建第一個(gè)用例-選中新建first_case.js文件
describe('用例集',function(){
beforeEach(()=>{
//cy.viewport('iphone-6')//Setviewportto375pxx667px需要手機(jī)模式訪問(wèn)時(shí)
//瀏覽器模式訪問(wèn)時(shí),可按照自己的需要設(shè)置窗口大小产艾,如cy.viewport(1920,1100)
//訪問(wèn)默認(rèn)讀取cypress.json內(nèi)的baseUrl
cy.visit('https://www.so.com/')
//基于URL做斷言
//cy.url().should('include','/user')
//基于title做斷言
cy.title().should('include','360')
})
it('搜索',functioncase1(){
//選中搜索框
cy.get('.bgs_ipt_wrquickdelete-wrap').click()
})
it('用例2',functioncase2(){
console.log('case2')
})
})
保存和調(diào)試用例疤剑,查看cypress客戶端會(huì)發(fā)現(xiàn)
可以直接使用調(diào)試獲取頁(yè)面元素寫腳本
以此類推,多看官網(wǎng)指導(dǎo)文檔入口