Node 기반 Puppeteer로 웹 자동화하기 (Automating the Web with Node-Based Puppeteer)

Node 기반 Puppeteer로 웹 자동화하기 (Automating the Web with Node-Based Puppeteer)

 

Puppeteer는 웹 브라우저를 자동화하기 위한 Node.js 기반의 라이브러리로 Puppeteer를 사용하면 Chrome 또는 Chromium 기반의 웹 브라우저를 제어하고, 웹 페이지 상호작용, 스크린샷 및 PDF 생성, 웹 사이트 크롤링 등 다양한 작업을 자동화할 수 있다. Puppeteer과 비교되는 라이브러리로는 Selenium이 있는데 Selenium은 WebDriver API를 사용하여 웹 브라우저와 상호작용하지만, Puppeteer는 Chrome DevTools Protocol을 사용하여 웹 브라우저와 상호작용한다. 이 프로토콜을 통해 브라우저 내부 동작에 대한 세부적인 제어가 가능하지만 Chrome과 Chromium 브라우저만을 지원한다. 어떤 도구를 선택할지는 사용 목적과 개발환경에 따라 개발자가 선택한다. Puppeteer는 JavaScript를 기반으로 하는 빠른 웹 자동화를 위한 도구로 사용되고, Selenium은 다양한 프로그래밍 언어와 브라우저를 지원하여 크로스 브라우저 테스트와 다양한 플랫폼에서의 자동화에 적합하다.
Puppeteer is a Node.js-based library for automating web browsers, which allows you to control Chrome or Chrome-based web browsers, automate various tasks such as web page interaction, screenshots and PDF generation, and website crawling. A comparable library to Puppeteer is Selenium, which uses the WebDriver API to interact with web browsers, but Puppeteer uses the Chrome DevTools Protocol to interact with web browsers. This protocol allows detailed control of the browser's internal behavior, but only supports Chrome and Chrome browsers. Which tool to choose is chosen by the developer according to the purpose of use and the development environment. Puppeteer is used as a tool for fast web automation based on JavaScript, and Selenium supports various programming languages and browsers, making it suitable for cross-browser testing and automation on various platforms.

 

 

• Node.js 설치 (Node.js installation)

Puppeteer는 Node.js 기반의 라이브러리로 우선적으로 Node.js 설치가 선행되어야 한다. 
Puppeteer is a Node.js-based library, and node.js installation should be preceded first.

[Windows] Node.js 및 NPM 설치

 

 

 

• 작업 폴더 생성 (Creating a working folder)

VS Code (Visual Studio Code)로 puppeteer 폴더를 생성 후 작업을 진행한다. 다른 에디터를 사용해도 무방하다.
Create a Puppeteer folder with VS Code (Visual Studio Code) and proceed with the work. You can use a different editor.

 

 

• npm init

Node 프로젝트 생성하기 위해 명령어를 입력한다. 프로젝트 정보를 기입하라고 메세지가 나오는데 입력을 해도 되고 엔터 키를 눌러 생략해도 된다. package.json 파일이 생성된 것을 확인할 수 있다.
Node Enter the command to create the project. A message appears asking you to fill in the project information, but you can enter it or press the Enter key to omit it. You can see that the package.json file has been created.

> npm init

package name: (puppeteer)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\development\node\Puppeteer\package.json:

{
  "name": "puppeteer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

 

 

• Puppeteer 라이브러리 설치 (Install Puppeteer Library)

> npm install puppeteer

 

 

• puppeteer_test.js 파일 생성 (Creating the Puppeteer_test.js file)

 

 

• puppeteer_test.js

아래 코드는 puppeteer로 브라우저를 실행하여 구글 사이트로 이동, 10초 대기 후 종료하는 코드이다. headless 구문을 작성하지 않으면 브라우저가 백그라운드로 구동이 되어 확인하기 어려우므로 false 속성값을 적용하였다.
The code below is the code that runs the browser with Puppeteer, goes to the Google site, waits 10 seconds, and then exits. If the headerless syntax is not written, it is difficult to check because the browser is running in the background, so the false attribute value was applied.

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  });
  const page = await browser.newPage();
  await page.goto("https://www.google.com/");

  await new Promise((page) => setTimeout(page, 10000));
  await browser.close();
})();

 

 

• puppeteer_test.js 실행 (Run puppeteer_test.js)

> node .\puppeteer_test.js

 

 

• 구글 자동 검색 (Google Auto Search)

아래 코드는 구글에서 'Node Puppeteer' 을 입력하고 검색 버튼을 클릭하는 코드이다.
The code below is to enter 'Node Puppeteer' on Google and click the search button.

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
  });
  const page = await browser.newPage();
  await page.goto("https://www.google.com/");


  const text = await page.$("#APjFqb");
  if (text) await text.type("Node Puppeteer");
  const [search] = await page.$x("/html/body/div[1]/div[3]/form/div[1]/div[1]/div[4]/center/input[1]");
  if (search) await search.click();


  await new Promise((page) => setTimeout(page, 10000));
  await browser.close();
})();

 

 

• 변수 선언 및 요소 찾기 (Declare variables and find elements) 

page.$("# ...")는 아이디로 하여 단일 요소를 선택할때는 일반 변수 방식으로 선언하면 되지만, page.$x("xPath")(xPath의 상위 첫번째 하나의 요소 선택) 또는 page.$$("selector")(Selector에 해당하는 모든요소 선택)처럼 여러요소를 선택할 수 있는 경우에는 변수를 선언할 때 대괄호[] 로 감싸야 오류가 나지 않는다. 
Page.$("# ...") can be declared as a regular variable when selecting a single element with an ID, but it should not be enclosed in brackets when declaring a variable, such as page.$x("xPath") (select the top first element of xPath) or page.$$("selector") (selector all the elements corresponding to the selector).

<!-- 일반 변수 선언 -->
const text = await page.$("#APjFqb");
if (text) await text.type("Node Puppeteer");

<!-- 대괄호로 감싼 변수 선언 -->
const [search] = await page.$x("/html/body/div[1]/div[3]/form/div[1]/div[1]/div[4]/center/input[1]");
if (search) await search.click();

 

 

 

• waitForSelector, waitForXPath, waitForNavigation

위 메소드들은 page 객체의 메소드로 사용되며, await 키워드와 함께 사용하여 해당 조건이 충족될 때까지 대기할 수 있다. 예를 들어, waitForSelector 메소드는 지정된 CSS 선택자에 해당하는 요소가 DOM에 나타날 때까지 대기하며, 이후 코드 실행은 해당 요소가 나타났을때 실행하게 된다. 이 메소드들로 페이지의 로딩이 완료되거나 원하는 요소가 나타날 때까지 기다릴 수 있으므로 유용하게 사용된다.
The above methods are used as methods for page objects and can be used in conjunction with the wait keyword to wait until the corresponding conditions are met. For example, the waitForSelector method waits for the element corresponding to the specified CSS selector to appear in the DOM, and subsequent code execution is executed when the element appears. These methods are useful because they can wait for the page to complete loading or for the desired element to appear.

메소드	예시	설명
waitForSelector	await page.waitForSelector('#myElement');	주어진 CSS 선택자(selector)에 해당하는 요소가 나타날 때까지 대기
waitForXPath	await page.waitForXPath('//div[@class="myClass"]');	주어진 XPath에 해당하는 요소가 나타날 때까지 대기
waitForNavigation	await page.waitForNavigation();	페이지의 네비게이션이 완료될 때까지 대기

 

 

• Pupeeteer API

https://github.com/puppeteer/puppeteer/blob/v2.1.1/docs/api