摘要：上也有幾個(gè)臨時(shí)方案，目前我傾向使用自帶的來查看。在打開的測(cè)試的瀏覽器中打開切到按下用戶按，輸入，選擇重新刷新并統(tǒng)計(jì)代碼執(zhí)行覆蓋率。那么，起來為了高撩質(zhì)測(cè)量試代碼，起來。

據(jù)說某家公司有兩位前端，天天擼bug，為啥嘞？只怪測(cè)試MM傾人國，輕語哥哥有bug。?(??????)?? 可是最近兩位有點(diǎn)犯愁 Σ(っ °Д °;)っ。測(cè)試MM有幾次提了緊急bug，都在旁邊鼓勵(lì)他們改bug了，可是線上bug重現(xiàn)排查比較麻煩，而且改了后還發(fā)現(xiàn)沒改好，惹得測(cè)試MM潸然淚下，好生埋汰。怎么辦呢？

前端君666某天發(fā)現(xiàn)了E2E測(cè)試神器cypress后，暗中偷練神功，改bug越來越6，測(cè)試MM每天笑著對(duì)他說，666你真6，MM好喜歡呀(??? ? ???) 另一位前端君555每天面對(duì)堆積如山的bug長(zhǎng)吁短嘆，測(cè)試MM提完新bug后都不理他了≡￣﹏￣≡

作為一個(gè)追求代碼永無bug、順帶跟測(cè)試MM溝通產(chǎn)品的有理想的前端 (? ??_??)?，我覺得有必要學(xué)習(xí)一下怎么使用cypress來進(jìn)行E2E測(cè)試，以此來提高代碼質(zhì)量。那么我們來看看怎么入門cypress測(cè)試框架。

cypress是在mocha式API基礎(chǔ)上構(gòu)建的一套開箱可用的E2E測(cè)試框架，對(duì)比其他測(cè)試框架，它提供一套自己的最佳實(shí)踐方案，無需其他測(cè)試工具庫，配置方便簡(jiǎn)單但功能異常強(qiáng)大，可以使用webpack項(xiàng)目配置，還提供了一個(gè)強(qiáng)大的GUI圖形工具。入門簡(jiǎn)單，上手方便，怎么舒服怎么來呀 (?????)

cypressGUI方式的測(cè)試使用真實(shí)瀏覽器，非GUI方式使用chrome-headless，不是用模擬方式進(jìn)行測(cè)試，更真實(shí)的展現(xiàn)實(shí)際環(huán)境中的測(cè)試過程和結(jié)果。

cypress有幾大自帶的強(qiáng)大功能:

自帶GUI工具，想測(cè)啥就點(diǎn)啥，還可以查看整個(gè)測(cè)試過程，想錄屏還可以錄屏喲（錄屏可以發(fā)給測(cè)試MM看，保準(zhǔn)她說哥哥真厲害喲。 一般人我不告訴他?乛?乛?）

測(cè)試的每一步都有snapshot，可以通過GUI工具查看每個(gè)過程的頁面狀態(tài)，不是截圖而是真是的頁面DOM環(huán)境喲！

自帶數(shù)據(jù)mock和請(qǐng)求攔截機(jī)制，還原線上數(shù)據(jù)引起的bug別提有多輕松了

和wepbakc配置，實(shí)現(xiàn)無論修改測(cè)試文件還是被測(cè)試代碼都可以自動(dòng)重測(cè)

