[wip] puppeteer

[gloriaJun]

Background

lighthouseCI를 이용하여 웹 퍼포먼스에 대한 성능을 조사에 대한 필요
각 화면에 대한 접근은 아래와 같이 나뉘는데, 이 부분 체크를 위해 api 응답에 대한 조작이 필요함

• 신규 가입자
• 가입된 고객에 대한 로그인 후의 화면 접근

고민

• 기존에 사용하던 cypress를 puppeteer로 대체가 가능할 것인지?
  • 가능할 것으로 예상되나, 테스트를 위해 사용하고 있던 부분들에 대해 모두 대체가 될 것인가?
  • 테스트 수행에 대한 성능은?
• puppeteer로 테스트를 수행 및 수행한 각 화면들에 대한 lighthouseCI의 성능 지표를 뽑을 수 있는가?

[gloriaJun]

참고 자료

• Puppeteer 를 이용해 간단한 React App 을 테스트 해봤다
• 시각적 회귀 테스트로 서비스 안정성 끌어올리기
• Lighthouse with puppeteer
• Automated Lighthouse Reporting using Puppeteer

[gloriaJun]

• puppeteer : chromium을 포함한 풀 패키지
• puppeteer-core : library 형태의 패키지로 chromium을 포함하고 있지 않다.

[gloriaJun]

참고 코드

• https://github.com/anontyro/site-metrics/blob/3b5d8b96cd948dd55c5d3db32258e226147d93fa/src/utils/lighthouseUtil.ts
• https://github.com/justinribeiro/lighthouse-jest-example/tree/master/tests
• typescript
  • https://github.com/adwd/lighthouses/blob/0c1a53d3f7e16b17e904f9a7b5bd09974fd33170/functions/src/index.ts

참고

• https://fe-developers.kakaoent.com/2022/220602-lighthouse-with-github-actions/
  • git pr로 테스트 결과 남겨주는 부분

[gloriaJun]

lighthouse-ci with puppetter

• https://dzone.com/articles/lighthouse-ci-with-puppeteer
• https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md

lighthouse.js

puppeteerScript.js

Iframe

• https://chercher.tech/puppeteer/iframes-puppeteer