Selenium, Playwright 트러블슈팅

최근 인수테스트를 진행하면서 Selenium, Playwright 를 사용해보면서 필요한 DOM에 접근하기 위해 다양한  Locator 를 사용했었습니다. 가장 쉬운 방법은 DOM 이 갖고 있는 id 를 통해서 찾는거지만, 테스트하려는 DOM 에는 대부분 id가 없더라구요..😧

 

역시 인생은 쉬운게 없구만

 

 

그래도 우리에겐 좋은 대안책이 있죠. CSS Selector와 XPath입니다. XPath는 이번 인수테스트 자동화를 진행하면서 처음 사용해보게 되었는데요.... 정말 웨않되를 열심히 울부짖었던 것 같습니다😂

이번 글에서는 CSS Selector와 XPath를 사용하면서 경험한 트러블에 대해서 이야기 해보려고 합니다.

---

마주 했던 트러블

저는 이렇게 해결했지만, 올바른 해결방법이 아닐 수 있습니다. 참고 바랍니다:)

 

찾아야 할 element 개수가 맞지 않을 때

리스트나 테이블 요소 같은 것들을 찾을 때 개수가 안 맞을 때가 있습니다. 보통 이러한 문제들은 화면 전환이 일어나거나 API 가 호출되면서 데이터 변경이 일어나는 경우에 발생합니다. 이전 화면, 이전 데이터의 element를 찾은 것입니다.

 

Selenium에서 초기 드라이버 환경 셋팅 시, WebDriverWait 사용해 ‘조건을 찾을 때까지 몇 초를 기다린다’로 명시할 수 있지만, 아무것도 하지 않고 몇 초를 기다린다는 옵션을 줄 수는 없는 것 같습니다. 그래서 화면 전환이나 컴포넌트를 리렌더링 하는 경우, 잠시 기다리기 위해 Thread.sleep() / time.sleep()등을 활용 할 수 있습니다.

반면, Playwright는 waitForTimeout 을 이용해 대기 시간을 줄 수 있습니다.

일반적으로 time.sleep() 보다 Thread.sleep() 을 쓰는 것이 좋다고 합니다.

<Selenium>
Thread.sleep() / time.sleep()

<Playwright>
Page.waitForTimeout(대기할 시간)

 

if(element == null){ … } 같은 조건식으로 검사하려는데 작동하지 않을 때

element 찾지 못했을 때 조건을 주기 위해 if 문을 작성하면 조건에 안 걸리는 경우가 있습니다. Selenium 이나 Playwright 가 요소를 찾지 못하면 찾을 때까지 기다리기 때문에… 오히려 timeout 이 발생합니다. 작성한 locator 가 잘 작동하는지 확인하기 위해선 해당 locator 의 element 갯수를 확인해보는 방법을 추천드립니다.

 

Java기준

• Selenium 에서는 findElements.size()
  • 여러 개를 찾는 findElements 에서 확인 가능
• Playwright 에서는 locator.count()
  • 찾지 못하면 0 출력

 

span 클릭이 안된다!?

기본적으로 클릭이 가능하지 않은 요소는 .click() 함수를 호출할 수 없습니다. 그래서 span 도 클릭되지 않습니다.

만약 span 등 클릭이 안되는 요소로 만들어져 있는 것을 클릭해야 한다면 Selenium에서는 JavaScriptExecutor 를 제공합니다. 이를 사용해 JavaScript 를 실행해 클릭 가능하지 않은 요소도 강제로 클릭 이벤트를 발생할 수 있습니다. 

 

isSelected(), isCheckd() 같은 함수가 동작하지 않는다면?

먼저 해당 함수를 호출하는 element 가 selected, checked 라는 속성을 갖고 있는지 판단해야 합니다.

존재하지 않는데 있냐고 물어보면 안되겠죠?

 

XPath 사용 시, 경로 // 와 .// 차이점 이해하기

XPath 에서 //div 와 .//div 는 매우 큰 차이점이 있습니다. // 는 root 의 하위 노드를 선택하고, .// 는 현재 노드부터의 하위 노드를 선택합니다. 아래 꿀팁 문서에서 더 상세하게 확인할 수 있습니다.

 

두 개의 Locator 비교하기

Playwright

• 두 개의 Locator 를 비교하기 위해선 같은 locator 유형으로 찾아야 합니다. (몰라서 삽질함)
• (ex. 둘 다 XPath 이거나, CSS Selector 이거나 )