Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test: Add Lighthouse performance tests using Playwright #18

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open

test: Add Lighthouse performance tests using Playwright #18

wants to merge 19 commits into from

Conversation

choiseona
Copy link
Collaborator

@choiseona choiseona commented Jan 21, 2025 •
edited
Loading

📂 작업 내용

closes #9

  • CLI로 성능 지표 띄우기
  • PR 생성 시 comment로 성능 지표 띄우기

💡 자세한 설명

  • Playwright와 Lighthouse를 통합하여 웹 애플리케이션 성능 측정 구현
  • GitHub Actions에서 PR 생성 시 자동 성능 측정 및 결과 코멘트 추가

주요 변경사항

  1. 성능 측정 관련 코드 구조화

    • config.ts: Lighthouse 설정
    • type.ts: 성능 측정 관련 타입 정의
    • util.ts: 브라우저 제어, 결과 처리 등 유틸리티
    • test.ts: 테스트 케이스 및 실행 로직

  2. GitHub Actions workflow 추가

    • lighthouse.yml: PR 생성 시 PR 코멘트에 성능 지표 자동 추가

테스트

  • MainPage, LobbyPage 성능 측정

결과물

  • .lighthouse/ 디렉토리에 HTML 리포트 및 JSON 결과 저장
  • pnpm lighthouse 하면 console에 결과 출력
  • PR 코멘트에 성능 지표 표시 (Categories, Core Web Vitals)

📗 참고 자료 & 구현 결과 (선택)

https://inquisitive-beret-c36.notion.site/Lighthouse-25cfd3c65c8b4b9bb3d7b3ea6c7a554d?pvs=4

  • pnpm lighthouse 하면 console에 결과 출력
    image

  • PR 코멘트에 성능 지표 표시
    image

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

  • PR 제목을 형식에 맞게 작성했나요?
  • 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (main이 아닙니다.)
  • 이슈는 close 했나요?
  • Reviewers, Labels를 등록했나요?
  • 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
  • 테스트는 잘 통과했나요?
  • 불필요한 코드는 제거했나요?

@choiseona
test: Add Lighthouse performance tests using Playwright
3001a95 
- Implement Lighthouse performance tests for MainPage and LobbyPage
- Include Lighthouse audit with performance metrics and scores
- Add sessionStorage manipulation and URL navigation handling
@choiseona
chore: Update Lighthouse CI workflow steps
c2b9906
@choiseona choiseona added 💻 FE Frontend Code ✅ Test Test (storybook, jest...) labels Jan 21, 2025
@choiseona choiseona self-assigned this Jan 21, 2025
@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link 


> [email protected] lighthouse /home/runner/work/refactor-web30-stop-troublepainter/refactor-web30-stop-troublepainter/client
> playwright test --project=lighthouse


Running 1 test using 1 worker



-------- playwright lighthouse audit reports --------


performance record is 91 and desired threshold was 0
-----MainPage-----
Performance Score: 91
┌─────────┬─────────┐
│ (index) │ Values  │
├─────────┼─────────┤
│ FCP     │ '1.5 s' │
│ LCP     │ '3.4 s' │
│ TBT     │ '0 ms'  │
│ CLS     │ '0'     │
│ SI      │ '1.5 s' │
└─────────┴─────────┘
  ✓  1 [lighthouse] › src/tests/lighthouse.test.ts:68:3 › Lighthouse Performance Tests › MainPage Performance Check (10.1s)

  1 passed (13.1s)

@choiseona choiseona marked this pull request as draft January 21, 2025 09:04
@choiseona
chore: Change Playwright test configuration
eac43bc 
- Configure Playwright tests with a 'list' reporter and remote debugging on port 9222.
- Add 'lighthouse' test project with a match for 'lighthouse.test.ts'.
- Web server runs on port 4173 using 'pnpm start', with server reuse in non-CI environments.
@choiseona
test: Change Lighthouse performance tests
797304c 
- Capture performance, accessibility, best-practices, and SEO scores.
- Extract and display key metrics including FCP, LCP, TBT, CLS, and SI.
- Results are saved in a structured JSON format in the .lighthouse directory.
@choiseona
chore: Change Lighthouse CI workflow
a7e1488 
- Results are uploaded as artifacts for review.
@choiseona
chore: Add PR comment about lighthouse score
c4f4b6c
@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

