[node.js] selenium으로 크롤링하기

이번에 이미지를 크롤링 해오는걸 만들려고 했는데 해당 사이트에서 간단히는 크롤링이 되지 않게 

hidden해논걸 다시 푸는 식으로 해놔서 그냥 크롤링하게 되면 hidden된 상태에서의 코드를 긁어오기 때문에 실패한다.

난 가상 브라우저를 사용하기로 했다. 가상 브라우저를 통해 js가 실행될 걸 기다렸다가 그 뒤에 코드를 긁어오게 할 수 있다.

 

 

아래 명령어로 셀리니움을 설치한다.

npm install selenium-webdriver

 

아래 링크에 들어가면 위쪽에 여러 브라우저의 드라이버를 설치할 수 있는 링크가 있다.

https://www.npmjs.com/package/selenium-webdriver

selenium-webdriver

 

나는 Chrome으로 했다.

 

이렇게 여러 버전들이 있는데 현재 사용중인 크롬이랑 같은 버전을 다운해준다.

 

그리고 자기 os랑 맞는 버전 다운해주고 압축 풀면 exe파일 있는데 그냥 원하는 곳에 두고 path설정해준다.

 

const {Builder,By,Key,until} = require('selenium-webdriver');  //모듈 불러오기
const chrome = require('selenium-webdriver/chrome');           //크롬 사용시 

다른 브라우저면 chrome말고 다른 브라우저 써주면 된다.

/firefox 라던가

 

wiat() 함수가 보이는가? 저게 바로 기다려주는것이다.

이미지의 hidden이 풀릴 걸 기다렸다가 코드를 긁어오는 것이다.

난 적당히 1초의 시간만 기다리게 했다.

const url = 'https://뭔지모를사이트.com';

(async function myFunction() {
	let driver = await new Builder().forBrowser('chrome').build();  //가상 브라우저 빌드
		try { 
            await driver.get(url);    //get(url) 인거 보면 뭔지 알것같이 생겼다
            let img = await driver.wait(until.elementLocated(By.css('#imgs > img')), 1000); //기다리기
            imgs = await img.getAttribute('src'); //imgs에 바로 위 코드에서 가져온 element의 src속성값을 가져온다

		}
        finally {
			await driver.quit(); //가상 브라우저를 종료시킨다
        }
})();

 

 

By를 통해 element를 찾을 수 있다.

By.id()라던가 By.tagName()이라던가 있다. By.css는 그냥 css selector랑 같아서 편하다~

By를 통해 element를 찾고 찾은 element에서 위 코드처럼 src라는 속성의 값을 빼온다던가 id값을 빼온다던가 할 수 있다.

 

나도 이미지 크롤링만 하려고 자세히는 모르지만 

가상브라우저 가지고 마우스 조종해서 버튼 누르게 하거나 그런것들도 다 할 수 있어 보인다

 

 

문법 페이지

https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/