Puppeteer를 사용한 스크린샷 캡처

Puppeteer 직접 사용하기

팁

Apify 플랫폼에서 이 예제를 실행하려면 Dockerfile에서 apify/actor-node-puppeteer-chrome 이미지를 선택하세요.

이 예제는 Puppeteer를 사용하여 웹 페이지의 스크린샷을 캡처합니다. Playwright를 사용해도 거의 동일한 방식으로 구현할 수 있습니다.

페이지 스크린샷
Crawler Utils 스크린샷

page.screenshot() 사용:

import { KeyValueStore, launchPuppeteer } from 'crawlee';

const keyValueStore = await KeyValueStore.open();

const url = 'https://crawlee.dev';
// 브라우저 시작
const browser = await launchPuppeteer();

// 브라우저에서 새 탭 열기
const page = await browser.newPage();

// URL로 이동
await page.goto(url);

// 스크린샷 캡처
const screenshot = await page.screenshot();

// 기본 key-value 저장소에 스크린샷 저장
await keyValueStore.setValue('my-key', screenshot, { contentType: 'image/png' });

// Puppeteer 닫기
await browser.close();

utils.puppeteer.saveSnapshot() 사용:

Run on

import { launchPuppeteer, utils } from 'crawlee';

const url = 'http://www.example.com/';
// 브라우저 시작
const browser = await launchPuppeteer();

// 브라우저에서 새 탭 열기
const page = await browser.newPage();

// URL로 이동
await page.goto(url);

// 스크린샷 캡처
await utils.puppeteer.saveSnapshot(page, { key: 'my-key', saveHtml: false });

// Puppeteer 닫기
await browser.close();

`PuppeteerCrawler` 사용하기

이 예제는 PuppeteerCrawler를 사용하여 여러 웹 페이지의 스크린샷을 캡처하는 방법을 보여줍니다:

페이지 스크린샷
Crawler Utils 스크린샷

page.screenshot() 사용:

Run on

import { PuppeteerCrawler, KeyValueStore } from 'crawlee';

// PuppeteerCrawler 인스턴스 생성
const crawler = new PuppeteerCrawler({
    async requestHandler({ request, page }) {
        // Puppeteer로 스크린샷 캡처
        const screenshot = await page.screenshot();
        // URL을 유효한 키로 변환
        const key = request.url.replace(/[:/]/g, '_');
        // 스크린샷을 기본 key-value 저장소에 저장
        await KeyValueStore.setValue(key, screenshot, { contentType: 'image/png' });
    },
});

await crawler.addRequests([
    { url: 'http://www.example.com/page-1' },
    { url: 'http://www.example.com/page-2' },
    { url: 'http://www.example.com/page-3' },
]);

// 크롤러 실행
await crawler.run();

컨텍스트 인식 saveSnapshot() 유틸리티 사용:

Run on

import { PuppeteerCrawler } from 'crawlee';

// PuppeteerCrawler 인스턴스 생성
const crawler = new PuppeteerCrawler({
    async requestHandler({ request, saveSnapshot }) {
        // URL을 유효한 키로 변환
        const key = request.url.replace(/[:/]/g, '_');
        // 스크린샷 캡처
        await saveSnapshot({ key, saveHtml: false });
    },
});

await crawler.addRequests([
    { url: 'http://www.example.com/page-1' },
    { url: 'http://www.example.com/page-2' },
    { url: 'http://www.example.com/page-3' },
]);

// 크롤러 실행
await crawler.run();

Puppeteer로 전체 페이지 스크린샷을 찍으려면 screenshot() 메서드에 fullPage: true 파라미터를 전달해야 합니다: page.screenshot({fullPage: true})

page.screenshot()을 사용하는 두 예제 모두에서 웹 페이지의 URL을 기반으로 key 변수가 생성됩니다. 이 변수는 각 스크린샷을 key-value 저장소에 저장할 때 키로 사용됩니다.

Puppeteer 직접 사용하기​

PuppeteerCrawler 사용하기​

Puppeteer 직접 사용하기

`PuppeteerCrawler` 사용하기