🚦 Lighthouse Audit Results

MainPage

Category Scores

Category Score
performance 🟢 91
accessibility 🟢 100
best-practices 🟢 96
seo 🟢 92

Core Web Vitals & Metrics

Metric Value Score
FCP 1.5 s 🟢 95
LCP 3.4 s 🟡 66
TBT 0 ms 🟢 100
CLS 0 🟢 100
SI 1.5 s 🟢 100
LobbyPage

Category Scores

Category Score
performance 🟡 73
accessibility 🟢 96
best-practices 🟢 96
seo 🟢 92

Core Web Vitals & Metrics

Metric Value Score
FCP 2.0 s 🟡 84
LCP 8.4 s 🔴 2
TBT 100 ms 🟢 98
CLS 0 🟢 100
SI 2.7 s 🟢 96

@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

🚦 Lighthouse Audit Results

MainPage

Category Scores

Category Score
performance 🟢 91
accessibility 🟢 100
best-practices 🟢 96
seo 🟢 92

Core Web Vitals & Metrics

Metric Value Score
FCP 1.5 s 🟢 95
LCP 3.4 s 🟡 67
TBT 0 ms 🟢 100
CLS 0 🟢 100
SI 1.5 s 🟢 100
LobbyPage

Category Scores

Category Score
performance 🟡 73
accessibility 🟢 96
best-practices 🟢 96
seo 🟢 92

Core Web Vitals & Metrics

Metric Value Score
FCP 2.0 s 🟡 84
LCP 8.2 s 🔴 2
TBT 90 ms 🟢 99
CLS 0 🟢 100
SI 2.6 s 🟢 97

@choiseona
refactor: Improve lighthouse test structure and organization
dd97a5e 
- Split files by responsibility
- Separate utilities
- Organize test cases and configurations
@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

🚦 Lighthouse Audit Results

MainPage

Category Scores

Category Score
performance 🟢 92
accessibility 🟢 100
best-practices 🟢 96
seo 🟢 92

Core Web Vitals & Metrics

Metric Value Score
FCP 1.5 s 🟢 95
LCP 3.3 s 🟡 68
TBT 0 ms 🟢 100
CLS 0 🟢 100
SI 1.5 s 🟢 100
LobbyPage

Category Scores

Category Score
performance 🟡 74
accessibility 🟢 96
best-practices 🟢 96
seo 🟢 92

Core Web Vitals & Metrics

Metric Value Score
FCP 2.0 s 🟡 84
LCP 8.0 s 🔴 3
TBT 90 ms 🟢 99
CLS 0 🟢 100
SI 2.4 s 🟢 98

@github-actions GitHub Actions
Copy link

📚 Storybook preview deployed to: Visit Storybook Preview

@github-actions GitHub Actions
Copy link

🚦 Lighthouse Audit Results

MainPage

Category Scores

Category Score
performance 🟢 91
accessibility 🟢 100
best-practices 🟢 96
seo 🟢 92

Core Web Vitals & Metrics

Metric Value Score
FCP 1.5 s 🟢 95
LCP 3.5 s 🟡 65
TBT 0 ms 🟢 100
CLS 0 🟢 100
SI 1.5 s 🟢 100
LobbyPage

Category Scores

Category Score
performance 🟡 73
accessibility 🟢 96
best-practices 🟢 96
seo 🟢 92

Core Web Vitals & Metrics

Metric Value Score
FCP 2.0 s 🟡 84
LCP 8.2 s 🔴 2
TBT 90 ms 🟢 98
CLS 0 🟢 100
SI 2.7 s 🟢 96

@choiseona choiseona marked this pull request as ready for review January 23, 2025 05:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kwaksj329 kwaksj329 Awaiting requested review from kwaksj329

@rhino-ty rhino-ty Awaiting requested review from rhino-ty

@ssum1ra ssum1ra Awaiting requested review from ssum1ra

At least 2 approving reviews are required to merge this pull request.

Assignees

@choiseona choiseona

Labels
💻 FE Frontend Code ✅ Test Test (storybook, jest...)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Lighthouse 자동화
1 participant
@choiseona