[nodeJS] Puppeteer로 간단한 검색 웹 매크로 만들기

Chrome 브라우저를 제어할 수 있게 해주는 Node.js 라이브러리인 Puppeteer로 사용자 인터랙션을 모방하거나 웹사이트 스크래핑 등 다양한 작업을 자동화할 수 있습니다.

이번에는 네이버에 검색어를 입력하여 스크린샷으로 저장하는 매크로를 만들어 보겠습니다.

 

1. Puppeteer 설치하기

npm install puppeteer

 

2. 크롬 브라우저에서 네이버 접속하기

* puppeteer.launch() : 새 브라우저 인스턴스를 생성

* puppeteer.newPage() : 함수로 새 탭 열기

* page.goto() : 특정한 링크로 이동

const puppeteer = require('puppeteer');

async function run() {
    const browser = await puppeteer.launch({ headless: 'false' });
    const page = await browser.newPage();

    await page.goto('https://www.naver.com');
}

run()

 

3. 네이버 검색창의 input 요소 찾아서 검색어 입력하기

const puppeteer = require('puppeteer');

async function run() {
    const browser = await puppeteer.launch({ headless: 'false' });
    const page = await browser.newPage();

    await page.goto('https://www.naver.com');
    // 요소가 페이지에 나타날 때까지 대기
    await page.waitForSelector('input[name=query]');
    // 요소에 값 대입하기
    await page.type('input[name=query]', 'puppeteer');
}

run()

 

4. 검색 버튼의 요소 찾아서 클릭하기

const puppeteer = require('puppeteer');

async function run() {
    const browser = await puppeteer.launch({ headless: 'false' });
    const page = await browser.newPage();

    await page.goto('https://www.naver.com');
    // 요소가 페이지에 나타날 때까지 대기
    await page.waitForSelector('input[name=query]');
    // 요소에 값 대입하기
    await page.type('input[name=query]', 'puppeteer');
    
    // 요소가 페이지에 나타날 때까지 대기
    await page.waitForSelector('.btn_search');
    await Promise.all([
        // 새로운 페이지로의 네비게이션이 완료될 때까지 대기
        page.waitForNavigation(),
        // 해당 요소 클릭하기
        page.click('.btn_search'),
    ]);
}

run()

 

5. 스크린샷 찍고 브라우저 닫기

const puppeteer = require('puppeteer');

async function run() {
    const browser = await puppeteer.launch({ headless: 'false' });
    const page = await browser.newPage();

    await page.goto('https://www.naver.com');
    // 요소가 페이지에 나타날 때까지 대기
    await page.waitForSelector('input[name=query]');
    // 요소에 값 대입하기
    await page.type('input[name=query]', 'puppeteer');
    
    // 요소가 페이지에 나타날 때까지 대기
    await page.waitForSelector('.btn_search');
    await Promise.all([
        // 결과 페이지 로딩 기다리기
        page.waitForNavigation(),
        // 해당 요소 클릭하기
        page.click('.btn_search'),
    ]);
    
    // 해당 경로에 스크린 샷 저장
    await page.screenshot({ path: 'screenshot.png' });
    // 브라우저 종료
    browser.close();
}

run()

 

 

6. 주의사항

Puppeteer는 기본적으로 비동기 방식으로 동작하기 때문에, 각 단계가 완료될 때까지 기다려야 합니다. 따라서 async/await 문법과 Promise 체인을 잘 활용하는 것이 중요합니다.

또한, 웹페이지 로딩 시간은 네트워크 상태나 서버 상태 등 여러 요인에 따라 변할 수 있으므로 충분히 고려해야 합니다. 

이를 위해 page.waitForNavigation() 함수나 page.waitForSelector() 함수 등을 사용하여 필요한 요소가 모두 로드될 때까지 기다릴 수 있습니다.