Cypress 超快速入門 Popcat 貓貓點擊大賽參戰確認

me
林彥成
2021-08-12 | 2 min.
文章目錄
  1. 1. 什麼是 Cypress
  2. 2. Cypress 安裝設定
  3. 3. Cypress 測試撰寫
  4. 4. Popcat 貓貓點擊大賽參戰
    1. 4.1. 分析 DOM
    2. 4.2. 觸發事件
    3. 4.3. 觀察 API

這篇文章會帶著大家超快速入門前端常用的測試工具 Cypress,來看看怎麼讓機器來取代 Popcat 的人工點擊吧!

什麼是 Cypress

Cypress 提供針對測試的配置、撰寫、執行、除錯完整的 end-to-end test 的解決方案,比較特別的是 Cypress 也像 Redux 的專案一樣提供了時空旅行的功能,並且提供了方便的介面讓我們更容易去針對測試進行除錯。這次就用貓貓點擊大賽參戰的範例來帶大家超快速入門。

原始碼: https://github.dev/LinYenCheng/popcat-cypress

Cypress 在使用上其實也很簡單,只要透過簡單的安裝設定就能夠直接執行並撰寫測試了,不一定要測試自己開發的網站,針對網路上的任何站台都能夠執行測試腳本。

Cypress 安裝設定

如果是 npm 的專案

npm install cypress --save-dev

首先要設定 npm script

1
2
3
4
5
6
7
8
9
10
11
12
{
"name": "popcat",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "cypress open",
"test-one": "cypress run --spec **/popcat.spec.js"
},
"author": "",
"license": "ISC"
}

安裝完完並設定之後,雖然專案資料夾都是全空的,但其實就可以執行了,這時候 Cypress 會偵測到我們是第一次執行,會自動將相關配置及範例加入。

第一次執行 cypress open > firstTime

接著 Cypress 會自動加入相關預設的資料夾配置如下

  • fixtures: 存放假資料或是常數值
  • integration: 測試撰寫的地方
  • plugins: 沒有想要修改預設功能一般不會用到
  • support
    • commands: 擴充共用的函式可以統一放在這邊

第一次啟動後的畫面
sampleTest

此外其實若想修改預設配置,也可以透過設定 cypress.json 來達到相關效果,底下是基本的範例可以看出我們能多設定像是重試次數、影片錄製等等參數,設定檔相關說明可以參考設定檔的參考文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"viewportWidth": 411,
"viewportHeight": 731,
"defaultCommandTimeout": 8000,
"requestTimeout": 8000,
"retries": 8,
"video": true,
"videoUploadOnPasses": false,
"chromeWebSecurity": false,
"reporter": "junit",
"ignoreTestFiles": "**/examples/*.js",
"reporterOptions": {
"mochaFile": "results/TEST-[hash].xml"
}
}

Cypress 測試撰寫

Popcat 貓貓點擊大賽參戰確認!!! 一個最簡單的測試腳本如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
context("popcat.spec", () => {
beforeEach(() => {
Cypress.on("uncaught:exception", (err, runnable) => {
return false;
});
cy.visit("https://popcat.click/");
});

describe("貓貓點擊大賽", () => {
it("點 1000 下", () => {
Array(1000)
.fill("val")
.forEach((elm, index) => {
cy.wait(100 * ((index % 5) + 1));
cy.get(".cat-img").click();
});
});
});
});
  • Cypress visit(): cy.visit() 模擬瀏覽器開啟網站
  • Cypress wait(): cy.wait() 模擬等待
  • Cypress get(): cy.get() 類似 jQuery 的選擇器,可以協助我們找出網頁元素

Popcat 貓貓點擊大賽參戰

學前端這麼多年,第一次覺得派上用場 😅 在台灣,每秒鐘都有上萬隻貓正在張開嘴巴。

popcat70k

分析 DOM

這個部分其實就會使用到 Chrome 的開發者元件,透過檢視,我們可以發現主要的網站很單純沒有太多設計,我們就只要針對 .cat-img 這個 class 進行模擬點擊就可以了,甚至是沒有針對直接對整個網頁觸發鍵盤事件也會有效果。

觸發事件

參戰最簡單的方法其實就是透過 console 來執行,不過這次是想透過測試工具 XD 至於如何使用 Chrome 開發者工具歡迎參考之前寫過的文章,相信可以快速入門的。

1
2
3
4
5
6
7
8
var event = new KeyboardEvent("keydown", {
key: "t",
ctrlKey: true,
});

setInterval(function () {
document.dispatchEvent(event);
}, 500);

觀察 API

可以發現是 API 主要步驟有兩個

  1. 透過 reload 來換 token
  2. 累積次數一陣子後透過 POP 這個 API 集中將累積次數 (pop_count) 送到後端

相關 API
chromeDevToolNetworkTab

如果短時間打太頻繁其實也是會被阻擋:

提醒大家運動家精神 XD
TooManyRequest

重複的執行也是會得到 403 的錯誤,這時候需要把整個測試關掉重開。

403


喜歡這篇文章,請幫忙拍拍手喔 🤣

share