[playwright] mouse.click vs locator.click

이번에 ui 자동화 테스트를 만들면서 css selector 때문에 매우 고생이 많았다.

기본적으로 playwright는 ui 자동화를 할 때, css selector, xpath를 인식하는데, 페이지를 어디를 갔다 오느냐에 따라 DOM 구조가 계속 바뀌기 때문에 css selector로 locator를 정확하게 인식할 수 없는 경우가 수 없이 많게 되었다.

그래서 고안한 것이, 기본적으로 css selector 로 locator.click을 사용하고, 만약 css selector를 잡을 수 없을 경우에는 프론트에서 전달해준 x,y 좌표값을 받아서 x,y의 evaluate를 통해 해당 text와 css selector를 얻는 것이었다. 좌표값을 통한 css selector 또한 제대로 잡을 수 없을 경우에는 mouse.click으로 해당 좌표를 클릭하게 하였다.

이렇게 3가지의 단계를 거치니, 기존의 locator.click으로만 ui 테스팅을 할 때보다 인식률 및 정확도가 90% 이상 증가 하였다.

사실 좌표값으로 ui 테스팅을 하는것은 매우 비효율적이라고 생각한다. 왜냐하면 화면에서 해당 좌표에 어떤 이슈가 생길지 모르니 항상 기대값이 똑같을 수 없기 때문에 css selector를 채택한 것이었는데, css selector 또한 계속해서 구조가 바뀌니 답이 없던 것이었다.

그리고 mouse.click 과 locator.click의 차이점은 페이지 로딩을 기다리는지의 유무인 것 같다.

mouse.click은 페이지가 로드가 되었는지 유무는 관계없이 무조건 클릭을 하게 되므로, 만약 페이지 로딩이 갑자기 오래 걸린다면, 원하는 기대값을 얻지 못할 수 있다.

반면 locator.click은 페이지가 로드 될 때까지 기본값으로 30초동안 기다리기 때문에, 해당 css selector를 잡을 때까지 기다리는 장점을 갖게 된다.