1.軟件安裝
Cypress安裝：
npm install cypress --save-dev
或者
yarn add cypress --dev
全局安裝
npm install -g cypress
2.初始化
- 去到項(xiàng)目的目錄
/cypress-test - 打開
vscode - 在terminal下執(zhí)行：
cypress open秕噪，就可以打開cypress 客戶端。 - 點(diǎn)擊
select manually，就可以在項(xiàng)目的目錄下生成了cypress的目錄了沟沙。 - OK仪缸，安裝和初始化這兩步已經(jīng)安裝完成了礁击，接下來就可以開始test了
初始化頁面
- 生成的目錄
- cypress // cypress目錄
---- fixtures 測試數(shù)據(jù)配置文件哆窿，可以使用fixture方法讀取
---- integration 測試腳本文件
---- plugin 插件文件
---- support 支持文件
- cypress.json // cypress全局配置文件
- package.json //這個(gè)要自己創(chuàng)建
3.執(zhí)行例子
3.1 訪問百度頁面
3.2 查找DOM進(jìn)行交互挚躯，例如輸入，點(diǎn)擊漩勤，選擇之類
3.3 進(jìn)行斷言
/// <reference types="Cypress" />
describe("baidu測試",()=>{
beforeEach(()=>{
cy.visit("http://www.baidu.com")
})
it("輸入查詢cypress",()=>{
cy.get("#kw")
.type("cypress")
cy.get("#su")
.click()
cy.get('body').should('contain', 'cypress')
})
})
執(zhí)行結(jié)果
4.生成測試報(bào)告
- 在項(xiàng)目目錄下锯七，執(zhí)行
npm install mocha mochawesome眉尸，安裝完成就可以在package.json下看到依賴包 - 打開
cypress.json巨双，添加生成報(bào)告的命令
{
"reporter": "mochawesome",
"reporterOptions": {
"reportDir": "cypresse/results",
"overwrite": false,
"html": true,
"json": true
}
}
- 執(zhí)行
cypress run筑累，就可以生成所有測試用例的報(bào)告了
https://docs.cypress.io/zh-cn/guides/tooling/reporters.html#Report-per-spec
