一、用例編寫基本規范

1、 fixture 測試夾具

使用 TestCafe 編寫測試用例，必須要先使用 fixture 聲明一個測試夾具，然后在這個測試夾具下編寫測試用例，在一個編寫測試用例的 js 或 ts 文件中，可以聲明多個測試夾具

• fixture(測試夾具)的聲明 import 'testcafe' // 聲明一個測試夾具 百度測試 fixture `登錄功能測試` 上面是官方文檔中的 demo，調用 fixture 方法聲明測試夾具的時候，使用的是模板字符串傳參的形式，對于沒用過這種語法的小伙伴來說看起來不太好理解，可以按下面這個使用括號調用函數的形式來寫。 import 'testcafe' // 聲明一個測試夾具 新浪測試 fixture('注冊功能測試')
• fixture.page 方法： 通過 fixture.page 方法，我們可以在測試夾具打開一個要進行測試的頁面 fixture('百度登錄測試').page('https://www.baidu.com');

2、test 測試函數

2.1、測試用例編寫

  聲明了測試夾具之后，就可以定義測試用例了，在testcafe中寫測試用例，直接調用測試函數test， 并傳遞一個內部帶有測試代碼的函數即可 。

  import 'testcafe'
// 在測試夾具中打開百度頁面
fixture('百度案例').page('https://www.baidu.com');// 第一條用例：百度輸入 學習點擊搜索
test('用例1', async t => {await t.typeText('#kw', "學習").click('#su');
});// 第二條用例：百度輸入 python 點擊搜索
test('用例2', async t => {await t.typeText('#kw', "python").click('#su');
});

• 關于上面測試函數 test 調用的說明 test 方法的第一個參數為測試用例的名稱，第二個參數是寫測試代碼的函數 關于參數 t： 在 testcafe 中 所有測試動作都需要使用 測試控制器對象的異步功能來實現。箭頭函數定義的參數 t 就是用來接收測試控制器對象的。 上面寫測試代碼的函數是使用 async/await 語法定義的函數，這也是 testcafe 的推薦寫法，在執行相關測試動作時，如果要等待前一個動作執行完成，再調用下一個動作或動作鏈，只需要進行等待的動作前面加上關鍵字 await 即可。

2.2、指定測試開始頁面

在 fixture 中可以通過 page 方法去打開一個測試的初始頁面，當然在 test 方法中如果不用 fixture 打開的初始頁面，也可以使用 tes.page 自定義一個測試初始打開頁面，如下：

  fixture(`百度案例`).page `https://www.taobao.com`;test.page('https://www.baidu.com')('百度搜索功能', async t => {await t.typeText('#kw', "hao123").click('#su');
});

二、測試前后置處理

在工作中執行測試時，大多數的用例執行，都會有一些用例前置準備或者后置清理工作要去做。關于前后置處理的方法，我們稱之為鉤子函數，testcafe 提供了兩種鉤子，一種叫測試鉤子，一定叫固定鉤子。

1、測試鉤子

測試鉤子指的是每一條測試用例執行之前和執行之后，會執行的鉤子函數，我們稱之為測試鉤子，關于測試鉤子 Testcafe 提供了如下四個方法。

• fixture.beforeEach 方法

測試夾具 fixture 提供了一個 beforeEach 方法，可以給該 fixture 中的每一條測試用例設置前置執行的操作。案例代碼如下：

  import 'testcafe'fixture(`百度案例`).page('https://www.baidu.com')// 設置每條用例執行的前置操作.beforeEach(async t => {await t.typeText('#kw', "前置步驟").click('#su')});

• fixture.afterEach 方法

  fixture(`百度案例`).page('https://www.baidu.com')// 設置每條用例執行的前置操作.beforeEach(async t => {await t.typeText('#kw', "前置步驟")}).afterEach(async t => {await t.typeText('#kw', "后置步驟").click('#su')});

上面這兩種方法可以給通過測試夾具 fixture 給該夾具下的每條用例設置前后置操作。如果某一條用例需要單獨的設置前后置，則需要使用 test.before 方法和 test.after 方法。

• test.before 方法

給單獨的用例設置前置操作

  test.before(async t => {await t.typeText('#kw', "test設置的前置")})('百度搜索功能', async t => {await t.typeText('#kw', "python").click('#su');})

• test.after 方法

給單獨的用例設置后置操作

  test.before(async t => {await t.typeText('#kw', "test設置的前置")})('百度搜索功能', async t => {await t.typeText('#kw', "python").click('#su');}).after(async t => {await t.typeText('#kw', "后置方法中輸入的內容").click('#su');})   

• 測試鉤子和測試代碼之間共享數據 如果需要在測試鉤子和測試代碼直接共享數據的話，我們可以通過測試上下文（t.ctx 屬性）來進行傳遞。在測試鉤子中將數據保存到測試上下文中，在測試方法中再去測試上下文中獲取數據。具體案例如下： test.before(async t => { // 在測試鉤子中通過t.ctx保存數據 t.ctx.token = 'musen123' }) ('百度搜索功能', async t => { // 測試鉤子中通過t.ctx獲取數據 console.log(t.ctx.token) })

2、夾具鉤子

  夾具鉤子和測試鉤子不同，夾具鉤子只會在夾具中的第一個測試開始之前和最后一個測試完成之后運行。要添加夾具鉤子，可以使用fixture.before和fixture.after方法來定義定義。另外在夾具鉤子中無法訪問測試頁面，也無法對測試頁面進行相關操作。

• fixture.before 方法

  fixture(`百度案例`)
.page('https://www.baidu.com')
.before( async ctx => {// 前置夾具鉤子console.log(ctx)
})

• fixture.after 方法

  fixture(`百度案例`)
.page('https://www.baidu.com')
.after( async ctx => {console.log(ctx)// 后置夾具鉤子
});

• 夾具鉤子和測試代碼之間共享數據 傳遞給 fixture.before 和 fixture.after 方法的鉤子函數接收一個夾具上下文的參數 ctx。需要進行數據傳遞時，我們可以在夾具鉤子中把數據保存到 ctx 的屬性中。在測試代碼中使用 t.fixtureCtx 來獲取。案例代碼如下：

  fixture(`百度案例`).before(async ctx  => {// 夾具鉤子中保存數據ctx.someProp = 123;})test('Test1', async t => {// 測試代碼中獲取數據console.log(t.fixtureCtx.someProp); 
});

三、跳過和選擇用例

1、跳過用例

  在執行測試的時候，如果說有用例不想執行，那么我們可以設置跳過用例執行。關于跳過用例執行testcafe中提供了fixture.skip 和test.skip方法。

• fixture.skip：跳過整個 fixture 的用例
• test.skip：跳過當前的測試用例 // 跳過夾具F1中所有的用例 fixture.skip('F1'); test('F1-->用例1', async t => { }); test('F1-->用例2', async t => { }); fixture（'F2'）; // 跳過這一條用例 test.skip('F2-->用例1', async t => { }); test('F2-->用例1', async t => { });

2、選擇用例

另外我們也可以使用 fixture.only 和 test.only 來篩選執行需要的用例，只有選擇的用例或夾具運行，而所有其他應被跳過

• fixture.only：選擇執行的測試夾具
• test.only：選擇執行的測試用例 // 選擇F1這個測試夾具 fixture.only('F1'); test('F1-->用例1', async t => { }); test('F1-->用例2', async t => { }); fixture（'F2'）; // 選擇這一條用例 test.only('F2-->用例1', async t => { }); test('F2-->用例1', async t => { });

以上就是 testcafe 中用例編寫的所有內容啦，后續會持續更新 TestCafe 的相關使用文檔。