cypress 是一個(gè)快速珊蟀、簡(jiǎn)單帘瞭、可靠的瀏覽器 E2E 測(cè)試工具鹃唯。
image.png
Features
-
cypress 運(yùn)行過(guò)程中會(huì)截取當(dāng)前頁(yè)面的快照篓吁，測(cè)試結(jié)束后可以通過(guò)這些快照回溯當(dāng)時(shí)的細(xì)節(jié)
image.png -
可以直接在瀏覽器調(diào)試隙袁，支持使用例如 Developer Tools 的工具滑臊，結(jié)合回溯快照的功能口芍，你可以在頁(yè)面出現(xiàn)錯(cuò)誤的那一瞬進(jìn)行調(diào)試，很方便的定位問(wèn)題
image.png - 除非特定業(yè)務(wù)的需要雇卷，cypress 一般不需要執(zhí)行
wait或sleep命令鬓椭，它會(huì)自動(dòng)等待異步返回的結(jié)果（比如接口調(diào)用）
Quick Strat
- 安裝及運(yùn)行 cypress
npm install cypress --save-dev
npx cypress open
- 創(chuàng)建一個(gè) test
touch {your_project}/cypress/integration/sample_spec.js
// sample_spec.js
describe('My First Test', () => {
it('Does not do much!', () => {
expect(true).to.equal(true)
})
})
-
執(zhí)行一下
image.png
image.png
Test Voucher Management
- 結(jié)合業(yè)務(wù)，以卡券后臺(tái)為例( voucher-management )关划，創(chuàng)建一個(gè)簡(jiǎn)單的測(cè)試小染，在 select 篩選項(xiàng)中選中 Coupon ，然后搜索贮折，此時(shí)搜索出的結(jié)果應(yīng)當(dāng)全部為 Coupon
- 可以看到 cypress 的語(yǔ)法類似 jquery裤翩，但是比 jq 還要簡(jiǎn)單直觀
// voucher_spec.js
describe('Voucher', () => {
it('demo', () => {
cy.visit('http://localhost:4200/voucher/list'); // 訪問(wèn)本地頁(yè)面方便調(diào)試
cy.get('#awardType').click(); // 選中 Award Type Select
cy.contains('Coupon').click(); // 有文本的元素可以直接使用 contains API，這里是選擇 Select 下的Coupon Option
cy.contains('Submit').click(); // 點(diǎn)擊 Submit Button 搜索
cy.get('.ant-table-body .ant-table-row').each(($el) => {
cy.wrap($el).children('td:nth-child(11)').should('contain', 'Coupon');
}); // tbody 的第 11 列（也就是 Award Type 那一列）脱货，應(yīng)當(dāng)全部為 Coupon
});
});
image.png
- 如果你在寫(xiě)代碼的過(guò)程中添加一些自定義屬性岛都，那么 cypress 的選擇過(guò)程會(huì)更加簡(jiǎn)單
...
<input data-cy="input-A">
...
cy.get('[data-cy="input-A"]')
...
- Cypress 好用的一個(gè)地方在于它的快照，如下圖振峻，選中左側(cè)的一個(gè)節(jié)點(diǎn)臼疫，那么不僅會(huì)在屏幕中央顯示當(dāng)時(shí)的頁(yè)面畫(huà)面，還會(huì)把快照時(shí)的一些信息打印在右側(cè)
-
并且扣孟，屏幕中央的頁(yè)面是可以進(jìn)行 DevTool 調(diào)試的烫堤，可以通過(guò)查看當(dāng)時(shí)的 Elements 情況來(lái)定位一些棘手的問(wèn)題
image.png
