Seungdols Company

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

프로그래밍/JavaScript

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

글쓰는 프로그래머 seungdols 2020. 9. 14. 23:00

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)


공유하기 링크
0 Comments
댓글쓰기 폼