🤔Playwright 자동화: 골치 아픈 'Canvas 그리드' 해결 가이드

Playwright 자동화: 골치 아픈 'Canvas 그리드' 완벽 해결 가이드

🤔 왜 Canvas 그리드는 자동화하기 힘들까?

ERP나 어드민 페이지를 테스트하다 보면 "분명히 표(Grid)가 보이는데 선택이 안 되는" 상황을 마주하게 됩니다. 개발자 도구를 켜봐도 <tr>이나 <td> 태그는 없고, 덩그러니 <canvas> 태그 하나만 있는 경우가 많죠.

이건 기술적인 제약 때문입니다. Canvas는 브라우저라는 도화지에 픽셀로 그림을 그린 것이라, HTML 요소(DOM)로 잡히지 않습니다. 그래서 많은 분들이 좌표값(x: 350, y: 80)을 찍어 클릭하게 만드는데, 이 방식은 모니터 해상도나 화면 비율이 조금만 달라져도 테스트가 깨져버리는 '유지보수 지옥'을 만듭니다.

💡 해결책 A: JavaScript 직접 호출 (가장 추천)

가장 확실한 방법은 마우스로 그림을 클릭하는 게 아니라, 그리드 데이터를 관리하는 '뇌'에 직접 명령을 내리는 겁니다. 대부분의 상용 그리드(RealGrid, AUIGrid 등)는 브라우저 메모리에 제어 객체를 가지고 있습니다.

• Playwright의 page.evaluate() 함수를 사용해 그리드 객체에 접근하세요.
• 개발자 도구 콘솔에서 RealGridJS.getGrid("ID") 같은 명령어가 먹히는지 확인해보세요.
• 좌표 클릭 대신, 코드로 "1번째 줄, 사원번호 칸 선택해줘"라고 명령하면 100% 정확하게 동작합니다.

🛠️ 차선책: 숨겨진 입력창과 키보드 활용

만약 JavaScript 접근이 어렵다면, 좌표 클릭보다는 훨씬 안전한 차선책들이 있습니다.

• 숨겨진 입력창 찾기: HTML에 input id="...Grid_line" 같은 요소가 있다면, 이곳에 값을 강제로 넣고 Enter 이벤트를 발생시켜 보세요.
• 키보드 네비게이션: 그리드 구석을 한 번만 클릭해 포커스를 잡고, Home 키로 초기화한 뒤 방향키로 이동하세요. 좌표보다 훨씬 안정적입니다.

🚀 결론: 좌표 하드코딩을 멈추세요

화면 해상도에 의존하는 테스트 코드는 언젠가 반드시 실패합니다. "우리 회사가 쓰는 그리드 라이브러리가 무엇인지" 파악하는 것이 해결의 첫걸음입니다.

지금 바로 개발자 도구(F12)를 열어 그리드 객체를 찾아보세요. 테스트의 안정성이 완전히 달라질 것입니다.