처음부터 차근차근

[Puppeteer] page.waitForXXX 관련 정리 본문

Library/puppeteer

[Puppeteer] page.waitForXXX 관련 정리

HangJu_95 2024. 8. 27. 00:36
728x90

Overview

웹 크롤링 시, page가 로딩되는 것을 기다리거나, 혹은 특정 API의 응답을 기다리거나 할 떄가 필요하다.
이러한 경우, page의 waitForXXX 메서드를 사용해서 특정 시간, 응답까지 기다릴 수 있도록 만들어준다.

이를 통해 웹 크롤링 시 page 로드 관련 대기 시간을 설정하는 것이 아니라, page가 load 되면 바로 진행할 수 있도록 하거나, 특정 API가 load 된다면 바로 작업을 진행할 수 있도록 하여 웹 크롤링 로직 시간을 단축할 수 있다.

page.goto 시 waitUntil 관련

waitUntil은 puppeteerLifeCycleEvent과 연관되어있다.

  • load : 페이지의 모든 리소스(이미지, 스타일시트, 스크립트 등)가 완전히 로드되었을 때 발생하는 이벤트입니다.
  • domcontentloaded : HTML 문서의 구조가 완전히 파싱되고 DOM 트리가 생성되었을 때 발생하는 이벤트입니다. 외부 리소스 로딩은 완료되지 않았을 수 있습니다.
  • networkidle0: 최소 500ms 동안 진행 중인 네트워크 연결이 0개일 때 발생하는 이벤트입니다. 즉, 페이지 로딩이 거의 완료되었음을 나타냅니다.
  • networkidle2: 최소 500ms 동안 진행 중인 네트워크 연결이 2개 이하일 때 발생하는 이벤트입니다. 페이지 로딩이 어느 정도 진행되었지만, 백그라운드 작업 등으로 인해 일부 네트워크 연결이 남아있을 수 있습니다.
export type PuppeteerLifeCycleEvent =
  /**
   * Waits for the 'load' event.
   */
  | 'load'
  /**
   * Waits for the 'DOMContentLoaded' event.
   */
  | 'domcontentloaded'
  /**
   * Waits till there are no more than 0 network connections for at least `500`
   * ms.
   */
  | 'networkidle0'
  /**
   * Waits till there are no more than 2 network connections for at least `500`
   * ms.
   */
  | 'networkidle2';

page.waitForNetworkIdle()

page 로딩 시, network가 Idle까지 기다리도록 하는 메서드이다.

// idleTime이 3초 이상이며, method의 timeout은 6초
await page.waitForNetworkIdle({idleTime: 3 * 1000, timeout: 6 * 1000});

page.waitForResponse()

특정 API에 대한 응답까지 대기하는 메서드.


// 특정 url에 대해서 대기하거나
const firstResponse = await page.waitForResponse(
  'https://example.com/resource'
);

// 혹은 특정 url과 statusCode가 200일 경우에 return을 하거나
const finalResponse = await page.waitForResponse(
  response =>
    response.url() === 'https://example.com' && response.status() === 200
);

// 혹은 특정 요청에 특정 요소가 포함되어 있는 경우 return 하는 형태
const finalResponse = await page.waitForResponse(async response => {
  return (await response.text()).includes('<html>');
});
return finalResponse.ok();

page.waitForSelector()

특정 Selector가 loading 될 때까지 기다린다.

const element = this.page.waitForSelector(SELECTORS, {timeout: 3000);

 

참고

 

Page.goto() method | Puppeteer

Navigates the frame or page to the given url.

pptr.dev

 

'Library > puppeteer' 카테고리의 다른 글

[Puppeteer] Page.on을 통해 response 가지고 오기  (1) 2024.09.05
'Library/puppeteer' Related Articles more