Puppeter 및 Chrome 개발 도구의 성능 스케줄을 사용하여 UX 성능 테스트 자동화
15746 단어 testingperformance
나는 줄곧 테스트 프레임워크를 구축하려고 시도해 왔다. 이 프레임워크는 내 사이트의 일부 사용자들의 상호작용의 지속 시간을 자동으로 측정할 수 있다.나는 이 글이 자신의 사이트에서 같은 일을 고려하는 사람들에게 출발점을 제공할 수 있기를 바란다.
테스트
테스트 중점의 가능성 영역을 우선적으로 고려하다.
수욕 센터에서 노선을 바꾸다
베이스라인 정의
이 글The Psychology of Web Performance과 발췌문Usability Engineering을 읽은 후 웹과 응용 프로그램의 성능을 최적화할 때'3 important limits을 기억해야 한다.
우리는 어떤 공구를 사용할 것입니까?
Puppeteer - 헤드 없는 브라우저 노드입니다.js 도서관.
프로세스
노드와 Puppeter가 이미 설치되어 있다고 가정하면 노드의 시작점을 살펴보겠습니다.js 스크립트는 Addy Osmani의 this blog post에서 가져옵니다.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
const navigationPromise = page.waitForNavigation();
await page.goto('https://pptr.dev/#?product=Puppeteer&version=v2.1.1&show=outline');
await page.setViewport({ width: 1440, height: 714 });
await navigationPromise;
const selector = 'body > sidebar-component > sidebar-item:nth-child(3) > .pptr-sidebar-item';
await page.waitForSelector(selector);
await page.tracing.start({ path: 'trace.json', screenshots: true });
await page.click(selector);
await page.tracing.stop();
await browser.close();
})();
// trace.json
{
"traceEvents": [
{
"args": { "data": { "type": "click" } },
"cat": "devtools.timeline",
"dur": 7761,
"name": "EventDispatch",
"ph": "X",
"pid": 61589,
"tdur": 7706,
"tid": 775,
"ts": 161565081204,
"tts": 119022
},
{
"args": {
"cat": "devtools.timeline,rail",
"dur": 18,
"name": "Paint",
"ph": "X",
"pid": 61589,
"tdur": 18,
"tid": 775,
"ts": 161565160795,
"tts": 196604
}
}
]
}
추적 파일은
traceEvents 그룹을 포함합니다.각 이벤트 객체에는ts = time start;
dur = duration;
ts: The tracing clock timestamp of the event. The timestamps are provided at microsecond granularity.
There is an extra parameter dur to specify the tracing clock duration of complete events in microseconds.
All other parameters are the same as in duration events. The ts parameter indicate the time of the start of the complete event.
Unlike duration events, the timestamps of complete events can be in any order.
An optional parameter tdur specifies the thread clock duration of complete events in microseconds.
const totalDuration = finalCompositeStartTime + finalCompositeDuration - clickStartTime;
추적 이벤트 파일을 Chrome Developer Tools Performance Timeline 도구에 업로드하면 이벤트를 그래픽으로 볼 수 있습니다.
이력 추적의 끝을 확대하여 복합 레이어 이벤트를 찾습니다.
정교하다
사용자를 더욱 진실하게 모의하기 위해 다른 수정도 할 수 있습니다.주의해야 할 것은 성능이 낮은 네트워크와 CPU에서 사용자를 시뮬레이션하는 것이다. Puppeter는 성능 타임라인 추적 기간에 네트워크와 CPU 절약을 설정할 수 있다.
// Connect to Chrome DevTools
const client = await page.target().createCDPSession();
//Set Network Throttling property
await client.send('Network.emulateNetworkConditions', {
offline: false,
downloadThroughput: (200 * 1024) / 8,
uploadThroughput: (200 * 1024) / 8,
latency: 20,
});
// Set CPU Throttling property
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });
이게 다야!이 도구와 브라우저 렌더링 과정의 지식을 이용하여 우리는 기선을 만들고 사용자의 상호작용을 실행하며 결과를 분석하고 시간을 계산할 수 있다.이제 성능 테스트를 CI/CD 파이프라인에 통합할 수 있는 출발점이 생겼습니다.
본 시리즈의 두 번째 부분에서 우리는 본고의 방법을 따르는 예시 항목을 볼 것이다.
Reference
이 문제에 관하여(Puppeter 및 Chrome 개발 도구의 성능 스케줄을 사용하여 UX 성능 테스트 자동화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tostaylo/automate-ux-performance-testing-with-puppeteer-and-the-chrome-dev-tools-performance-timeline-aah텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
