---
robots: noindex, nofollow
tags: nuwa
GA: UA-124732989-1
---

# Example 實戰
:::warning
Recommended to use [**Book mode** <i class="fa fa-book"></i>](https://hackmd.io/c/rJwpejduE/%2FYmn-gZcMSFqufOc_sSykBg)
:::

Nuwa TestCafe 提供許多 examples ，使用者可以參考，撰寫自己的測試用例。

- [**Basic Example**](#Basic-Example) [<i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/%0800_basic_example)
- [**Reserved Word Example**](#Reserved-Word-Example) [<i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/01_reserved_word_example)
- [**Variables Example**](#Variables-Example) [<i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/02_variables_example)
- [**Parameters Example**](#Parameters-Example) [<i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/03_parameters_example)
- [**Step Group Example**](#Step-Group-Example) [<i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/04_execute_stepgroup_example)
- [**Custom Method Example**](#Custom-Method-Example) [<i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/05_custom_method_example)
- [**Hooks Example**](#Hooks-Example) [<i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/06_hooks_example)

:::info
:bulb:若要建立測試範本專案可以參考 [**Running All Testcase Example** <i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples#how-to-use)
:::
## Basic Example
提供最基本的測試用例 YAML 範例，只需要準備好 YAML 使用 Nuwa CLI 將測試用例轉成 TestCafe 可運行的代碼。

使用最基礎的 google 搜尋當作測試用例
- 設定全局配置 ( config ) ，測試用例名稱為 `google_search` 並且以 `https://www.google.com.tw` 當作測試用例的進入點

- 設定測試 ( test ) ，測試名稱為 `google search basic example` ，測試進入點為測試用例進入點的相對路徑`/`

- 設定測試步驟 ( steps ) ，測試的步驟為:
- 在搜尋框內輸入 `hi`
- 按下搜尋的按鈕
- 確認搜尋結果有數筆資料，使用含有`約有`字串，當作驗證。

基本測試用例範例如下：

- config:
    name: google_search
    base_url: https://www.google.com.tw
- test:
    name: google search basic example
    url: '/'
    steps:
      - typeText:
          element: 'input[name=q]'
          input: 'hi'
      - click:
          element: 'input[name=btnK]'
      - expect:
          element: '#resultStats'
          contains: [innerText, '約有']

:::info
:mega: 更多範例可以參考 [**Basic Examples** <i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/%0800_basic_example)
:::

## Reserved Word Example
Nuwa TestCafe 提供 3 種不同的 Reserved Word 讓使用者可以快速引用，分別是：
- [ENV - 引用環境變數](https://hackmd.io/c/rJwpejduE/%2FIcxWhVeQT3igaO73cH3xHg)
- [POC - 使用 Page Object](https://hackmd.io/c/rJwpejduE/%2FAlWgKRtjQJmewpOWCoqTzw)
- [P - 讀取 CSV 內容用於數據驅動](https://hackmd.io/c/rJwpejduE/%2FzM0GWUPzToenFMMCu6DnLg)

:::info
:mega: 更多範例可以參考 [**Reserved Word Examples** <i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/01_reserved_word_example)
:::

## Variables Example
可以在測試用例裡使用 `variables` 定義變數，將變數帶入測試裡

- `config` 和 `test` 都可以定義變數
- 當變數命名重複時，config 會覆蓋 test 的變數
- 變數可以使用 `$ENV(key)` 帶入，可參考[**環境變數**](https://hackmd.io/c/rJwpejduE/%2FIcxWhVeQT3igaO73cH3xHg)

使用 Basic Example 的測試用例做修改，定義 `$test_name` 變數並將值附加在測試 ( test ) 名稱上，並將搜尋關鍵字 `hi` 抽出來使用 `$search_value` 帶入測試的步驟 ( step )

- config:
    name: google_search
    base_url: https://www.google.com.tw
- test:
    name: google search $test_name
    url: '/'
    variables:
      search_value: 'hi'
      test_name: basic variables example
    steps:
      - typeText:
          element: 'input[name=q]'
          input: $search_value
      - click:
          element: 'input[name=btnK]'
      - expect:
          element: '#resultStats'
          contains: [innerText, '約有']

:::info
:mega: 更多範例可以參考 [**Variables Examples** <i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/02_variables_example)
:::

## Parameters Example
當有多筆資料要進行測試，並且執行步驟都一樣時，我們可以使用 `parameters` 定義數據驅動的資料集，更多的方式可以參考 [Data Driven](/zM0GWUPzToenFMMCu6DnLg) 章節。

假設我們要使用 3 筆關鍵字去測試 google search 的功能：
- 在 `parameters` 定義 3 組資料集合
- 每組資料內容為`編號-搜尋關鍵字`
- 這個測試 ( test ) 將會被執行 3 次，每次會將 `parameters` 裡的變數帶入 `test` 裡進行測試

數據驅動的測試用例如下：

- config:
    name: google_search
    base_url: https://www.google.com.tw
- test:
    name: google search parameter data driven example $number
    url: '/'
    parameters:
      number-search_value:
        - number: 1
          search_value: 'hi'
        - number: 2
          search_value: 'ha'
        - number: 3
          search_value: 'he'
    steps:
      - typeText:
          element: 'input[name=q]'
          input: $search_value
      - click:
          element: 'input[name=btnK]'
      - expect:
          element: '#resultStats'
          contains: [innerText, '約有']

:::info
:mega: 更多範例可以參考 [**Parameters Examples**](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/03_parameters_example)
:::

## Step Group Example
我們可以將常重複使用的步驟定義成 Step Group ，像是登入的步驟等等，並在測試用例使用 `executes` 關鍵字引用 Step Group 。

範例使用 Basic Example 的測試用例做修改，將測試的步驟抽出來定義成 Step Group：

test:
  name: google search step
  steps:
    - typeText:
        element: 'input[name=q]'
        input: 'hi'
    - click:
        element: 'input[name=btnK]'
    - expect:
        element: '#resultStats'
        contains: [innerText, '約有']

並且在測試用例裡引用定義的 Step Group，如下所示：

- config:
    name: google_search
    base_url: https://www.google.com.tw
- test:
    name: google search basic import stepgroup example
    url: '/'
    steps:
      - executes:
          - stepgroups/google_search_step.yml

Step Group 可以被多個測試用例所引用，也可以在將變數帶入，更多的用法可以參考 [Step Group](/IEWwlsp6QSWBnh1CugUwDg) 章節。

:::info
:mega: 更多範例可以參考 [**Execute Step Group Example** <i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/04_execute_stepgroup_example)
:::

## Custom Method Example
自訂函數的類型分成三種，用法可以參考 [Custom Method](/WRvUzwfWTCWeSt5UPXvufA) 章節。

- 直接引用函數
- 引用函數並傳遞參數
- 函數內使用 TestCafe Controller 自訂測試的步驟

:::info
:mega: 更多範例可以參考 [**Custom Method Examples** <i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/05_custom_method_example)
:::

## Hooks Example
可以在測試用例或測試執行的執行前後，引用自定的函數進行前置或後置的處理，用法可以參考 [Hook Mechanism](/uqILVsHrQNeA1f0-PDhgYw) 章節。

:::info
:mega: 更多範例可以參考 [**Hooks Examples** <i class="fa fa-github"></i>](https://github.com/104corp/nuwa-cli/tree/master/boilerplates/testcafe/examples/testcases/06_hooks_example)
:::