Cypress 성능 플러그인 'cypress-performance': 웹 성능 테스트 자동화 가이드

소개

dev.to에 처음 올리는 글이니 많은 관심 부탁드립니다

웹 UI 성능을 측정하는 데 어려움을 겪고 있고 기존 플러그인이 필요한 유연성을 제공하지 못했을 때 이 플러그인을 만들겠다는 아이디어가 떠올랐습니다. "cypress-performance" 플러그인은 Cypress 테스트에서 웹 성능 지표를 직접 측정하고 주장하는 강력한 방법을 도입합니다. 기능에 초점을 맞춘 기존의 엔드투엔드 테스트와 달리 이 플러그인을 사용하면 팀은 자동화된 테스트를 통해 성능 회귀를 조기에 파악하고 고성능 표준을 유지할 수 있습니다.

오늘날 웹 성능 테스트는 매우 중요해졌습니다. 사용자는 매우 빠른 경험을 기대하며 페이지 로딩 속도가 느리면 비즈니스 지표에 큰 영향을 미칠 수 있습니다. Cypress는 엔드투엔드 테스트를 위한 탁월한 도구이지만 내장된 성능 측정 기능이 부족합니다.

오늘은 Cypress 테스트에 성능 측정 기능을 제공하는 새로운 플러그인인 "cypress-performance"를 소개하게 되어 기쁩니다.

여기서 확인할 수 있습니다:

https://www.npmjs.com/package/cypress-performance https://github.com/Valiantsin2021/cypress-performance

주요 특징

• 테스트 실행 중 실시간 성능 지표 수집

• 신뢰할 수 있는 측정을 위한 재시도 메커니즘 내장

• 핵심 웹 바이탈 및 기타 핵심 성과 지표 지원

• 기존 Cypress 테스트와의 원활한 통합

• TypeScript 지원을 위한 유형 정의

• 구성 가능한 임계값 및 타이밍 옵션

또 다른 성능 테스트 플러그인이 필요한 이유는 무엇입니까?

"@cypress-audit/lighthouse"가 이미 있지 않나요?"라고 궁금해하실 수도 있습니다. 예, 그렇습니다. 이는 훌륭한 도구입니다. 그러나 "cypress-performance"는 다른 접근 방식을 취합니다.

• 실제 사용자 지표: Lighthouse는 특정 조건에서 성능을 시뮬레이션하는 반면 Cypress-performance는 실제 테스트 실행 중에 지표를 캡처하여 실제 사용자 시나리오에 대한 통찰력을 제공합니다.

• 테스트 통합: 플러그인은 기존 테스트와 원활하게 통합되므로 별도의 감사가 아닌 정기적인 테스트 흐름을 실행하면서 성능을 측정할 수 있습니다.

• 세밀한 제어: 신뢰할 수 있는 결과를 위한 내장된 재시도 메커니즘을 통해 성능 측정 시기와 방법을 세밀하게 제어할 수 있습니다.

• 핵심 웹 바이탈: LCP(최대 컨텐츠 포함 페인트), FID(첫 번째 입력 지연), CLS(누적 레이아웃 전환) 등 중요한 최신 성능 측정항목에 중점을 둡니다.

• 오버헤드 감소 - 별도의 Lighthouse 실행이 필요 없음

• 구성 감소 - 기본 사용에 최소한의 설정 필요

• 특정 측정항목 초점 - 핵심 웹 바이탈 및 주요 타이밍

• 테스트 통합 - 기존 테스트 흐름에 자연스럽게 적합합니다. 명령은 연결 가능하며 수집된 모든 측정항목을 어설션할 수 있도록 반환합니다.

• 재시도 기능 - 측정항목 수집을 보장하는 신뢰성 메커니즘이 내장되어 있습니다.

• 리소스 타이밍 - 자세한 리소스 수준 지표

• 총 바이트 - 모든 리소스의 크기

