step - HackMD

--- robots: noindex, nofollow tags: nuwa GA: UA-124732989-1 --- # step :::warning Recommended to use [**Book mode** <i class="fa fa-book"></i>](https://hackmd.io/c/rJwpejduE/%2F7FSjZv6LQ8-eJbwmcz6TRg) ::: GUI 的測試步驟由多個不同動作的介面操作所形成的集合，以搜尋的測試步驟為例，我們可以拆分成三個不同的動作，如下所述： 1. `輸入`搜尋關鍵字 2. `點擊`搜尋按鈕 3. `驗證`搜尋結果在 Nuwa TestCafe 裡我們使用 YAML 定義測試步驟的動作（[Action](#Action)），下面章節將會介紹如何使用。 ## Action 我們可以在測試（Test）裡定義測試步驟的動作，在 Nuwa TestCafe 提供五種 Action 讓使用者定義測試步驟。 - [click](#Click) - [navigateTo](#NavigateTo) - [executes](#Executes) - [expect](#Expect) - [customMethod](#CustomMethod) 測試步驟的結構如下範例所示，在 `test` 裡使用 `steps` 關鍵字進行測試步驟的定義，在執行測試時會依照順序對 GUI 介面進行操作及驗證。 ```yaml - test: steps: - typeText: parameter: String options: Object - click: parameter: String options: Object - expect: parameter: string {Assertion}: Array ``` ### Click ```yaml - click: element: element selector ``` | parameter | type | descrption | | ------------------ | ------ | ------------------------------------------------------------------------------------------------- | | element | String | 網頁上欲點擊的 element selector | | options (optional) | Object | 請參考 [Click Action Options](#Click-Action-Options) | ### TypeText ```yaml - typeText: element: element selector input: string ``` | parameter | type | descrption | | ------------------ | ------ | ------------------------------------------------------------------------------------------------------- | | element | String | 網頁上輸入框的 element selector | | input | String | 欲輸入至輸入框的文字 | | options (optional) | Object | 請參考 [TypeText Action Options](#TypeText-Action-Options) | ### NavigateTo ```yaml - navigateTo: url: 'https://www.google.com/' ``` | parameter | type | descrption | | --------- | ------ | ---------------- | | url | String | 欲跳轉頁面之網址 | ### Executes ```yaml - executes: - 'stepgroups/login.yml' ``` 可參考 [Advanced Features 的 Step Group](https://hackmd.io/c/rJwpejduE/%2FIEWwlsp6QSWBnh1CugUwDg) ### Expect ```yaml - expect: element: element slector contains: [innerText, 'string'] ``` | parameter | type | description | | ------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------- | | element | String | 欲比對之網頁 element | | message (optional) | String | 如果測試失敗，則在報告中顯示的斷言消息。 | | options (optional) | Object | 請參考 [Testcafe Assertion Options](https://devexpress.github.io/testcafe/documentation/test-api/assertions/#assertion-options) | | {Assertion} | Array | 比對的方法，請參考以下之 [Assertion](#Assertion) | #### Assertion - [eql](#Deep-Equal-eql) - [notEql](#Not-Deep-Equal-notEql) - [ok](#Ok-ok) - [notOk](#Not-Ok-notOk) - [contains](#Contains-contains) - [notContains](#Not-Contains-notContains) - [typeOf](#Type-of-typeOf) - [notTypeOf](#Not-Type-of-notTypeOf) - [gt](#Greater-than-gt) - [gte](#Greater-than-or-Equal-to-gte) - [lt](#Less-than-lt) - [lte](#Less-than-or-Equal-to-lte) - within ( not support ) - notWithin ( not support ) - match ( not support ) - notMatch ( not support ) ##### Deep Equal (eql) | parameter | type | description | | --------- | -------------- | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | expected | String, Number | an expected value. | ```yaml eql: [ property, expected ] ``` ##### Not Deep Equal (notEql) | parameter | type | description | | ---------- | -------------- | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | unexpected | String, Number | an unexpected value. | ```yaml notEql: [ property, unexpected ] ``` ##### Ok (ok) | parameter | type | description | | --------- | ------ | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | ```yaml ok: [ property ] ``` ##### Not Ok (notOk) | parameter | type | description | | --------- | ------ | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | ```yaml notOk: [ property ] ``` ##### Contains (contains) | parameter | type | description | | --------- | -------------- | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | expected | String, Number | the expected value. | ```yaml contains: [ property, expected ] ``` ##### Not Contains (notContains) | parameter | type | description | | --------- | -------------- | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | expected | String, Number | the expected value. | ```yaml notContains: [ property, expected ] ``` ##### Type of (typeOf) | parameter | type | description | | --------- | ------ | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | typeName | String | the expected type | ```yaml typeOf: [ property, typeName ] ``` ##### Not Type of (notTypeOf) | parameter | type | description | | --------- | ------ | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | typeName | String | the unexpected type | ```yaml notTypeOf: [ property, typeName ] ``` ##### Greater than (gt) | parameter | type | description | | --------- | ------ | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | expected | Number | a comparison value | ```yaml gt: [ property, expected ] ``` ##### Greater than or Equal to (gte) | parameter | type | description | | --------- | ------ | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | expected | Number | a comparison value | ```yaml gte: [ property, expected ] ``` ##### Less than (lt) | parameter | type | description | | --------- | ------ | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | expected | Number | a comparison value | ```yaml lt: [ property, expected ] ``` ##### Less than or Equal to (lte) | parameter | type | description | | --------- | ------ | -------------------------------------------------- | | property | String | element 欲比對的屬性，若不需要使用屬性可輸入空字串 | | expected | Number | a comparison value | ```yaml lte: [ property, expected ] ``` ### CustomMethod 請參考進階功能的 [Custom Method](/WRvUzwfWTCWeSt5UPXvufA) ## Options 當有些動作需要另外的參數做處理時可以使用 Option 進行配置。 ### Click Action Options ```yaml - click: element: 'btn' options: modifiers: ctrl: Boolean alt: Boolean shift: Boolean meta: Boolean offsetX: Number offsetY: Number caretPos: Number speed: Number ``` 參數說明可以參考 TestCafe 官方的 [Click Action Options](https://devexpress.github.io/testcafe/documentation/test-api/actions/action-options.html#click-action-options) ### TypeText Action Options ```yaml - typeText: element: selector path input: 'hi' options: modifiers: ctrl: Boolean alt: Boolean shift: Boolean meta: Boolean offsetX: Number offsetY: Number caretPos: Number replace: Boolean paste: Boolean speed: Number ``` 參數說明可以參考 TestCafe 官方的 [TypeText Action Options](https://devexpress.github.io/testcafe/documentation/test-api/actions/action-options.html#typing-action-options)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.