[Devlog] Cypress css testing issue

💡 Cypress testing 중 겪은 이슈에 대해서 공유하고자 이 아티클을 작성하게 되었습니다.

---

Css color test

네비게이터의 아이템을 클릭했을때, 해당 아이템의 css 변경을 테스팅 하는 모듈입니다.

-> 이 코드는, 에러가 발생하는 코드입니다. 에러 화면을 보면,

-> 제가 작성한 코드는, css hex color code로 value를 테스팅하는데, Cypress는 rgba로 value를 뱉어서 발생하는 오류였습니다.
이런 이유는 Cypress 공식문서에서 확인할 수 있었는데요,

-> Cypress에서 사용하는 assertion library인 chai는, Sinon과 JQuery기반으로 작동하는 라이브러리 라고 나와있습니다. JQuery는 css action에 대해 rgba로만 감지하여 생기는 문제였습니다.
Cypress자체에서 hex code와 rgba에 대해 자동 변환하여 테스팅을 진행해야 할 것 같지만, 현재는 해당 이슈를 해결할 수 있는 API가 따로 존재하지 않습니다.

-> 결국 저는, hex code를 rgba로 컨버팅하는 유틸 함수를 만들어서 테스팅을 진행했습니다.


-> 이렇게, rgba로 변환한 후 테스팅이 정상적으로 통과하는 모습을 볼 수 있습니다.

---

Cypress run ↔️ open 결과가 다르다?

Cypress에서 테스팅을 할 수 있는 방법은 CLI환경에서 테스팅하는 Cypress run과
실제 브라우저 환경에서 테스팅하는 Cypress open이 있습니다.
실제 CI/CD환경에서는 run환경에서 테스팅을 진행하고, 로컬 테스팅은 두 가지를 번갈아면서 테스팅하던 상황에서 에러를 맞닥뜨렸습니다.
run과 open시에 테스팅 결과가 다르게 되는 문제입니다.

run을 통해 css background color testing을 합니다.

div를 클릭하면 rgba(25, 118, 210, 0.08) 이 나와야 하는데 자꾸만

rgba(25, 118, 210, 0.2) 를 뱉는 것입니다.

open을 통해 tesing을 하면 통과되구요,,

아니, 심지어 open도 처음 명령어 실행 후에는 에러가 터지고, watch모드를 통한 변경사항이 있는 후에 테스팅이 진행되면 통과가 되는 것입니다.

결국 찾다보니, 원래 기본으로 cypress가 electron에서 돌아가기 때문에 이런 문제가 발생하지 않는 걸까 ? 해서 script에 browser세팅을 해주고 진행해 보았습니다.

하지만 결국 똑같더군요. 심지어 배경색을 red로 주어도 기댓값은 위에 저 rgba였습니다.

Material ui의 theme를 가져다가 쓰고있고, selected가 되면 opacity를 0.08로 적용하게끔 되어있습니다. 그래서 0.08로 하면 될 것 같다고 생각하고 모든 스타일을 적용해보아도 run에서 터지는 에러를 잡기는 불가능했습니다.

심지어 opacity 0.2는 mui action theme에도 나와있지 않는 쌩뚱맞은 opacity입니다.

제 생각에는, click타이밍에 보여지는 opacity를 읽고 test가 진행되지 않나 생각합니다.

물론 0.2로 testing을 하면, 현재 모든 환경에서는 문제가 될 것이 없지만 의미가 없다고 생각했습니다.

실제로는 제가 임의의 background color를 주는 것도 아니기 때문에 background testing은 과감히 삭제했습니다.

📄 관련 참고 문서

• Cypress assertion
• Cypress css hex issue - github
• Convert hex to css rgba - stackover flow
• Opacity hex table
• Hex to rgba calculator