web 自動化神器 TestCafe(一) —安裝和入門篇

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
               

    關于使用其他浏覽器執行，就不逐一介紹了
  • 執行之後就會自動打開對應的浏覽器，通路百度首頁，并搜尋檸檬班