web自動化測試_web 自動化測試架構 TestCafe 安裝和入門使用

一、TestCafe 介紹：

TestCafe 是一款基于 Node.js 的端到端 Web 自動化測試架構，支援 TypeScript 或 JavaScript 來編寫測試用例，運作用例，并生成自動化測試報告。 TestCafe 相容 Windows，MacOS 和 Linux 系統，同時也支援桌面，移動端所有的浏覽器，并且無需安裝浏覽器對應的 WebDriver。

• TestCafe 的特性
  • 支援并發啟動多個浏覽器同時測試，無需修改任何代碼
  • 支援 TypeScript 和最新的 JavaScript 語言來編寫用例
  • 同一套代碼，無需進行任何配置環境支援在所有的浏覽器運作
  • 會自動檢測頁面中錯誤的 js 代碼
  • 支援在 TeamCity，Jenkins，Travis 中持續內建
  • TestCafe 中提供了進階的選擇器庫，斷言方式等，可以很友善的基于 PageObject 模式去進行測試

二、環境安裝

TestCafe 環境安裝非常簡單，安裝好 node.js 之後，通過一條 npm 指令就可以搞定。

• node.js 的安裝

  關于 node.js 安裝非常簡單，先去 node.js 官網(https://nodejs.org/en/download/)根據作業系統下載下傳對應的安裝包，進行安裝即可。

安裝好了之後，打開指令終端：輸入下述指令 Node --version 能看到對應的版本就說明安裝好了！

• TestCafe 安裝

  安裝好 node.js 之後直接使用 mpn 就可以安裝 TestCafe，指令如下

  npm install testcafe

  安裝好之後輸入 testcafe --verison 就說明安裝成功了

三、入門使用

1、案例代碼講解

接下來通過一個簡單的案例來給大家介紹一下 TestCafe 如何使用，要使用 testcafe 進行 Web 自動化測試，首先需要建立一個.js 或。ts 的測試用例檔案，每個測試用例檔案中 fixture 和 test 這兩個部分組成，下面是一個打開百度首頁并進行搜尋的小案例。

• 第一步、導入

  testcafe

  子產品中的 Selector 這個選擇器，
  • 可以使用 Selector 來定位元素

import { Selector } from 'testcafe';

• 第二步：建立一個 fixture 對象，并打開百度首頁（測試檔案中必須要有 fixture）

  fixture(`百度案例`).page(`https://www.baidu.com`);

• 第三步：定義一個測試用例，用例中定位搜尋輸出框輸入百度，點選搜尋（每一個 test 就是一條測試用例）

  test('百度搜尋功能', async t => { await t.typeText('#kw', "hao123") .click('#su') });

2、案例運作

• 第一步：建立 test_baidu.js 檔案，寫入如下代碼

import { Selector } from 'testcafe';

fixture(`百度案例`).page(`https://www.baidu.com`);

test('百度搜尋功能', async t => {
    await t.typeText('#kw', "檸檬班")
        .click('#su')
});
           

• 第二步：cmd 中切換到上述檔案所在路徑，通過 testcafe 執行測試代碼
  • 啟動命名規範：testcafe 運作浏覽器名 運作檔案
    • 通過 Chrome 浏覽器運作，cmd 指令如下：

testcafe chrome test_baidu.js

• • • 通過火狐浏覽器運作，cmd 指令如下

testcafe firefox test_baidu.js

關于使用其他浏覽器執行，就不逐一介紹了

• • 執行之後就會自動打開對應的浏覽器，通路百度首頁，并搜尋檸檬班
• 運作完畢後，cmd 中即可檢視測試結果，如下圖

testcafe 的安裝和入門使用就接收到這裡，持續關注小編，後續還會更新詳細的使用教程文章！

本文作者：木森；

本文來源：檸檬班社群；

原文連結：web 自動化測試架構 TestCafe 安裝和入門使用 - 測試派