Selenium, Playwright에서 XPath, CSS Selector 사용팁

인수테스트를 진행 시 필요한 자동화에서 사용한 Selenium과 PlayWright를 사용하면서 도움이 되었던 문서들을 정리해보았습니다. 더불어 몇가지 팁도 적어보았습니다.😉

 

[XPath] 기본 개념

먼저 XPath 가 무엇인지 알아야겠죠? TCPSchool 은 워낙 유명한 사이트인데 XPath에 대한 기초 지식도 잘 짚고 갈 수 있습니다. 특히 경로연산자가 중요합니다. 점 하나, 슬래시 하나 차이로 원하는 요소를 찾아내지 못하는 경우가 자주 발생합니다.

 

코딩교육 티씨피스쿨

코딩교육 티씨피스쿨

 

[XPath] 형제, 부모 노드 탐색

강좌6-6 XPATH

강좌6-6 XPATH

 

[XPath] 포함하고 있는 텍스트 찾기

CSS Selector 를 사용할 때는 내부에 갖고 있는 text 를 찾기 어렵습니다.

<button>삭제</button>

 

위처럼 삭제 라는 텍스트를 갖고 있는 버튼을 찾기 위해선 XPath 의 contains() 를 활용해야 합니다.

XPath Contains: Text, Following Sibling & Ancestor in Selenium

XPath Contains: Text, Following Sibling & Ancestor in Selenium

 

[XPath] Attribute 활용

각 노드의 attribute 를 활용해 어떻게 탐색하면 좋을지 참고하면 좋습니다. CSS Selector 와 XPath 의 attribute 다루는 방식이 조금씩 다르니 주의해야 합니다.

 

Understanding XPath - AI-driven E2E automation with code-like flexibility for your most resilient tests

Understanding XPath - AI-driven E2E automation with code-like flexibility for your most resilient tests

 

<div title="row">
	<button>삭제</button>
</div>

위의 코드에서 button을 찾기 위해선

CSS Selector
= div[title='row'] > button

XPath
= div[@title='row]/button[contains(text(), '삭제')]

 

 

XPath -> CSS Selector 변환

cssify

cssify

 

 

자바에서 자바스크립트 같은 동작을 수행해야 할 때, JavaScriptExecutor

Selenium 을 자바로 사용 할 때에 해당하는 팁입니다.

https://stackoverflow.com/questions/24267413/how-to-get-parent-of-webelement

How to get parent of WebElement

 

---

[Playwright] Locator 제공 함수를 잘 활용하면 코드가 짧아진다!

위의 코드를 다시 가져와봤습니다.

<div title="row">
	<button>삭제</button>
</div>

 

xpath 와 locator 함수를 활용해 button 을 찾는 로직입니다. (java 기준)

var row = page.getByTitle("row")

row.locator("xpath=.//button[contains(text(), '삭제')]").click() // xpath
row.getByText('삭제').click() // playwright locator 가 제공하는 함수 사용

 

.getByText() 함수를 활용하면서 xpath 처럼 복잡하게 작성할 수고로움이 줄어들었습니다(?)

물론 해당 row 에 삭제라는 단어가 하나만 존재해야 지칭하는 노드를 바로 찾을 수 있기에 단순한 구조에서는 Locator 가 제공하는 함수를 활용하면 좋습니다.