--- source: - https://www.reddit.com/r/reactjs/comments/qq07a9/cypress_testing_suggestions_for_datatestid/hjx6x2j/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button - https://stackoverflow.com/questions/45028747/suggested-naming-conventions-for-selenium-identifiers --- ## 使用 Constants 放入 `data-testid` ```jsx export const surveyTestIds = { BUTTON_NEW_SURVEY: 'button-new-survey', } // bad <Button data-testid="button-new-survey" > // good <Button data-testid={surveyTestIds.BUTTON_NEW_SURVEY} > ``` 從 constants object 取用實際的 test id，而不是直接寫死，原因與好處如下 : - 從 object 來取 property 可以享有 IDE 自動完成，打錯時也有更好的提示 - 好維護，需要更改實際值時，針對 constants object 進行修改就好 - 查看 constants object 即可一次檢視全部 test id，有助於取名時的一致性 - constants object 可以輸出成 JSON，前後端和 QA 使用不同的語言時可以共用，並使用一致的規範 ## Constants Object 命名規則 ```js { BUTTON_NEW_SURVEY: 'button-new-survey', // and more... } ``` - **key** : 使用全大寫，並用下底線區隔，是大寫版本的 `snake_case`，又稱為 `SCREAMING_SNAKE_CASE` - 通常用於 JavaScript 中的 constants (常量) - **value** : 使用全小寫，並用連字號區隔，又稱為 `kebab-case` - HTML 中 class 和 id 的值很常使用這種這種命名規則，我們使用的 `data-testid` 也是 HTML 的 attribute，故沿用此命名規則 ## Test ID 字串的命名規則 ```js // bad "new-survey" // good "button-new-survey" // BUTTON_NEW_SURVEY // bad "upload-zip" // good "radio-upload-zip" // RADIO_UPLOAD_ZIP ``` - 依據被定位 element 的 UI 性質選取適當的 prefix (前綴) - 再依據 element 的功能和所屬歸類進行補充描述，組成 test id 最後，key 則根據 test id 實際值改為 `SCREAMING_SNAKE_CASE`，如上述範例 ## prefix 參考 詳細的 prefix 列表，請[參考 ARIA role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)，以此為基礎 若往後有需要，再討論新增 prefix，並文件化 ## TODO - constants 的資料夾結構 - 以JS為主，再 export JSON？ - 是否要獨立一個 repo