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

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

關於 End-to-End 測試

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

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

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

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

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

在看了三個自動化工具:Protractor、WebdriverIO、TestCafe,也試寫了一小段後,August 最後選擇使用 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 就會執行測試。

這篇 August 打算用排程,每三小時自動執行一次測試,因此是用 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();

因為 August 想用排程,每 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 個小時,就會看見自動執行測試,以下是 August 錄製的:


程式碼

完整的程式碼整理如下:

tests/login-e2e.js


index.js


Google Apps Script


筆記後心得

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

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

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

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

Summary
TestCafe 學習筆記 - 1:自動化測試會員登入
Article Name
TestCafe 學習筆記 - 1:自動化測試會員登入
Description
本篇大綱:關於 End-to-End 測試。安裝 TestCafe。撰寫測試檔、Fixtures、Tests。頁面上互動。執行自動化測試。設定排程、機器人通知。程式碼。筆記後心得。選擇使用 TestCafe,主要是因為比較好學,而且 Youtube 上的教學也比較多。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg
訂閱
通知
guest

1 Comment
最舊
最新
Inline Feedbacks
看所有留言
trackback
TestCafe 學習筆記 - 2:常用設定及功能 - Front-End - Let's Write
5 月 之前

[…] 前一篇的〈自動化測試會員登入〉中,是否成功登入會員的判斷是用頁面上出現了登入後才有的元素來作判斷,實際上也可以直接用網址是不是登入後的網址來判斷。 […]