引言
Cypress項目中官方寫了很多demo，我們可以拿來做測試案例的。地址：https://github.com/cypress-io/cypress-example-recipes
安裝
1、首先你要安裝git，具體如何安裝請百度，安裝后，如圖：
2、其次，輸入命令，回車：
git clone https://github.com/cypress-io/cypress-example-recipes.git
3、安裝完后，進入目錄查看：
會多一個文件cypress-example-recipes
4、安裝依賴：
npm install
如果npm不行，請用下面命令：
npm install cnpm -g --registry=https://registry.npm.taobao.org
再次安裝：
cnpm install
安裝完成后，目錄結構：
啟動
啟動測試應用時，可以進入不同子項目文件夾來啟動不同的應用；
如果我們要測試表單類型的登錄，可以打開以下被測應用
cd examples\logging-in__html-web-forms>
cnpm start
使用瀏覽器訪問：http://localhost:7077/ ，如圖：
驗證登錄是否可用
網頁是打開了，那么賬號密碼在哪里呢？
我們打開文件server.js，如圖：
使用notepad打開：
知道賬號和密碼，返回瀏覽器中登錄：
證明登錄成功！
編寫測試腳本
再來回顧一下測試結構：
- cypress // cypress目錄 ---- fixtures 測試數據配置文件，可以使用fixture方法讀取 ---- integration 測試腳本文件 ---- plugin 插件文件 ---- support 支持文件 - cypress.json // cypress全局配置文件 - package.json //這個要自己創建
而我們腳本是新建在此目錄下：cypress安裝路徑\node_modules\.bin\cypress\integration ，創建一個 js 文件
/*@author: Leo
@software: pycharm
@file: demo_login.js
@time: 2020/7/6 0006 23:10
@Desc:
*/
/* __author__ = 'Leo' */
describe('登陸官方案例', function() {
beforeEach(() => {
cy.visit('http://localhost:7077/login')
})
it("登陸案例", function()
{
// 輸入用戶名
cy.get('[name="username"]').type('jane.lane')
.should('have.value', 'jane.lane')
// 輸入密碼
cy.get('[name="password"]').type('password123')
.should('have.value', 'password123')
// 提交表單
cy.get('[type="submit"]').click()
// 判斷頁面跳轉到 /dashboard
cy.url().should('include', '/dashboard')
// Welcome to the Dashboard, jane.lane!
cy.get('body').should('contain', 'Welcome to the Dashboard, jane.lane!')
})
})
運行測試
我們換個命令運行：
yarn cypress:open
啟動界面：
運行結果：
速度很快，0.2秒完成。
總結
有興趣可以持續關注。另外喜歡測試開發、性能測試的伙伴可以加入學習交流QQ群，一起學習成長。