TestCafe學習筆記-1:自動化測試會員登入

TestCafe學習筆記-1:自動化測試會員登入

關於 End-to-End 測試

之前看了幾篇前端大大們的面試文章,常看見被問到 End-to-End 測試(E2E)的東西。好奇之下就 Google 了一下什麼是 E2E 測試?後來爬到了保哥的這篇:

所謂的「端對端」(E2E) 是指從使用者的角度出發(一端),對真實系統(另一端)進行測試。
這種類型的測試對許多公司來說,就是「人工測試」的主要範圍,因為你可以透過人工對已經完整部屬的網站進行測試,因此可以驗證出系統是否符合客戶的實際需求。這部分也可以透過撰寫 E2E 測試程式來進行自動化,增加測試效率。

一次搞懂單元測試、整合測試、端對端測試之間的差異

想到以往要測試時,蠻多部份的測試是比較麻煩的,比方輸入帳密後能不能順利登入會員?購物流程能不能順利結帳?

這中間蠻多步驟很是繁瑣,光是不斷輸入帳密就很耗時,所以當看到「自動化」三個字時,就覺得是值得花一些時間來研究一下的。

在看了三個自動化工具:Protractor、WebdriverIO、TestCafe,也試寫了一小段後,Augustus 最後選擇使用 TestCafe,主要是因為比較好學,而且 Youtube 上的教學也比較多,即便一頭霧水,也可以看別人寫的 code 來比較。

也剛好最近公司在會員的部份時常有點問題,就想一邊看文件,一邊寫一個自動化測試會員登入的部份,再順便接一下上一篇寫的 LINE Notify 用機器人通知測試結果

當然,本篇不會拿公司的會員頁來當範例,而是改用 Google 表單來模擬填了資料後送出,最後進到結果頁來當替代。


安裝 TestCafe

TestCafe 可全局安裝,也可以局部安裝在各個資料夾中。

Global

安裝

npm install -g testcafe

執行

// 格式:testcafe 瀏覽器 檔案所在的路徑
testcafe chrome tests/

Local

安裝

npm install --save-dev testcafe

執行

// 格式:npx testcafe 瀏覽器 檔案所在的路徑
npx testcafe chrome tests/

不論是 Global 安裝或是 Local 安裝,在執行的部份可以寫在 package.json 的 「test」裡,像這樣:

"scripts": {
    "test": "testcafe chrome tests/"
}

這樣只需要輸入 npm test 就會執行測試。

這篇 Augustus 打算用排程,每三小時自動執行一次測試,因此是用 API 來執行測試,而不是用指令碼。

用指令碼執行測試,Mac 電腦會要求螢幕錄影的權限,要允許才會執行。安裝詳細說明可見官方文件:Screen Recording Permission


撰寫測試檔

建立一個「tests」的資料夾,把執行測試的檔案都收進裡面,以便跟頁面的開發檔可以區分開來。

建立一個「tests/login-e2e.js」檔案,開始撰寫測試。

Fixtures、Tests

TestCafe 把每一個組織過的自動化測試都會收在一個 fixture 裡,像是一個資料夾。

Test 則是區分每一個測試項目,像是資料夾裡的檔案。

比方我們可以這樣寫:

fixture `會員中心`;
test('登入', async t => {});
test('登出', async t => {});

fixture `購物車`;
test('加入商品', async t => {});
test('移除商品', async t => {});
test('結帳', async t => {});

這樣接手的人看到 fixture,就可以知道哪幾段是針對哪個大類做測試。

看到 test,就可以知道是針對大類下的哪一項功能在做測試。

不論是 fixture 或是 test 都可以開啟指定的網址。

在測試時,如果 fixtures 跟 test 都寫有開啟網址,則會以 test 的為主,官方給的範例如下:

fixture `MyFixture`.page `http://www.xx.com/example`;
test('Test1', async t => {
    // Starts at http://www.xx.com/example
});

fixture `MyFixture`.page `http://www.xx.com/example`;
test
    .page `http://www.xx.com/blog`
    ('My test', async t => {
        // Starts at http://www.xx.com/blog
    });

頁面上互動

一般我們要做測試時,都會跟頁面有些互動,比方輸入文字、點擊按鈕、滑鼠滑過、拖拉……等,官方文件中有說明 TestCafe 可執行哪些動作:Interact With The Page

要測試會員登入,需要的步驟是:

  1. 輸入帳號
  2. 輸入密碼
  3. 點擊「登入」
  4. (登入後)檢查頁面上有沒有登入後的頁面才會出現的東西?

1-3步,會用到的是輸入文字跟點擊。

4 步,要看登入後會產生什麼東西是頁面上有的,像這邊示範用的是 Google 表單,表單在送出後會是這樣:

Google 表單送出後
Google 表單送出後

所以我們只需要抓有沒有出現「我們已經收到您回覆的表單。」這行字,就可以知道有沒有送出成功。

這段原始碼如下:


執行自動化測試

執行測試的方式有 2 種:command line、API。以下是文件中的範例:

command line:

testcafe safari ./tests/my-fixture.js

API:

const createTestCafe = require('testcafe');
const testCafe = await createTestCafe('localhost', 1337, 1338);
const runner = testCafe.createRunner();

await runner
    .src('./tests/my-fixture.js')
    .browsers('safari')
    .run();

testCafe.close();

因為 Augustus 想用排程,每 3 小時測試一次,因此選擇的是 API。

由於還會再接 LINE Notify,所以必須將測試結果存下來,修改後的程式碼如下:

抓當下時間設成 version 變數,結果存在 tests/log/result-{version}.json 裡,這樣在讓 LINE Notify 發訊息時才有資料可以抓。


設定排程、機器人通知

設定排程的部份直接用套件:node-cron

機器人通知的部份如上所寫,用 LINE Notify,Notify 的使用方式請看這篇:

LINE Notify:用Google Apps Script,建立簡易網站監測機器人

用 command line 執行:

node index.js

之後每 3 個小時,就會看見自動執行測試,以下是 Augustus 錄製的:


程式碼

完整的程式碼整理如下:

tests/login-e2e.js


index.js


Google Apps Script


筆記後心得

實際用了 TestCafe 後,發現這種讓程式自動執行的功能真是太有趣了~

除了做會員登入測試,Augustus 其實也另外寫了每半小時去抓 Google 搜尋排名的。

這篇之所以先取名筆記系列,是因為還會想繼續看文件,看還有什麼可以玩的。

有看到可以結合 Github、Gitlab,就等將來逐步發掘。

Summary
Article Name
TestCafe學習筆記-1:自動化測試會員登入
Description
本篇大綱:關於 End-to-End 測試。安裝 TestCafe。撰寫測試檔、Fixtures、Tests。頁面上互動。執行自動化測試。設定排程、機器人通知。程式碼。筆記後心得。選擇使用 TestCafe,主要是因為比較好學,而且 Youtube 上的教學也比較多。
Augustus
Let's Write
Let's Write
Publisher Logo
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言