data-cy

docs.cypress.io/guides/references/best-practices

Best Practices | Cypress Documentation

보통, 자동화를 시작하게 되면 selector부터 찾다가 선택할 수 없는 값이 없다면 대게 Xpath를 사용하게 되는 거 같다. 

* Xpath 사용법 (바로가기)

하지만 개인적으로 Xpath는 의미(semantic)를 파악하기 쉽지 않으며, tag가 달라질 수 있는 환경이라면 변경해줘야하는 이슈가 생기므로 좋아하진 않는다. 

 

그렇다면 selector (id, classsname)을 추가해줘야 할텐데, 

1. 프로그램에서 동적인 classname을 사용하는 아래와 경우에는 또 쉽지가 않아진다. 

2. 이미 사용되는 classname 에 자동화로 인하여, 영향을 주는 것은 좋은 거 같지 않다.

저런 이슈들이 data-* 형태의 attribute를 cypress에서 사용하기를 권장한다.

* data attribute (바로가기)

 

맨 처음에는 www.npmjs.com/package/classnames 를 통해서 classnames을 2개로 주면 되지 않을까 싶었지만?

data-cy를 통해 명확히 QA 쪽에 필요한 사항을 추가해서 사용하는 게 매우 깔끔해 보인다. 

 

자동화에 필요한 data-cy 등의 값을 QA에서 판단을 해서 요청을 한다.

또는

개발에 참여를 하는 방법으로 각 develop branch를 사용 중이라면, data-cy를 추가 후 다음 주기적 배포에 포함 수 있도록 준비한다.