?

Cypress

?

技術(shù)雷達(dá) 2018 底推的工具：https://www.thoughtworks.com/cn/radar

What：

　　　　前端網(wǎng)絡(luò)，cypress是在mocha式API基礎(chǔ)上構(gòu)建的一套開(kāi)箱可用的E2E（端到端即黑盒測(cè)試）測(cè)試框架，對(duì)比其他測(cè)試框架，它提供一套自己的最佳實(shí)踐方案，無(wú)需其他測(cè)試工具庫(kù)，配置方便簡(jiǎn)單但功能異常強(qiáng)大，可以使用webpack項(xiàng)目配置，還提供了一個(gè)強(qiáng)大的GUI圖形工具。入門簡(jiǎn)單，上手方便，怎么舒服怎么來(lái)呀

cypressGUI方式的測(cè)試使用真實(shí)瀏覽器，非GUI方式使用chrome-headless，不是用模擬方式進(jìn)行測(cè)試，更真實(shí)的展現(xiàn)實(shí)際環(huán)境中的測(cè)試過(guò)程和結(jié)果。

完整的端到端測(cè)試體驗(yàn)。

Why：

　　　　帶GUI工具，想測(cè)啥就點(diǎn)啥，還可以查看整個(gè)測(cè)試過(guò)程，想錄屏還可以錄屏喲

測(cè)試的每一步都有snapshot，可以通過(guò)GUI工具查看每個(gè)過(guò)程的頁(yè)面狀態(tài)，不是截圖而是真是的頁(yè)面DOM環(huán)境喲！

自帶數(shù)據(jù)mock和請(qǐng)求攔截機(jī)制，還原線上數(shù)據(jù)引起的bug別提有多輕松了

?

和wepbakc配置，實(shí)現(xiàn)無(wú)論修改測(cè)試文件還是被測(cè)試代碼都可以自動(dòng)重測(cè)

可以給測(cè)試用例加上only或者skip來(lái)避免重測(cè)測(cè)試文件里的所有用例: it.only('只測(cè)試這個(gè)喲); it.skip('不要測(cè)這個(gè)');

?

Build：

　　　　先安裝node，npm install cypress --save-dev，會(huì)安裝在選定的路徑下

Use：

　　　　cmd 運(yùn)行 node_modules\.bin\cypress open npx cypress run 啟動(dòng)

建測(cè)試用例：

　　　新開(kāi)cmd

　　 　　touch {your_project}/cypress/integration/sample_spec.js

　　　　your_project ：C:\Users\yingqinyi\cypress\integration\examples

?

cypress.json 在cypress文件夾外

Package.json 寫cypress命令

{“scripts”：{
?
"cypress:run": "node_modules/.bin/cypress run",(運(yùn)行cypress里的js)
?
“cypress：open”：“node_modules/.bin/cypress open”(打開(kāi)cypress)
?
}
}

?

cmd ：npm run cypress:open

npx cypress run

?

運(yùn)行單個(gè)spec文件

npm run cy:run -- --record --spec "cypress/integration/my-spec.js"

編寫：

describe('test API',()=>{
?
it('MTNY web',()=>{
?
cy.visit('/')
?
cy.
?
})
?
})
?
?

?

?

?

?

6.cypress reporter

1.運(yùn)行cypress 在安裝路徑內(nèi)運(yùn)行
D:\171\Cypress-tools\cypress 在Cypress-tools 路徑下運(yùn)行
2.獲取projectId，key
1.運(yùn)行 npx cypress open
2.打開(kāi) runs 獲取projectId，key
3.復(fù)制projectId到cypress.json里
3.運(yùn)行有reporter的項(xiàng)目
1.
運(yùn)行cmd在cypress路徑下：npx cypress run --record --key 1112fd2f-6e74-4bfe-bb69-2b994f3fa8a8
2.運(yùn)行結(jié)束有網(wǎng)址 ? https://dashboard.cypress.io/#/projects/pfjcjn/runs/5

?

7.cypress-docker

?

1.系統(tǒng)安裝docker
2.建本地images
git clone https://github.com/mtlynch/hello-world-cypress.git
cd hello-world-cypress
docker build --tag sentimentalyzer .
3.本地項(xiàng)目移植
將js，package.json,cypress.json移入e2e中
4.啟動(dòng)腳本
docker-compose up
?
?

?

轉(zhuǎn)載于:https://www.cnblogs.com/pangdaxingyyy/p/10967767.html

總結(jié)

以上是生活随笔為你收集整理的Cypress的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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