Add data-* for end to end test
abz53378 opened this issue · comments
Why
See https://blog.kentcdodds.com/making-your-ui-tests-resilient-to-change-d37a6ee37269 to know learn is an end-to-end test.
For us, we can make Canner more reliable. For developers, they can also test their CMSes.
Proposed Solution
As mentioned by the article above, using data-*
is better than className
or id
. Since antd is not fully supported data-*
attributes, I think to add this attribute on our title HOC(which wraps every component) is OK, so whether the component is customized or imported from other UI frameworks, they will be wrapped in a <div data-testid="">
.
DIscussion
- The
data-*
attributes should bedata-testid
,data-e2e
or others? - What should the value of the attributes be?
- I think it can be
data-testid=${refId.toString()}
, so every component will have its own testId likeposts/0/info/name
.