selenium으로 네이버 매크로 만들기

개발 계기

동거인님이 선착순 클릭을 잘 못하신다고 게시물을 계속 감시하다가 글이 올라오면 댓글을 다는 프로그램을 사겠다고 하셨다. 근데 그 가격이 무려 10만 8천원인 것이다. 그래서 저 돈이면 차라리 내가 하고말지 라는 생각으로 개발을 시작했다.

---

기능

1. 로그인이 가능해야 함.
2. 카페로 찾아서 들어가야 함.
3. 특정 카페의 특정 게시판을 지속적으로 리로드하며 새로운 글이 올라오는지 확인해야 함.
4. 새로운 글이 올라오면 그 글을 클릭하여 들어가야 함.
5. 댓글을 달아야함.
6. 댓글을 달고 혹시 글이 여러 번 올라올 수 있으니 다시 3.의 과정으로 돌아가야 함.

---

개발 과정

why selenium

 우선 naver developer api가 있으면 제일 편하기 때문에 api를 확인했다. 근데 api는 카페가입, 게시글 쓰기 2개의 api만 허용하기 때문에 다른 방법을 찾아야 했다. 뭔가 api리스트를 보면 소셜 로그인, 크롤링을 위한 검색기능 말고는 구지 쓸데가 없을 것 같았다.

 다른 방법을 검색하던 중 selenium(https://www.selenium.dev/)이라는 driver 툴 매니징 하는 모듈을 알게 되었다. 내가 느낀 바로는 url을 통해서 그 화면의 구성 요소들을 가져오고 (DOM?) 그 구성요소들을 찾아서 (css, id, class 등을 기준으로) 그 구성요소에 action을 줌으로써 매크로 처럼 동작하게 되는 것 같다.

 우선 언어는 go와 node.js를 사용할 수 있는데 go로 한 예제를 찾지 못해서 node.js로 작업을 하였다.

설계 시작

1. 로그인 하기
   • 로그인 url으로 로그인 화면을 띄우도록 한다.
     • https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com
     •  id, pw를 찾을 수 있는 id or class 값을 찾는다 (크롬 디버깅 이용, 크롬 화면에서 f12를 누르면 옆에 뜸) 여기서 빨간 네모를 클릭한 뒤 화살표의 끝의 아이디 부분의 위치를 클릭한다. 그러면 맨 아래의 캡처와 같이 선택된 영역에 대한 정보가 나온다. 여기서 id, nmae, class 등 사용하고 자 하는 키 값을 찾는다.
     
   • 찾은 위치에 id, pw를 입력한다.
   • login 버튼을 누른다.
2. 카페를 찾아 들어가기
   • 카페id를 찾는다.

     

     여기에서 forjsapi 가 카페 아이디다

   • 카페 id로 카페 url을 만들어서 타겟 카페의 메인으로 들어간다. -> cafe.naver.com/forjsapi
   • 타겟 게시물의 menu_id를 이용해서 새로운 게시글이 추가됐는지 확인한다. (위의 로그인 부분 찾기와 동일한 방법)
   • 새로운 게시글이 추가됐을 경우 게시글을 클릭한다.
   • 게시글에 댓글을 단다.

개발 시작

1. node.js 설치하기 (본인의 경우 nvm을 사용하였다.) : https://github.com/nvm-sh/nvm#install--update-script
2. selenium 설치하기 npm i selenium-webdriver
3. chrome 드라이버 설치하기. (본인의 크롬 버전에 맞게 설치하면 된다.) : https://chromedriver.chromium.org/downloads
4. 크롬 브라우저를 빌드한다.

   • const driver = await new webdriver.Builder().forBrowser('chrome').build();

5. 원하는 위치의 url을 입력하여 정보를 로드한다. (naver login url)

   • await driver.get("https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com");

6. 원하는 element가 로드될 때 까지 기다린다.

   • await driver.wait(until.elementLocated(By.css('#id')));
     await driver.wait(until.elementLocated(By.css('#pw')));

7. element에 id, pw를 입력한다. (아래의 둘 중 어느것을 사용해도 된다.)

   • await driver.executeScript(`
             document.querySelector('#id').value = '${nid}';
             document.querySelector('#pw').value = '${npw}';
         `);

   • const inputElem =await driver.findElement(By.css('#id'));
     inputElem.sendKeys("나의 id")

8. 입력이 완료되었으니 로그인 버튼을 찾아 로그인을 한다.

   • await driver.wait(until.elementLocated(By.css('.btn_login')));
     const loginSubmit = await driver.findElement(By.css(`.btn_login`));
     await loginSubmit.click();

9. 위와 같은 방법을 사용하여 다른 페이지에서도 적용했다.