반면 - @cypress-audit/lighthouse는
SEO, 접근성 등 종합 감사

• Lighthouse와 연계한 채점 시스템

• 모범 사례의 정적 분석

• 개선 권고사항

• 다양한 조건에서의 성능 시뮬레이션

• 단순한 성능을 넘어서는 광범위한 측정항목

그렇다면 그것은 무엇이며 어떻게 사용합니까?

외부 종속성이 없는 독립형 Cypress 플러그인입니다.

먼저 플러그인을 설치하세요.

npm install -D cypress-performance

cypress/support/e2e.js에 추가:

'사이프러스 성능' 가져오기

TypeScript 사용자의 경우 tsconfig.json에 유형을 포함하세요.

{
  "compilerOptions": {
    "types": ["cypress", "cypress-performance"]
  }
}

이제 실적 측정을 시작할 준비가 되었습니다!

용법

플러그인은 단일 Cypress 메소드를 노출합니다.

cy.performance()

cy.performance() 명령 자체는 재시도 가능합니다. 즉, Cypress는 다음 중 하나가 발생할 때까지 명령을 재시도합니다.

• 유효한 측정항목 가져오기

• retryTimeout에 도달

명령의 기본 옵션:

MetricsOptions{
  startMark?: keyof PerformanceTiming // Default: 'navigationStart'
  endMark?: keyof PerformanceTiming // Default: 'loadEventEnd'
  timeout?: number // Timeout in milliseconds (default: 10000)
  initialDelay?: number // Initial delay in milliseconds (default: 1000)
  retryTimeout?: number // Retry timeout in milliseconds (default: 5000)
}

일반적인 테스트는 다음과 같습니다.

Cypress 테스트 실행기에서 볼 수 있는 모습은 다음과 같습니다.

모범 사례

현실적인 임계값 설정 성능 임계값을 설정할 때 사용자와 애플리케이션을 고려하십시오. LCP: < 2.5초(양호), < 4s(개선 필요) CLS: < 0.1(좋음), < 0.25(개선 필요) TBT: < 300ms(양호), < 600ms(개선 필요)

사용자 지정 표시 사용 단일 페이지 애플리케이션이나 복잡한 사용자 흐름의 경우 사용자 지정 성능 표시를 사용하여 특정 상호 작용을 측정합니다.

환경 변화 고려 CI 환경은 로컬 개발과 다르게 작동할 수 있다는 점을 기억하세요. 그에 따라 임계값을 조정하거나 상대 비교를 사용하십시오.

다른 측정항목과 결합 완벽한 성능 그림을 위해 Lighthouse와 같은 다른 도구와 함께 Cypress 성능을 사용하세요

발문

내 "cypress-performance" 플러그인은 가장 중요하고 가치 있는 웹 성능 지표를 신속하게 수집하고 Cypress 테스트 제품군에 성능 테스트 기능을 제공합니다. 실제 사용자 지표에 초점을 맞추고 세부적인 제어를 제공함으로써 실제 사용 조건에서 애플리케이션이 제대로 작동하도록 보장합니다.

핵심 웹 바이탈을 모니터링하든, 특정 사용자 상호 작용을 측정하든, 원활한 리소스 로드를 보장하든 상관없이 "cypress-performance"는 성능 저하가 프로덕션에 도달하기 전에 포착하는 데 필요한 도구를 제공합니다.

좋은 성능은 속도뿐만 아니라 일관성과 안정성에도 달려 있습니다. "cypress-performance"를 사용하면 개발 수명 주기 전반에 걸쳐 애플리케이션이 고성능 표준을 유지하도록 보장할 수 있습니다.

귀하의 프로젝트에 시도해 보고 어떤 효과가 있는지 알려주세요! 플러그인은 오픈 소스이므로 모든 기여와 피드백을 환영합니다.

위 내용은 Cypress 성능 플러그인 'cypress-performance': 웹 성능 테스트 자동화 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!