一：Cypress簡(jiǎn)介
隨便著Web應(yīng)用項(xiàng)目的不斷發(fā)展，測(cè)試也要不斷發(fā)展慕淡，Cypress是為現(xiàn)代網(wǎng)絡(luò)打造的，基于JavaScript語言的一種前端自動(dòng)化測(cè)試工具傻寂，測(cè)試也是如此携兵，對(duì)瀏覽器中運(yùn)行的所有內(nèi)容進(jìn)行快速，輕松和可靠的測(cè)試个绍。
Cypress是自集成的浪汪，它提供了一套完整的端到端的測(cè)試體驗(yàn)死遭，正如官網(wǎng)上所說：
安裝Cypress很簡(jiǎn)單,無需依賴項(xiàng),無需額外下載或更改代碼呀潭。
輕松至非，快速地編寫測(cè)試糠聪，并在構(gòu)建Web應(yīng)用程序時(shí)觀察它們的實(shí)時(shí)執(zhí)行。
在CI中調(diào)試測(cè)試就像在本地運(yùn)行測(cè)試一樣容易趣惠。具有內(nèi)置的并行化和負(fù)載平衡功能身害。
記錄CI測(cè)試數(shù)據(jù)，屏幕截圖和視頻-并在“ 儀表盤”中查看匯總的下一級(jí)見解侍瑟。
二：Cypress工作原理
Cypress在與應(yīng)用程序相同的生命周期里執(zhí)行丙猬，當(dāng)你運(yùn)行測(cè)試時(shí)，Cypress首先使用webpack將測(cè)試代碼中的所有模塊bundle到一個(gè)js文件中咐低，然后袜腥，它會(huì)運(yùn)行瀏覽器钉汗，并且將測(cè)試代碼注入一個(gè)空白的頁面里，然后它將在瀏覽器中運(yùn)行測(cè)試代碼福侈。
在每次測(cè)試首次加載Cypress時(shí)卢未，內(nèi)部Cypress Web應(yīng)用程序先把自己托管在本地的一個(gè)隨機(jī)端口上，在識(shí)別出測(cè)試中發(fā)出的第一個(gè)cy.visit()命令后伟墙，Cypress將會(huì)更改其本地的URL以匹配你遠(yuǎn)程應(yīng)用程序的Origin滴铅，這使得你的測(cè)試代碼和應(yīng)用程序可以在一個(gè)Run Loop中運(yùn)行。
因?yàn)镃ypress測(cè)試代碼和應(yīng)用程序均運(yùn)行在由Cypress全權(quán)控制的瀏覽器中拱烁，且它們運(yùn)行在同一個(gè)Domain下的不同iframe內(nèi)，所以Cypress的測(cè)試代碼可以直接操作DOM邦投，Windows Objects甚至Local Storages而無須通過網(wǎng)絡(luò)訪問擅笔，這就是Cypress可以運(yùn)行的更快的原因。
Cypress還可以在網(wǎng)絡(luò)請(qǐng)求層進(jìn)行即時(shí)讀取和更改網(wǎng)絡(luò)流量的操作蠢涝，Cypress背后是Node.js Process阅懦，任何發(fā)往瀏覽器之外的HTTP的請(qǐng)求和響應(yīng)，均由Cypress生成的惯吕，被Node.js Process控制的Proxy進(jìn)行轉(zhuǎn)發(fā)怕午，這使得Cypress不僅可以修改進(jìn)出瀏覽器的所有內(nèi)容，還可以更改可能影響自動(dòng)化瀏覽器操作的代碼堡距。這便得Cypress相對(duì)于其它測(cè)試工具來講不僅能從根本上控制整個(gè)自動(dòng)化測(cè)試的流程兆蕉，還可以提供穩(wěn)定性更加可靠的結(jié)果 虎韵。
三：Cypress的八大特性
- 時(shí)間穿梭：Cypress會(huì)在測(cè)試運(yùn)行時(shí)拍攝快照。只需將鼠標(biāo)懸停在“ 命令日志”中的命令上驶社，即可準(zhǔn)確查看每一步都發(fā)生了什么
- 可調(diào)試性：停止猜測(cè)你的測(cè)試失敗的原因测萎。直接從熟悉的工具如Chrome DevTools進(jìn)行調(diào)試。我們可讀的錯(cuò)誤和堆棧跟蹤使調(diào)試更加快速便捷逊抡。
- 實(shí)時(shí)重載：每當(dāng)你對(duì)測(cè)試進(jìn)行更改時(shí)，Cypress都會(huì)自動(dòng)重新加載拇勃。查看應(yīng)用程序中實(shí)時(shí)執(zhí)行的命令孝凌。
- 自動(dòng)等待：不要在測(cè)試中添加等待或休眠。Cypress在繼續(xù)下一步之前會(huì)自動(dòng)等待元素至可操作狀態(tài)時(shí)才會(huì)執(zhí)行命令或斷言瓣赂。異步操作不再是噩夢(mèng)片拍。
- 間諜，存根和時(shí)鐘：Cypress允許你驗(yàn)證并控制函數(shù)行為苫纤，Mock服務(wù)器響應(yīng)或更改系統(tǒng)時(shí)間纲缓，你喜歡的單元測(cè)試就在眼前。
- 網(wǎng)絡(luò)流量控制：Cypress可以Mock服務(wù)器返回結(jié)果栗弟，無須連接后端服務(wù)器即可實(shí)現(xiàn)輕松控制工闺，模擬網(wǎng)絡(luò)請(qǐng)求。
- 運(yùn)行結(jié)果一致性：Cypress架構(gòu)不使用Selenium或Webdriver,在運(yùn)行速度耿焊，可靠性測(cè)試遍搞，測(cè)試結(jié)果一致性上均有良好的保障器腋。
- 截圖和視頻：Cypress在測(cè)試運(yùn)行失敗時(shí)自動(dòng)截圖纫塌，在無頭運(yùn)行時(shí)錄制整個(gè)測(cè)試套件的視頻，使你輕松掌握測(cè)試運(yùn)行情況依痊。
四.下載安裝node.js
1.下載地址：https://nodejs.org/en/
2.安裝路徑
3..配置npm環(huán)境變量
五.下載安裝Cypress
Cypress官網(wǎng)：https://www.cypress.io/
1.執(zhí)行npm init初始化生成package.json文件
命令方式進(jìn)入要安裝Cypress的文件夾下（如D:\Cypress）
說明：package.json文件也可以由用戶自己創(chuàng)建瓶摆，通常存放于項(xiàng)目根目錄性宏，它定義了這個(gè)項(xiàng)目所需要的各種模塊及項(xiàng)目的各項(xiàng)配置信息，如名稱书斜，版本酵使，依賴，腳本等样屠。
2.Cypress安裝方法一：通過npm安裝
npm install cypress --save-dev
解決辦法搓劫，進(jìn)入package.json文件枪向，將name的值cypress改為cypress-dev即可
3.安裝完成后路徑
4.Cypress安裝方法二：直接下載zip文件：
https://download.cypress.io/desktop
三.運(yùn)行Cypress
方法一：直接點(diǎn)擊運(yùn)行Cypress.exe
方法二：修改package.json文件scripts添加
"cypress:open":"cypress open"
