Javascript - auto clicker

웹페이지에서 귀찮은 반복 작업을 할 일이 있다. 이럴 때 매크로를 다운 받기도 하는데, 간단한 작업은 자바스크립트를 통해 쉽게 할 수 있다. getElementBy... 등으로 요소를 잡아올 수도 있긴 한데, 페이지가 넘어갈 때마다 className이 바뀌고 있길래 이 방법은 포기하고 좌표를 직접 입력하여 처리했다.

1. 클릭한 좌표 알아내기
   우선 클릭한 좌표는 event 객체의 clientX, clientY 필드를 조회해서 알아낼 수 있다.

   // 이벤트 객체에서 좌표 읽어오는 함수
   function getCord(event){
       console.log(e.clientX, e.clientY);
   }
   
   // document에 이벤트 등록
   document.addEventListener("click", getCord);

   웹페이지에서 [개발자도구] - [콘솔]에 입력하고 원하는 포인트를 눌러보면
   
   이렇게 좌표가 나오는 것을 확인할 수 있다.
   

2. 좌표 지정해서 클릭하기

   document.elementFromPoint(x, y).click();

   1에서 구한 좌표를 (x, y)에 넣고 실행하면 클릭이 된다.

3. 작업 반복하기
   이 작업을 반복하게 할 수 있다.
   가장 단순한 방법으로는 setInterval() 을 사용해서 일정 시간마다 반복하게 하는 것이다.

   // 첫번째 인자는 실행할 함수, 두번재 인자로는 ms단위로 시간을 받는다.
   // 즉 아래 코드는 1초에 한번씩 doSomething()을 실행하게 된다.
   setInterval(doSomething, 1000);

   하지만 페이지가 매번 새로고침 되는 경우, 콘솔에 입력한 코드는 리셋되므로 이 작업은 반복되지 않는다. 이럴 때는 tampermonkey를 활용해서 작성할 수 있다.

정리

// 클릭한 좌표 얻어오기
document.addEventListener("click", (e)=>{console.log(e.clientX, e.clientY)})

// auto clicker - x, y값 상황에 맞게 대입, 원하는 시간 넣기
setInterval(()=>{document.elementFromPoint(x, y).click()}, 1000);