1.安裝
命令vue add @vue/e2e-cypress
2.目錄結(jié)構(gòu)分析
Cypress 允許配置 package.json 文件的 scripts 字段寥枝，來定義打開方式
首先宪塔，進(jìn)入 Cypress安裝目錄 囊拜，打開 package.json
在 scripts 下某筐，添加
image.png
在使用 cypress open 命令首次打開 Cypress冠跷，Cypress 會(huì)自動(dòng)進(jìn)行初始化配置并生成一個(gè)默認(rèn)的文件夾結(jié)構(gòu)
image.png
(1) integration，測(cè)試文件就是測(cè)試用例
(2) plugins 插件文件,使你可以修改或擴(kuò)展 Cypress 的內(nèi)部行為
(3) support 每個(gè)測(cè)試文件運(yùn)行之前蜜托，Cypress 都會(huì)自動(dòng)加載支持文件 cypress/support/index.js
eg:
只需要在 cypress/support/index.js 文件里添加 這將能實(shí)現(xiàn)每次測(cè)試運(yùn)行前打印出所有的環(huán)境變量信息
beforeEach(() => {
cy.log(`當(dāng)前環(huán)境變量為${JSON.stringify(Cypress.env()
)}`)
})
image.png
3.自定義cypress, 可在
cypress/support/commands.js編寫eg:
// 全局定義獲取token
Cypress.Commands.add('token', () => {
})
4.開始測(cè)試
- 1 查找元素方式 get()
// 通過元素的 id 屬性來定位
cy.get("#header").click()
// 通過元素的 class 屬性來定位
cy.get(".btn").click()
- 2 點(diǎn)擊 click()
// 先獲取 DOM 元素，再對(duì) DOM 元素操作
// { force: true } 強(qiáng)制點(diǎn)擊盗冷，和所有后續(xù)事件
cy.get('.el-date-editor').click({ force: true })
- 3 輸入內(nèi)容 type()
// 在 DOM 元素中輸入內(nèi)容
// 先獲取 DOM 元素，再對(duì) DOM 元素進(jìn)行 type 操作
cy.get('.el-date-editor input[placeholder=結(jié)束時(shí)間]').clear().type('2021-08-29')
- 4 清空輸入框的所有內(nèi)容
// 需要先拿到 DOM 元素仪糖，且是 <input> 或 <textarea > 標(biāo)簽柑司，再執(zhí)行 clear() 操作
cy.get('input').type('Hi!').clean()
- 5 單選框或復(fù)選框锅劝，達(dá)到選中的作用
// 選中指定值的選項(xiàng)
.check(value)
