Google I/O '19 - Puppeteer 영상 정리

Modern Web Testing and Automation with Puppeteer (Google I/O '19)

puppeteer 성능 높이기

cosnt browser = await puppeteer.launch()

it ('', async() => {
  const context = await browser.createIncognitoBrowserContext();
  // ...
  await context.close()
}) 

브라우저의 새로운 시크릿 컨텍스트를 생성해서 테스팅 하는 것이 더 빠르다.

렌더링이 되기 전에 테스트를 돌리다 보면, 테스트가 실패하는 이슈가 발생하는데, 기본적인 해결책은 sleep을 넣어준다.

await page.waitFor(1000)

그런데, 이 방식은 좋지 않다.

page.waitForSelector()
page.waitForReqeust()
page.waitForResponse()
page.waitForFunction()
page.waitForNavigation()

page.waitForXX API를 사용하자.

위의 예시에서 page.waitForSelector()를 사용하면, DOM 요소가 나타날 때까지 기다리게 된다.

Geolocation 설정

page.setGeolocation({});

서비스 워커 체크도 가능하다.

await context.waitForTarget(target => {
    return target.type() === 'service_worker';
});

네트워크 모니터링

page.on('request', reqeust => {
  console.log(request.method());
})
page.on('response', response => {
  console.log(response.method());
})

그 밖에 다양한 API를 제공 한다.

• Headers
• POST data
• Content
• From cache, From service-worker

네트워크 요청 가로채기

await page.setRequestInterception(true)
page.on('request', reqeust => {
  if (request.resourceType() === 'image') {
        request.respond({ body: randomCatImage() });
  } 
  else {
    request.continue()
  }
})

키보드/마우스

await page.keyboard.press()

성능 테스트

const metrics = await page.metrics()

await page.tracing.start({ path: './trace.json'})
// something doing 
await page.tracing.stop();

코드 커버리지

• page.coverage.startCSSCoverage()
• page.coverage.stopCSSCoverage()
• page.coverage.startJSCoverage()
• page.coverage.stopJSCoverage()

Accessibility

const snapshot = await page accessiblity.snapshot()

그 밖의 툴 (use puppeteer)

• https://github.com/ai/size-limit
• https://github.com/pocketjoso/penthouse