search

Dolphin-PC / Commerce

전자기기 구매 E-Commerce프로젝트
https://banana-shop-chi.vercel.app
0 stars 0 forks source link

E2E 테스트 - 유저 플로우 및 서비스 로직 테스트 #66

Closed Dolphin-PC closed 2 weeks ago

Dolphin-PC commented 3 weeks ago

*참고 글

Dolphin-PC commented 2 weeks ago

Head, Headless 모드

Head모드

Headless모드

Dolphin-PC commented 2 weeks ago

궁금증

GPT say - data-testId권장

Cypress 테스트에서 요소를 식별하기 위한 `data-testid`와 `aria-label`의 사용은 각각의 목적과 장단점이 있습니다. 두 가지 방법을 비교해 보자면:

### 1. **`data-testid` 사용**
   - **장점**:
     - **테스트 전용 속성**: `data-testid`는 테스트 목적으로만 사용되므로, 실제 사용자에게는 영향을 미치지 않습니다. 이는 테스트와 실제 애플리케이션의 코드가 분리된다는 점에서 좋습니다.
     - **명확한 식별자**: 테스트에서만 사용하기 때문에 다른 용도로 오용될 가능성이 낮아, 테스트의 유지보수가 용이합니다.
     - **표준적 관행**: 여러 프론트엔드 테스트 도구(Cypress, Testing Library 등)에서 권장하는 방식이며, 많은 개발자들이 이 방식을 사용합니다.

   - **단점**:
     - **추가 코드**: 테스트만을 위한 속성을 추가하는 것이므로, 코드가 조금 더 복잡해질 수 있습니다.
     - **의미적 연관성 부족**: `data-testid`는 접근성이나 사용자 인터페이스와 관련된 정보가 아니기 때문에, 코드에서 의도나 의미를 파악하기 어렵습니다.

### 2. **`aria-label` 사용**
   - **장점**:
     - **웹 접근성 향상**: `aria-label`은 스크린 리더와 같은 접근성 도구에 유용하며, 시각적 장애가 있는 사용자를 위한 정보 제공에 적합합니다.
     - **테스트와 접근성 개선**: 한 번의 속성 추가로 테스트 식별과 웹 접근성을 동시에 고려할 수 있습니다.

   - **단점**:
     - **오용 가능성**: `aria-label`은 웹 접근성을 위해 설계된 속성으로, 테스트 전용으로 사용하는 것은 권장되지 않습니다. 만약 테스트를 위해 자주 수정된다면, 접근성 관련 정보가 바뀔 수 있어 의도와 달라질 수 있습니다.
     - **유지 보수 어려움**: 접근성 관련 속성이므로, 변경 시 테스트 코드뿐만 아니라 실제 접근성에도 영향을 미칠 수 있어 유지보수가 어렵습니다.

### 결론
- **테스트 전용 요소**가 필요한 경우, **`data-testid`**를 사용하는 것이 더 적합합니다. 테스트와 접근성의 목적을 명확히 분리하는 것이 유지보수성과 코드 가독성에 좋습니다.
- 만약 접근성을 위한 속성을 추가해야 한다면, `aria-label`을 **접근성 용도**로 사용하고, 테스트 식별은 `data-testid`를 활용하여 역할을 분리하는 것이 좋습니다.

이 방식은 더 명확하게 코드를 관리하고, 접근성과 테스트를 각각 최적화할 수 있습니다.