小Tips：可以給測(cè)試用例加上only或者skip來避免重測(cè)測(cè)試文件里的所有用例: it.only("只測(cè)試這個(gè)喲); it.skip("不要測(cè)這個(gè)");

yarn add cypress 或者 npm install cypress

安裝完畢后，./node_modules/.bin/cypress install安裝cypress環(huán)境(包括GUI工具)

package.json: 配置GUI和非GUI(terminal)兩種方式來運(yùn)行cypress

    "scripts": {
        "cypress": "cypress run",
        "cypress-gui": "cypress open",

?? 配置好后 先運(yùn)行 yarn cypress[-gui] 或者 npm run cypress[-gui](中括號(hào)意思是可選)來初始化cypress，__生成默認(rèn)配置和目錄__

cypress.json(與package.json同級(jí)目錄): cypress提供比較靈活的配置，可以根據(jù)自己需要定制行為，以下列一下我對(duì)一個(gè)項(xiàng)目的配置

{
    "baseUrl": "http://localhost:8080", // 本地開發(fā)服務(wù)地址（webpack-dev-server)
    "integrationFolder": "src", // 自定義"src"為測(cè)試文件根目錄，默認(rèn)是"cypress/integration"
    "testFiles": "**/*.cypress.spec.js", // 自定義測(cè)試文件的匹配正則，默認(rèn)是"**/*.*",即所有文件
    "videoRecording": false, // 關(guān)閉錄屏功能, 如果開啟錄屏功能，記得將"cypress/screenshots"目錄加入".gitignore",防止不小心將錄屏加到git中
    "viewportHeight": 800, // 設(shè)置測(cè)試環(huán)境的頁面視圖的高度
    "viewportWidth": 1600 // 設(shè)置測(cè)試環(huán)境的頁面視圖的寬度
}

cypress/plugins/index.js: cypress運(yùn)行環(huán)境配置，可以用來配置webpack等。以下是配置webpack別名范例。默認(rèn)這里不需要配置。

// 參考官方例子地址 https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/preprocessors__typescript-webpack/cypress/plugins/index.js
const wp = require("@cypress/webpack-preprocessor");
const path = require("path");

function resolve(dir) {
    return path.join(__dirname, "../..", dir);
}

module.exports = on => {
    const options = {
        webpackOptions: {
            resolve: {
                alias: {
                    "@": resolve("src"),
                    cypress: resolve("cypress")
                }
            }
        }
    };
    on("file:preprocessor", wp(options));
};

簡(jiǎn)單的一個(gè)例子

describe("測(cè)試頁面包含某元素", () => {
    it("有云 "前端哥哥們真帥，前端妹妹們真漂亮"", () => {
        cy.contains("前端哥哥們真帥，前端妹妹們真漂亮");
    });

    it("要有一個(gè)鏈接", () => {
        cy.get("a").should("have.length", 1);
    });

    it("不存在class含有abc的元素", () => {
        cy.get(".abc").should("have.length", 0);
    });
});

互動(dòng)的例子

describe("一起動(dòng)", () => {
    it("獲取輸入框,輸入文字并按enter鍵", () => {
        const text = "not exist";
        // type api用法： https://docs.cypress.io/api/commands/type.html#Usage
        cy.get("input").type(`${text}{enter}`);
    });

    it("點(diǎn)擊按鈕", () => {
        cy.get("button").click();
    });
});

網(wǎng)絡(luò)請(qǐng)求mock例子

Tip1: cy.route的路徑匹配是嚴(yán)格的，所以要注意是否需要加通配符。如 cy.route("/api/search", [])不會(huì)攔截/api/search?keyword=abc，只會(huì)攔截/api/search。
Tip2: cy.route的method要注意，默認(rèn)是GET，cy.route("/api/posts") 和 cy.route("POST", "/api/posts") 是不一樣的。

describe("要啥給啥", () => {
     beforeEach(() => {
        cy.server(); // 一定要在 cy.route 前調(diào)用
        cy
            .fixture("/posts/list.json") // 我們?cè)?cypress/fixtures 內(nèi)創(chuàng)建mock用的數(shù)據(jù)
            .as("postsData"); // 給 mock 數(shù)據(jù)取別名，以后 cy.route 使用
        cy
            .route("/api/posts", "@postsData")
            .as("getPostsRoute"); // 給請(qǐng)求取別名，以供 cy.wait 使用
    })

    it("進(jìn)入列表頁，攔截列表請(qǐng)求接口", () => {
        cy.wait("@getPostsRoute"); // 等待被攔截的接口請(qǐng)求完成

        cy.get(".post").should("have.length", 10); // 要有10條數(shù)據(jù)被渲染到頁面上
    });
})

實(shí)際場(chǎng)景例子: 結(jié)合上面所有姿勢(shì)，我們現(xiàn)在測(cè)試搜索頁面的搜索、操作結(jié)果

describe("test search page", () => {
    // 幾個(gè) route 路徑變量
    const searchRoutePath = "/api/items/activities?query=*";
    const deleteActivityRoutePath = "/api/activities/*/items/batch?num_iids[]=*";
    const undoActivityRoutePath = "/api/activities/*/items/undo";

    function search(keyword) {
        // 將搜索行為和等待搜索返回封裝起來
        cy
            .fixture("items/activities.json")
            // 處理mock數(shù)據(jù)，只返回符合搜索結(jié)構(gòu)的數(shù)據(jù)
            .then(data => data.filter(item => item.title.indexOf(keyword) !== -1))
            .as("searchResult");
        cy.server();
        cy.route(searchRoutePath, "@searchResult").as("searchRoute");

        const input = cy.get("input");
        input.clear(); // 清空輸入框內(nèi)文本

        input.type(`${keyword}{enter}`);

        cy.wait("@searchRoute");
    }

    before(() => {
        // 進(jìn)行所有測(cè)試前，先訪問搜索頁
        cy.visit("/activities/search");
    });

    it("should show no data tip when search result is empty", () => {
        const text = "not exist";
        search(text);
        cy.contains(`沒有找到關(guān)于 ${text} 的結(jié)果`);
    });

    it("should remove activity from list when clean successful", () => {
        search("成功");

        cy
            .route("delete", deleteActivityRoutePath, {
                success: 0,
                fail: 0,
                waiting: 0,
            })
            .as("deleteActivityResponse");

        // within是讓cy執(zhí)行的context保持在".activities-search"這個(gè)dom節(jié)點(diǎn)內(nèi)
        // 默認(rèn)cy的執(zhí)行是以上一個(gè)cy命令結(jié)果作為context
        // 如 "cy.get("a"); cy.get("span")"，cy會(huì)在上一個(gè)命令找到的"a"標(biāo)簽中查找"span"
        cy.get(".activities-search").within(() => {
            const items = cy.get(".result-item");
            items.should("have.length", 1);
            const applyList = items.get(".apply-list");

            applyList.should("not.be.visible"); // 每個(gè)數(shù)據(jù)項(xiàng)內(nèi)詳細(xì)內(nèi)容區(qū)域是隱藏的

            const toggleBtn = items.get(".item-apply-count");
            toggleBtn.click(); // 點(diǎn)擊顯示詳細(xì)內(nèi)容區(qū)
            applyList.should("be.visible");
            applyList.children().should("have.length", 1); // 詳細(xì)內(nèi)容區(qū)內(nèi)數(shù)據(jù)只有1條

            const cleanBtn = cy.contains("退出");
            cleanBtn.click(); // 點(diǎn)擊詳細(xì)內(nèi)容區(qū)里的“退出”按鈕

            cy.wait("@deleteActivityResponse"); // 等待“退出”請(qǐng)求返回
            cy.get(".apply-list").should("be", null); // 退出成功后，詳細(xì)內(nèi)容區(qū)數(shù)據(jù)減1，即空
        });
    });
});

network-requests : https://docs.cypress.io/guide...

assertions : https://docs.cypress.io/guide...

recipes 示例 : https://docs.cypress.io/examp...

code completion 代碼提示: https://docs.cypress.io/guide...

目前cypress沒有內(nèi)置測(cè)試覆蓋率統(tǒng)計(jì)功能，github上有專門的issue在跟蹤這個(gè)，后續(xù)應(yīng)該會(huì)有。issue上也有幾個(gè)臨時(shí)方案，目前我傾向使用chrome自帶的來查看。在GUI打開的測(cè)試的瀏覽器中打開devtools,切到Sources, 按下cmd+shift+p(windows用戶按ctrl+shift+p)，輸入coverage，選擇重新刷新并統(tǒng)計(jì)代碼執(zhí)行覆蓋率。

為了高(撩)質(zhì)(測(cè))量(試)代(M)碼(M)，high起來。喜歡前端MM的可以手把手教起來了 (￢_￢)

本文章首發(fā)于本人公眾號(hào)：楓之葉。有興趣的可以長(zhǎng)按下方二維碼關(guān)注。^v^