身爲前端的你，到現在還不瞭解Cypress嗎？
什麼是Cypress
現在你寫項目還在手動測試有沒有bug，還在操作鍵盤和鼠標在客戶端 點點點麼？還在爲界面上的某個功能測試而發愁？ Cypress E2E測試框架 （功能測試框架），E2E的意思就是我們不管你寫的代碼，我們只想知道我要的這個交互的效果對不對，這個功能能不能使用，不能使用就代表代碼有bug，這就是所謂的(⊙﹏⊙) E2E測試。
Cypress是爲現代網絡打造的下一代前端測試工具。解決了開發人員和QA工程師在測試現代應用程序時面臨的關鍵難點問題。
或許提到這個E2E測試框架有人會想到Selenium 但是這個框架從底層上都不同於Selenium，個人感覺Selenium這個代碼看起來很不舒服，大量的異步任務，api比較複雜，還得花一些精力來記憶這個api。
- 可以看一下Selenium 代碼風格，很多需要記憶的api。最下面有Cypress代碼風格（一目瞭然）。
const {Builder, By, Key, until} = require('selenium-webdriver');
(async function example() {
let driver = await new Builder().forBrowser('firefox').build();
try {
// Navigate to Url
await driver.get('https://www.google.com');
// Enter text "cheese" and perform keyboard action "Enter"
await driver.findElement(By.name('q')).sendKeys('cheese', Key.ENTER);
let firstResult = await driver.wait(until.elementLocated(By.css('h3>div')), 10000);
console.log(await firstResult.getAttribute('textContent'));
}
finally{
driver.quit();
}
})();
當然在你真正使用了Cypress你會發現這個東西，真強大，而且無比好用！
Cypress優點
- 1.界面美觀友好。
- 2.支持手機模擬。
- 3.測試的每一步都有對應的截圖。
- 4.全程都會有錄屏。
- 5.支持debug調試，隨時暫停。
- 6.自動等待ui更新，減少異步代碼。
安裝Cypress
由於是外網，不翻牆的話下載的很慢，翻了牆下載的也不快，所以進行這一步其實也是無比的困難，我在網上也查詢了很多下載的教程，發現比較複雜，不太好操作，然後最後發現我們萬能的淘寶鏡像有這個包，很是欣喜（博主最開始使用的yarn並沒有設置淘寶鏡像，下載速度。。😔–😓），
//npm 下載
npm init -y
//設置淘寶鏡像
npm config set registry https://registry.npm.taobao.org
npm i cypress -D
//使用 yarn下載
yarn init -y
yarn config set registry https://registry.npm.taobao.org
yarn add cypress --dev
如果是用命令在項目中安裝的話，可能也需要下載好幾分鐘請耐心等待。
如果手動下載的話，解壓的過程會很漫長（博主電腦大概半個小時）
運行Cypress
下載好之後目錄如下
在項目根目錄下使用如下命令：
// npm高於v5.2自帶npx
npx cypress open
// yarn
yarn run cypress open
然後目錄中會多出這樣一個文件夾，裏面的integration文件夾是存放測試代碼的。
接下來會自動打開下面這個（GUI工具）
點擊單個之後會開始測試，進入測試界面如下
紅色的 代碼測試沒有通過可能代碼有bug，綠色的代表ok，鼠標放到上面會顯示每一張的截圖，便於觀察。
當然我們也可以簡化這個命令，只需要在package.json中的scripts中配置自己喜歡的操作就行了。如下：
再使用npm run cypress-open命令就行了。
簡單寫一個自己的測試
在我們的根目錄下的cypress目錄中的integration目錄下創建一個我們自己的測試文件（先清空裏面原有的文件）sample_spec.js即使裏面不寫任何內容，也可以直接運行，只是在GUI界面點擊這個文件後，會有一些問題。
sample_spec.js測試模塊
describe('使用百度搜索vue', () => {
it('搜索', () => {
cy.visit('https://baidu.com')
cy.get('input#kw').eq(0).type('vue')
cy.contains('百度一下').click()
cy.contains('vue').should('exist')
cy.contains('https://cn.vuejs.org/').should('exist')
})
})
這個簡單測試的內容呢就是 使用百度搜索vue看看是否會存在vue，和vue官網的地址，運行結果如下
這樣我們就完成了一個簡單的測試小實例🎇🍾。
通過這個簡單的入門之後我們就可以，安安靜靜的看官方文檔了
聽說cypress使用webstorm比vscode好用，不得不說webstorm中這個插件很強大（奈何博主沒有裝webstorm呀）
官方文檔中文版
當然這個中文文檔可能跟原版的有所差異，文檔支持中英文切換哦。