Puppeteer는 Node.js를 위한 노드 라이브러리이며, headless Chrome 또는 Chromium을 제어하기 위한 고급 API를 제공한다. 이를 통해 웹 브라우저를 자동화하고, 스크린샷을 찍거나 페이지 내용을 수집하며, 사용자 인터랙션을 시뮬레이션할 수 있다.

Puppeteer

주요 기능

1. 웹 브라우저 제어

• Puppeteer는 Chrome 또는 Chromium을 headless 모드(화면 표시 없이 백그라운드에서 실행)로 실행하여 브라우저를 제어한다.

2. 페이지 조작

• 페이지를 열고, 닫고, 새로고침하며, 페이지의 내용을 변경하거나 검사할 수 있다.

3. 스크린샷

• 웹 페이지의 화면을 이미지로 캡처할 수 있다. 이는 웹 사이트의 스크린샷 생성, UI 테스트의 일환으로 유용하게 사용될 수 있다.

4. 폼 자동 제출

• 웹 페이지에서 폼을 작성하고 제출하는 자동화 작업을 수행할 수 있다.

5. 사용자 인터랙션 시뮬레이션

• 마우스 클릭, 키보드 입력 등을 통해 사용자의 동작을 시뮬레이션 할 수 있다. 이는 UI 테스트나 웹 페이지의 인터랙션 검사 등에 유용하다.

6. 네트워크 요청 모니터링

• 페이지에서 발생하는 네트워크 요청을 감시하고 분석할 수 있다. 이는 웹페이지 성능 분석이나 네트워크 트래픽 분석에 활용될 수 있다.

사용 사례

1. 웹 스크래핑

• 웹 페이지에서 데이터를 수집하거나, 자동으로 특정 작업을 수행하기 위해 사용된다.

2. UI 테스트 자동화

• 웹 애플리케이션의 UI를 테스트하고 검증하기 위해 사용된다.

3. SEO 최적화

• 브라우저에서 렌더링되는 웹 페이지의 내용을 분석하여 SEO(검색 엔진 최적화)에 도움을 줄 수 있다.

4. 스크린샷 생성

• 웹 페이지의 디자인을 검토하거나, 사용자에게 시각적으로 보여주기 위해 사용될 수 있다.

비슷한 웹 브라우저 자동화 도구

Selenium

장점

1. 다중 브라우저 지원

• Selenium은 Chrome, Firefox, Safari, Edge 등 다양한 브라우저를 지원한다. 여러 브라우저에서 테스트를 해야 하는 경우 유리하다.

2. 다양한 언어 지원

• Selenium은 Java, C#, Python, Ruby, Javascript 등 다양한 프로그래밍 언어를 지원한다. 여러 언어로 작업을 해야 하는 경우 유리하다.

3. 넓은 생태계와 커뮤니티

• 오래된 프로젝트로, 많은 튜토리얼, 플러그인, 라이브러리 및 커뮤니티 지원이 있다.

단점

1. 복잡한 설정

• 다양한 브라우저와 언어를 지원하기 때문에 설정이 복잡할 수 있다.

2. 느린 실행 속도

• 헤드리스 모드를 사용하지 않는 경우 Puppeteer보다 리소스를 더 많이 사용하고 실행 속도가 느리다.

3. 브라우저 업데이트 지연

• 브라우저 업테이트와 새로운 기능 지원이 Puppeteer에 비해 느릴 수 있다.

NestJS에서 Puppeteer 사용하는 방법

1. NestJS 프로젝트 생성

먼저 NestJS 프로젝트를 생성한다.

npx @nestjs/cli new nest-puppeteer

2. Puppeteer 설치

Puppeteer 라이브러리를 설치한다.

npm install puppeteer

3. Puppeteer 모듈 생성

Puppeteer와의 상호작용을 위한 서비스를 생성한다.

nest generate service puppeteer

4. Puppeteer 서비스 구현

puppeteer.service.ts 파일을 열고 Puppeteer 관련 코드를 작성한다.

import { Injectable } from '@nestjs/common';
import * as puppeteer from 'puppeteer';

@Injectable()
export class PuppeteerService {
  async getScreenshot(url: string): Promise<Buffer> {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(url);
    const screenshot = await page.screenshot();
    await browser.close();
    return screenshot;
  }
}

5. 컨트롤러 생성

Puppeteer 서비스를 사용할 컨트롤러를 생성한다.

nest generate controller puppeteer

6. Puppeteer 컨트롤러 구현

puppeteer.controller.ts 파일을 열고 컨트롤러를 작성합니다.

import { Controller, Get, Query, Res } from '@nestjs/common';
import { PuppeteerService } from './puppeteer.service';
import { Response } from 'express';

@Controller('puppeteer')
export class PuppeteerController {
  constructor(private readonly puppeteerService: PuppeteerService) {}

  @Get('screenshot')
  async getScreenshot(@Query('url') url: string, @Res() res: Response) {
    const screenshot = await this.puppeteerService.getScreenshot(url);
    res.setHeader('Content-Type', 'image/png');
    res.send(screenshot);
  }
}

7. 모듈 업데이트

app.module.ts 파일을 열고 Puppeteer 모듈을 가져온다.

import { Module } from '@nestjs/common';
import { PuppeteerService } from './puppeteer/puppeteer.service';
import { PuppeteerController } from './puppeteer/puppeteer.controller';

@Module({
  imports: [],
  controllers: [PuppeteerController],
  providers: [PuppeteerService],
})
export class AppModule {}

8. 애플리케이션 실행

NestJS 애플리케이션을 실행한다.

npm run start

9. 테스트

브라우저에서 http://localhost:3000/puppeteer/screenshot?url=https://example.com을 방문하여 스크린샷을 확인한다.

이 예제는 NestJS와 Puppeteer를 통합하여 웹 페이지의 스크린샷을 찍는 간단한 방법을 보여준다. 이 구조를 기반으로 더 복잡한 브라우저 자동화 작업을 수행할 수 있다.