Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(tracing): retain script resources, but no body (#8758)

Browse source
This commit is contained in:
Dmitry Gozman 2021-09-07 15:23:13 -07:00 committed by GitHub
parent b30772c67e
commit bcbb792cf3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/server/supplements/har/harTracer.ts
View file

@ -133,9 +133,6 @@ export class HarTracer {
}
private _onRequest(request: network.Request) {
if (this._options.skipScripts && request.resourceType() === 'script')
return;
const page = request.frame()._page;
const url = network.parsedURL(request.url());
if (!url)
@ -228,6 +225,11 @@ export class HarTracer {
this._addBarrier(page, compressionCalculationBarrier.barrier);
const promise = response.body().then(buffer => {
if (this._options.skipScripts && request.resourceType() === 'script') {
compressionCalculationBarrier.setDecodedBodySize(0);
return;
}
const content = harEntry.response.content;
content.size = buffer.length;
compressionCalculationBarrier.setDecodedBodySize(buffer.length);

7
src/web/traceViewer/ui/networkResourceDetails.tsx
View file

@ -101,6 +101,11 @@ export const NetworkResourceDetails: React.FunctionComponent<{
const requestContentType = requestContentTypeHeader ? requestContentTypeHeader.value : '';
const resourceName = resource.request.url.substring(resource.request.url.lastIndexOf('/') + 1);
let contentType = resource.response.content.mimeType;
const charset = contentType.match(/^(.*);\s*charset=.*$/);
if (charset)
contentType = charset[1];
return <div
className={'network-request ' + (selected ? 'selected' : '')} onClick={() => setSelected(index)}>
<Expandable expanded={expanded} setExpanded={setExpanded} style={{ width: '100%' }} title={
@ -108,7 +113,7 @@ export const NetworkResourceDetails: React.FunctionComponent<{
<div className={'network-request-title-status ' + formatStatus(resource.response.status)}>{resource.response.status}</div>
<div className='network-request-title-method'>{resource.request.method}</div>
<div className='network-request-title-url'>{resourceName}</div>
<div className='network-request-title-content-type'>{resource.response.content.mimeType}</div>
<div className='network-request-title-content-type'>{contentType}</div>
</div>
} body={
<div className='network-request-details'>

23
tests/trace-viewer/trace-viewer.spec.ts
View file

@ -26,6 +26,7 @@ class TraceViewerPage {
consoleLineMessages: Locator;
consoleStacks: Locator;
stackFrames: Locator;
networkRequests: Locator;
constructor(public page: Page) {
this.actionTitles = page.locator('.action-title');
@ -34,6 +35,7 @@ class TraceViewerPage {
this.consoleLineMessages = page.locator('.console-line-message');
this.consoleStacks = page.locator('.console-stack');
this.stackFrames = page.locator('.stack-trace-frame');
this.networkRequests = page.locator('.network-request-title');
}
async actionIconsText(action: string) {
@ -62,6 +64,10 @@ class TraceViewerPage {
await this.page.click('text="Source"');
}
async showNetworkTab() {
await this.page.click('text="Network"');
}
async eventBars() {
await this.page.waitForSelector('.timeline-bar.event:visible');
const list = await this.page.$$eval('.timeline-bar.event:visible', ee => ee.map(e => e.className));
@ -98,7 +104,7 @@ const test = playwrightTest.extend<{ showTraceViewer: (trace: string) => Promise
let traceFile: string;
test.beforeAll(async function recordTrace({ browser, browserName, browserType }, workerInfo) {
test.beforeAll(async function recordTrace({ browser, browserName, browserType, server }, workerInfo) {
const context = await browser.newContext();
await context.tracing.start({ name: 'test', screenshots: true, snapshots: true });
const page = await context.newPage();
@ -125,7 +131,7 @@ test.beforeAll(async function recordTrace({ browser, browserName, browserType },
await Promise.all([
page.waitForNavigation(),
page.waitForTimeout(200).then(() => page.goto('data:text/html,<html>Hello world 2</html>'))
page.waitForTimeout(200).then(() => page.goto(server.PREFIX + '/frames/frame.html'))
]);
await page.setViewportSize({ width: 500, height: 600 });
@ -153,7 +159,7 @@ test('should open simple trace viewer', async ({ showTraceViewer }) => {
/page.evaluate— \d+ms/,
/page.click"Click"— \d+ms/,
/page.waitForNavigation— \d+ms/,
/page.gotodata:text\/html,<html>Hello world 2<\/html>— \d+ms/,
/page.gotohttp:\/\/localhost:\d+\/frames\/frame.html— \d+ms/,
/page.setViewportSize— \d+ms/,
/page.hoverbody— \d+ms/,
]);
@ -233,3 +239,14 @@ test('should have correct stack trace', async ({ showTraceViewer }) => {
'BrowserType.browserType._onWillCloseContext trace-viewer.spec.ts :XXX',
]);
});
test('should have network requests', async ({ showTraceViewer }) => {
const traceViewer = await showTraceViewer(traceFile);
await traceViewer.selectAction('http://localhost');
await traceViewer.showNetworkTab();
await expect(traceViewer.networkRequests).toHaveText([
'200GETframe.htmltext/html',
'200GETstyle.csstext/css',
'200GETscript.jsapplication/javascript',
]);
});

8
tests/tracing.spec.ts
View file

@ -43,9 +43,13 @@ test('should collect trace with resources, but no js', async ({ context, page, s
expect(events.find(e => e.metadata?.apiName === 'page.close')).toBeTruthy();
expect(events.some(e => e.type === 'frame-snapshot')).toBeTruthy();
expect(events.some(e => e.type === 'resource-snapshot' && e.snapshot.request.url.endsWith('style.css'))).toBeTruthy();
expect(events.some(e => e.type === 'resource-snapshot' && e.snapshot.request.url.endsWith('script.js'))).toBeFalsy();
expect(events.some(e => e.type === 'screencast-frame')).toBeTruthy();
const style = events.find(e => e.type === 'resource-snapshot' && e.snapshot.request.url.endsWith('style.css'));
expect(style).toBeTruthy();
expect(style.snapshot.response.content._sha1).toBeTruthy();
const script = events.find(e => e.type === 'resource-snapshot' && e.snapshot.request.url.endsWith('script.js'));
expect(script).toBeTruthy();
expect(script.snapshot.response.content._sha1).toBe(undefined);
});
test('should not collect snapshots by default', async ({ context, page, server }, testInfo) => {