介紹
Cypress是基于JavaScript語言的一種前端自動化測試工具瓶珊。Cypress是自集成的缝左，這類測試框架統(tǒng)稱為e2e測試恭取，即end to end（端到端）測試。
優(yōu)勢
- 安裝簡單，界面友好故黑，運行速度快
- 全程都會有錄屏。
- 支持debug調(diào)試，隨時暫停碍遍。
安裝
npm i cypress --save-dev
運行
./node_modules/.bin/cypress open
編寫測試用例
-
進入examples目錄新建自己的測試腳本
image.png
如baidu.spec.js
describe('My First Test', function () {
it('Does not do much!', function () {
cy.visit("https://www.baidu.com")
cy.get("#kw", {timeout: 2000}).type("黑洞")
cy.wait(100)
cy.get("#su", { timeout: 2000 }).click()
})
});
- 會同步在cypress的終端界面上
-
單擊其中一個腳本，即可開始運行
image.png
步驟
- 訪問網(wǎng)頁
describe('My First Test', () => {
it('Visits the Kitchen Sink', () => {
cy.visit('https://www.baidu.com');
})
})
該步驟我們應該訪問一個比較穩(wěn)定且可控的頁面阳液，切記以下幾點：
- 隨時可能更改怕敬，這會破壞測試。
- 可能會進行A / B測試帘皿，從而無法獲得一致的結(jié)果东跪。
- 可能檢測到您是腳本，并阻止了您的訪問（Google這樣做了）鹰溜。
- 可能啟用了安全功能越庇，從而阻止了Cypress的工作。
所以這也需要我們的開發(fā)同事進行配合
- 查詢元素
可以查找頁面中是否存在特定文本等
cy.contains("百度一下")
image.png
retry
cypress測試失敗后會嘗試著再次測試奉狈，它會自動等待并重試卤唉，因為它希望最終在DOM中找到該內(nèi)容。它不會立即失斎势凇桑驱！
- 點擊元素
拿到一個頁面后，我們要模仿人工操作跛蛋，去進行輸入或者點擊熬的，那首先我們需要獲取到輸入框和按鈕。
例如我們想要在輸入框內(nèi)輸入“cypress”并點擊“百度一下”這個按鈕
cy.get("#sw").type("cypress"); // 通過css選擇器獲取頁面元素
cy.contains("百度一下").click();
image.png
4.提出斷言
通過should方法來實現(xiàn)
當我們點擊了百度一下以后赊级，頁面發(fā)生了跳轉(zhuǎn)押框，此時我們可以看到頁面路徑變?yōu)榱?code>www.baidu.com/s，此時我們可以驗證一下頁面路徑是否確實在我們預期之內(nèi)：
cy.url().should("include", "/s")
頁面過渡
切換頁面時理逊，我們不需要考慮新的頁面是否加載完畢橡伞，這個工作cy會幫我們解決盒揉。
它會自動檢測到諸如a之類的東西，page transition event并會自動暫停運行命令兑徘，直到下一頁完成加載為止刚盈。
如果下一頁未完成其加載階段，則賽普拉斯將結(jié)束測試并出現(xiàn)錯誤挂脑。
前面我們提到過藕漱，cypress在超時之前未找到DOM元素要等待4秒鐘-但是在這種情況下，當cypress檢測到DOM元素時崭闲，page transition event它會自動將單個事件的超時增加到60秒PAGE LOAD肋联。
換句話說，根據(jù)命令和發(fā)生的事件刁俭，cypress會自動更改其預期的超時以匹配Web應用程序的行為橄仍。
這些各種超時在配置文檔中定義。
調(diào)試
左側(cè)欄目會將所有的命令一一列舉薄翅，當我們將鼠標放置在命令上沙兰，該條命令所對應的過程會實時顯示在右側(cè)的窗口中，包括一些事件行為翘魄，如點擊
function fuck(list) {
// 輸入list如[["是", "否"], ["是", "否"]]
if (list.length == 0) {
return [];
}
let res = list[0];
for (let i = 1; i < list.length; i++) {
const result = [];
for (let j = 0; j < res.length; j++) {
for (let k = 0; k < list[i].length; k++) {
result.push(list[i][k]+res[j]);
}
}
res = result;
}
return res;
}
