root
/
playwright
mirror of https://github.com/microsoft/playwright.git
1
0
Fork 0
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(trace-viewer): include waitFor* in trace viewer (#7413)

This commit is contained in:
Pavel Feldman 2021-06-30 17:56:48 -07:00 committed by GitHub
parent 63e6e530ca
commit f43b4efbc9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 200 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/client/android.ts
View File

@ -26,7 +26,6 @@ import { Page } from './page';
import { TimeoutSettings } from '../utils/timeoutSettings';
import { Waiter } from './waiter';
import { EventEmitter } from 'events';
import { ParsedStackTrace } from '../utils/stackTrace';
type Direction = 'down' | 'up' | 'left' | 'right';
type SpeedOptions = { speed?: number };
@ -236,10 +235,10 @@ export class AndroidDevice extends ChannelOwner<channels.AndroidDeviceChannel, c
}
async waitForEvent(event: string, optionsOrPredicate: types.WaitForEventOptions = {}): Promise<any> {
return this._wrapApiCall(async (channel: channels.AndroidDeviceChannel, stackTrace: ParsedStackTrace) => {
return this._wrapApiCall(async (channel: channels.AndroidDeviceChannel) => {
const timeout = this._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
const waiter = Waiter.createForEvent(this, event, stackTrace);
const waiter = Waiter.createForEvent(this, event);
waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);
if (event !== Events.AndroidDevice.Close)
waiter.rejectOnEvent(this, Events.AndroidDevice.Close, new Error('Device closed'));

5
src/client/browserContext.ts
View File

@ -33,7 +33,6 @@ import * as api from '../../types/types';
import * as structs from '../../types/structs';
import { CDPSession } from './cdpSession';
import { Tracing } from './tracing';
import { ParsedStackTrace } from '../utils/stackTrace';
export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel, channels.BrowserContextInitializer> implements api.BrowserContext {
_pages = new Set<Page>();
@ -270,10 +269,10 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel,
}
async waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions = {}): Promise<any> {
return this._wrapApiCall(async (channel: channels.BrowserContextChannel, stackTrace: ParsedStackTrace) => {
return this._wrapApiCall(async (channel: channels.BrowserContextChannel) => {
const timeout = this._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
const waiter = Waiter.createForEvent(this, event, stackTrace);
const waiter = Waiter.createForEvent(this, event);
waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);
if (event !== Events.BrowserContext.Close)
waiter.rejectOnEvent(this, Events.BrowserContext.Close, new Error('Context closed'));

12
src/client/channelOwner.ts
View File

@ -107,18 +107,6 @@ export abstract class ChannelOwner<T extends channels.Channel = channels.Channel
}
}
_waitForEventInfoBefore(waitId: string, event: string, stackTrace: ParsedStackTrace) {
this._connection.sendMessageToServer(this, 'waitForEventInfo', { info: { waitId, phase: 'before', event } }, stackTrace).catch(() => {});
}
_waitForEventInfoAfter(waitId: string, error: string | undefined) {
this._connection.sendMessageToServer(this, 'waitForEventInfo', { info: { waitId, phase: 'after', error } }, null).catch(() => {});
}
_waitForEventInfoLog(waitId: string, message: string) {
this._connection.sendMessageToServer(this, 'waitForEventInfo', { info: { waitId, phase: 'log', message } }, null).catch(() => {});
}
private toJSON() {
// Jest's expect library tries to print objects sometimes.
// RPC objects can contain links to lots of other objects,

7
src/client/electron.ts
View File

@ -18,7 +18,6 @@ import type { BrowserWindow } from 'electron';
import * as structs from '../../types/structs';
import * as api from '../../types/types';
import * as channels from '../protocol/channels';
import { ParsedStackTrace } from '../utils/stackTrace';
import { TimeoutSettings } from '../utils/timeoutSettings';
import { headersObjectToArray } from '../utils/utils';
import { BrowserContext } from './browserContext';
@ -101,16 +100,16 @@ export class ElectronApplication extends ChannelOwner<channels.ElectronApplicati
}
async close() {
return this._wrapApiCall(async (channel: channels.ElectronApplicationChannel, stackTrace: ParsedStackTrace) => {
return this._wrapApiCall(async (channel: channels.ElectronApplicationChannel) => {
await channel.close();
});
}
async waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions = {}): Promise<any> {
return this._wrapApiCall(async (channel: channels.ElectronApplicationChannel, stackTrace: ParsedStackTrace) => {
return this._wrapApiCall(async (channel: channels.ElectronApplicationChannel) => {
const timeout = this._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
const waiter = Waiter.createForEvent(this, event, stackTrace);
const waiter = Waiter.createForEvent(this, event);
waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);
if (event !== Events.ElectronApplication.Close)
waiter.rejectOnEvent(this, Events.ElectronApplication.Close, new Error('Electron application closed'));

13
src/client/frame.ts
View File

@ -30,7 +30,6 @@ import { LifecycleEvent, URLMatch, SelectOption, SelectOptionOptions, FilePayloa
import { urlMatches } from './clientHelper';
import * as api from '../../types/types';
import * as structs from '../../types/structs';
import { ParsedStackTrace } from '../utils/stackTrace';
export type WaitForNavigationOptions = {
timeout?: number,
@ -94,8 +93,8 @@ export class Frame extends ChannelOwner<channels.FrameChannel, channels.FrameIni
});
}
private _setupNavigationWaiter(options: { timeout?: number }, stackTrace: ParsedStackTrace): Waiter {
const waiter = new Waiter(this, '', stackTrace);
private _setupNavigationWaiter(options: { timeout?: number }): Waiter {
const waiter = new Waiter(this._page!, '');
if (this._page!.isClosed())
waiter.rejectImmediately(new Error('Navigation failed because page was closed!'));
waiter.rejectOnEvent(this._page!, Events.Page.Close, new Error('Navigation failed because page was closed!'));
@ -107,9 +106,9 @@ export class Frame extends ChannelOwner<channels.FrameChannel, channels.FrameIni
}
async waitForNavigation(options: WaitForNavigationOptions = {}): Promise<network.Response | null> {
return this._wrapApiCall(async (channel: channels.FrameChannel, stackTrace: ParsedStackTrace) => {
return this._wrapApiCall(async (channel: channels.FrameChannel) => {
const waitUntil = verifyLoadState('waitUntil', options.waitUntil === undefined ? 'load' : options.waitUntil);
const waiter = this._setupNavigationWaiter(options, stackTrace);
const waiter = this._setupNavigationWaiter(options);
const toUrl = typeof options.url === 'string' ? ` to "${options.url}"` : '';
waiter.log(`waiting for navigation${toUrl} until "${waitUntil}"`);
@ -145,8 +144,8 @@ export class Frame extends ChannelOwner<channels.FrameChannel, channels.FrameIni
state = verifyLoadState('state', state);
if (this._loadStates.has(state))
return;
return this._wrapApiCall(async (channel: channels.FrameChannel, stackTrace: ParsedStackTrace) => {
const waiter = this._setupNavigationWaiter(options, stackTrace);
return this._wrapApiCall(async (channel: channels.FrameChannel) => {
const waiter = this._setupNavigationWaiter(options);
await waiter.waitForEvent<LifecycleEvent>(this._eventEmitter, 'loadstate', s => {
waiter.log(` "${s}" event fired`);
return s === state;

5
src/client/network.ts
View File

@ -26,7 +26,6 @@ import { Events } from './events';
import { Page } from './page';
import { Waiter } from './waiter';
import * as api from '../../types/types';
import { ParsedStackTrace } from '../utils/stackTrace';
export type NetworkCookie = {
name: string,
@ -476,10 +475,10 @@ export class WebSocket extends ChannelOwner<channels.WebSocketChannel, channels.
}
async waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions = {}): Promise<any> {
return this._wrapApiCall(async (channel: channels.WebSocketChannel, stackTrace: ParsedStackTrace) => {
return this._wrapApiCall(async (channel: channels.WebSocketChannel) => {
const timeout = this._page._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
const waiter = Waiter.createForEvent(this, event, stackTrace);
const waiter = Waiter.createForEvent(this, event);
waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);
if (event !== Events.WebSocket.Error)
waiter.rejectOnEvent(this, Events.WebSocket.Error, new Error('Socket error'));

17
src/client/page.ts
View File

@ -46,7 +46,6 @@ import { isString, isRegExp, isObject, mkdirIfNeeded, headersObjectToArray } fro
import { isSafeCloseError } from '../utils/errors';
import { Video } from './video';
import { Artifact } from './artifact';
import { ParsedStackTrace } from '../utils/stackTrace';
type PDFOptions = Omit<channels.PagePdfParams, 'width' | 'height' | 'margin'> & {
width?: string | number,
@ -349,7 +348,7 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
}
async waitForRequest(urlOrPredicate: string | RegExp | ((r: Request) => boolean | Promise<boolean>), options: { timeout?: number } = {}): Promise<Request> {
return this._wrapApiCall(async (channel: channels.PageChannel, stackTrace: ParsedStackTrace) => {
return this._wrapApiCall(async (channel: channels.PageChannel) => {
const predicate = (request: Request) => {
if (isString(urlOrPredicate) || isRegExp(urlOrPredicate))
return urlMatches(request.url(), urlOrPredicate);
@ -357,12 +356,12 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
};
const trimmedUrl = trimUrl(urlOrPredicate);
const logLine = trimmedUrl ? `waiting for request ${trimmedUrl}` : undefined;
return this._waitForEvent(Events.Page.Request, { predicate, timeout: options.timeout }, stackTrace, logLine);
return this._waitForEvent(Events.Page.Request, { predicate, timeout: options.timeout }, logLine);
});
}
async waitForResponse(urlOrPredicate: string | RegExp | ((r: Response) => boolean | Promise<boolean>), options: { timeout?: number } = {}): Promise<Response> {
return this._wrapApiCall(async (channel: channels.PageChannel, stackTrace: ParsedStackTrace) => {
return this._wrapApiCall(async (channel: channels.PageChannel) => {
const predicate = (response: Response) => {
if (isString(urlOrPredicate) || isRegExp(urlOrPredicate))
return urlMatches(response.url(), urlOrPredicate);
@ -370,20 +369,20 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
};
const trimmedUrl = trimUrl(urlOrPredicate);
const logLine = trimmedUrl ? `waiting for response ${trimmedUrl}` : undefined;
return this._waitForEvent(Events.Page.Response, { predicate, timeout: options.timeout }, stackTrace, logLine);
return this._waitForEvent(Events.Page.Response, { predicate, timeout: options.timeout }, logLine);
});
}
async waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions = {}): Promise<any> {
return this._wrapApiCall(async (channel: channels.PageChannel, stackTrace: ParsedStackTrace) => {
return this._waitForEvent(event, optionsOrPredicate, stackTrace, `waiting for event "${event}"`);
return this._wrapApiCall(async (channel: channels.PageChannel) => {
return this._waitForEvent(event, optionsOrPredicate, `waiting for event "${event}"`);
});
}
private async _waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions, stackTrace: ParsedStackTrace, logLine?: string): Promise<any> {
private async _waitForEvent(event: string, optionsOrPredicate: WaitForEventOptions, logLine?: string): Promise<any> {
const timeout = this._timeoutSettings.timeout(typeof optionsOrPredicate === 'function' ? {} : optionsOrPredicate);
const predicate = typeof optionsOrPredicate === 'function' ? optionsOrPredicate : optionsOrPredicate.predicate;
const waiter = Waiter.createForEvent(this, event, stackTrace);
const waiter = Waiter.createForEvent(this, event);
if (logLine)
waiter.log(logLine);
waiter.rejectOnTimeout(timeout, `Timeout while waiting for event "${event}"`);

21
src/client/waiter.ts
View File

@ -15,9 +15,10 @@
*/
import { EventEmitter } from 'events';
import { ParsedStackTrace, rewriteErrorMessage } from '../utils/stackTrace';
import { rewriteErrorMessage } from '../utils/stackTrace';
import { TimeoutError } from '../utils/errors';
import { createGuid } from '../utils/utils';
import * as channels from '../protocol/channels';
import { ChannelOwner } from './channelOwner';
export class Waiter {
@ -26,21 +27,23 @@ export class Waiter {
private _immediateError?: Error;
// TODO: can/should we move these logs into wrapApiCall?
private _logs: string[] = [];
private _channelOwner: ChannelOwner;
private _channel: channels.EventTargetChannel;
private _waitId: string;
private _error: string | undefined;
constructor(channelOwner: ChannelOwner, event: string, stackTrace: ParsedStackTrace) {
constructor(channelOwner: ChannelOwner<channels.EventTargetChannel>, event: string) {
this._waitId = createGuid();
this._channelOwner = channelOwner;
this._channelOwner._waitForEventInfoBefore(this._waitId, event, stackTrace);
this._channel = channelOwner._channel;
channelOwner._wrapApiCall(async (channel: channels.EventTargetChannel) => {
channel.waitForEventInfo({ info: { waitId: this._waitId, phase: 'before', event } }).catch(() => {});
});
this._dispose = [
() => this._channelOwner._waitForEventInfoAfter(this._waitId, this._error)
() => this._channel.waitForEventInfo({ info: { waitId: this._waitId, phase: 'after', error: this._error } }).catch(() => {})
];
}
static createForEvent(channelOwner: ChannelOwner, event: string, stackTrace: ParsedStackTrace) {
return new Waiter(channelOwner, event, stackTrace);
static createForEvent(channelOwner: ChannelOwner<channels.EventTargetChannel>, event: string) {
return new Waiter(channelOwner, event);
}
async waitForEvent<T = void>(emitter: EventEmitter, event: string, predicate?: (arg: T) => boolean | Promise<boolean>): Promise<T> {
@ -89,7 +92,7 @@ export class Waiter {
log(s: string) {
this._logs.push(s);
this._channelOwner._waitForEventInfoLog(this._waitId, s);
this._channel.waitForEventInfo({ info: { waitId: this._waitId, phase: 'log', message: s } }).catch(() => {});
}
private _rejectOn(promise: Promise<any>, dispose?: () => void) {

14
src/dispatchers/dispatcher.ts
View File

@ -77,7 +77,7 @@ export class Dispatcher<Type extends { guid: string }, Initializer> extends Even
(object as any)[dispatcherSymbol] = this;
if (this._parent)
this._connection.sendMessageToClient(this._parent._guid, type, '__create__', { type, initializer, guid });
this._connection.sendMessageToClient(this._parent._guid, type, '__create__', { type, initializer, guid }, this._parent._object);
}
_dispatchEvent(method: string, params: Dispatcher<any, any> | any = {}) {
@ -142,8 +142,8 @@ export class DispatcherConnection {
const eventMetadata: CallMetadata = {
id: `event@${++lastEventId}`,
objectId: sdkObject?.guid,
pageId: sdkObject?.attribution.page?.guid,
frameId: sdkObject?.attribution.frame?.guid,
pageId: sdkObject?.attribution?.page?.guid,
frameId: sdkObject?.attribution?.frame?.guid,
startTime: monotonicTime(),
endTime: 0,
type,
@ -152,7 +152,7 @@ export class DispatcherConnection {
log: [],
snapshots: []
};
sdkObject.instrumentation.onEvent(sdkObject, eventMetadata);
sdkObject.instrumentation?.onEvent(sdkObject, eventMetadata);
}
this.onmessage({ guid, method, params });
}
@ -176,8 +176,6 @@ export class DispatcherConnection {
};
const scheme = createScheme(tChannel);
this._validateParams = (type: string, method: string, params: any): any => {
if (method === 'waitForEventInfo')
return tOptional(scheme['WaitForEventInfo'])(params.info, '');
const name = type + method[0].toUpperCase() + method.substring(1) + 'Params';
if (!scheme[name])
throw new ValidationError(`Unknown scheme for ${type}.${method}`);
@ -221,8 +219,8 @@ export class DispatcherConnection {
id: `call@${id}`,
...validMetadata,
objectId: sdkObject?.guid,
pageId: sdkObject?.attribution.page?.guid,
frameId: sdkObject?.attribution.frame?.guid,
pageId: sdkObject?.attribution?.page?.guid,
frameId: sdkObject?.attribution?.frame?.guid,
startTime: monotonicTime(),
endTime: 0,
type: dispatcher._type,

45
src/protocol/channels.ts
View File

@ -35,14 +35,6 @@ export type Metadata = {
apiName?: string,
};
export type WaitForEventInfo = {
waitId: string,
phase: 'before' | 'after' | 'log',
event?: string,
message?: string,
error?: string,
};
export type Point = {
x: number,
y: number,
@ -604,11 +596,30 @@ export type BrowserStopTracingResult = {
binary: Binary,
};
// ----------- EventTarget -----------
export type EventTargetInitializer = {};
export interface EventTargetChannel extends Channel {
waitForEventInfo(params: EventTargetWaitForEventInfoParams, metadata?: Metadata): Promise<EventTargetWaitForEventInfoResult>;
}
export type EventTargetWaitForEventInfoParams = {
info: {
waitId: string,
phase: 'before' | 'after' | 'log',
event?: string,
message?: string,
error?: string,
},
};
export type EventTargetWaitForEventInfoOptions = {
};
export type EventTargetWaitForEventInfoResult = void;
// ----------- BrowserContext -----------
export type BrowserContextInitializer = {
isChromium: boolean,
};
export interface BrowserContextChannel extends Channel {
export interface BrowserContextChannel extends EventTargetChannel {
on(event: 'bindingCall', callback: (params: BrowserContextBindingCallEvent) => void): this;
on(event: 'close', callback: (params: BrowserContextCloseEvent) => void): this;
on(event: 'page', callback: (params: BrowserContextPageEvent) => void): this;
@ -868,7 +879,7 @@ export type PageInitializer = {
isClosed: boolean,
opener?: PageChannel,
};
export interface PageChannel extends Channel {
export interface PageChannel extends EventTargetChannel {
on(event: 'bindingCall', callback: (params: PageBindingCallEvent) => void): this;
on(event: 'close', callback: (params: PageCloseEvent) => void): this;
on(event: 'console', callback: (params: PageConsoleEvent) => void): this;
@ -2460,7 +2471,7 @@ export type RemoteAddr = {
export type WebSocketInitializer = {
url: string,
};
export interface WebSocketChannel extends Channel {
export interface WebSocketChannel extends EventTargetChannel {
on(event: 'open', callback: (params: WebSocketOpenEvent) => void): this;
on(event: 'frameSent', callback: (params: WebSocketFrameSentEvent) => void): this;
on(event: 'frameReceived', callback: (params: WebSocketFrameReceivedEvent) => void): this;
@ -2717,7 +2728,7 @@ export type ElectronLaunchResult = {
export type ElectronApplicationInitializer = {
context: BrowserContextChannel,
};
export interface ElectronApplicationChannel extends Channel {
export interface ElectronApplicationChannel extends EventTargetChannel {
on(event: 'close', callback: (params: ElectronApplicationCloseEvent) => void): this;
browserWindow(params: ElectronApplicationBrowserWindowParams, metadata?: Metadata): Promise<ElectronApplicationBrowserWindowResult>;
evaluateExpression(params: ElectronApplicationEvaluateExpressionParams, metadata?: Metadata): Promise<ElectronApplicationEvaluateExpressionResult>;
@ -2807,7 +2818,7 @@ export type AndroidDeviceInitializer = {
model: string,
serial: string,
};
export interface AndroidDeviceChannel extends Channel {
export interface AndroidDeviceChannel extends EventTargetChannel {
on(event: 'webViewAdded', callback: (params: AndroidDeviceWebViewAddedEvent) => void): this;
on(event: 'webViewRemoved', callback: (params: AndroidDeviceWebViewRemovedEvent) => void): this;
wait(params: AndroidDeviceWaitParams, metadata?: Metadata): Promise<AndroidDeviceWaitResult>;
@ -3237,6 +3248,12 @@ export type SocksSocketEndOptions = {};
export type SocksSocketEndResult = void;
export const commandsWithTracingSnapshots = new Set([
'EventTarget.waitForEventInfo',
'BrowserContext.waitForEventInfo',
'Page.waitForEventInfo',
'WebSocket.waitForEventInfo',
'ElectronApplication.waitForEventInfo',
'AndroidDevice.waitForEventInfo',
'Page.goBack',
'Page.goForward',
'Page.reload',
@ -3285,7 +3302,9 @@ export const commandsWithTracingSnapshots = new Set([
'Frame.waitForFunction',
'Frame.waitForSelector',
'JSHandle.evaluateExpression',
'ElementHandle.evaluateExpression',
'JSHandle.evaluateExpressionHandle',
'ElementHandle.evaluateExpressionHandle',
'ElementHandle.evalOnSelector',
'ElementHandle.evalOnSelectorAll',
'ElementHandle.check',

46
src/protocol/protocol.yml
View File

@ -31,21 +31,6 @@ Metadata:
apiName: string?
WaitForEventInfo:
type: object
properties:
waitId: string
phase:
type: enum
literals:
- before
- after
- log
event: string?
message: string?
error: string?
Point:
type: object
properties:
@ -504,10 +489,33 @@ Browser:
close:
EventTarget:
type: interface
commands:
waitForEventInfo:
parameters:
info:
type: object
properties:
waitId: string
phase:
type: enum
literals:
- before
- after
- log
event: string?
message: string?
error: string?
tracing:
snapshot: true
BrowserContext:
type: interface
extends: EventTarget
initializer:
isChromium: boolean
@ -691,6 +699,8 @@ BrowserContext:
Page:
type: interface
extends: EventTarget
initializer:
mainFrame: Frame
viewportSize:
@ -2128,6 +2138,8 @@ RemoteAddr:
WebSocket:
type: interface
extends: EventTarget
initializer:
url: string
@ -2346,6 +2358,8 @@ Electron:
ElectronApplication:
type: interface
extends: EventTarget
initializer:
context: BrowserContext
@ -2413,6 +2427,8 @@ AndroidSocket:
AndroidDevice:
type: interface
extends: EventTarget
initializer:
model: string
serial: string

21
src/protocol/validator.ts
View File

@ -43,13 +43,6 @@ export function createScheme(tChannel: (name: string) => Validator): Scheme {
stack: tOptional(tArray(tType('StackFrame'))),
apiName: tOptional(tString),
});
scheme.WaitForEventInfo = tObject({
waitId: tString,
phase: tEnum(['before', 'after', 'log']),
event: tOptional(tString),
message: tOptional(tString),
error: tOptional(tString),
});
scheme.Point = tObject({
x: tNumber,
y: tNumber,
@ -335,6 +328,20 @@ export function createScheme(tChannel: (name: string) => Validator): Scheme {
categories: tOptional(tArray(tString)),
});
scheme.BrowserStopTracingParams = tOptional(tObject({}));
scheme.EventTargetWaitForEventInfoParams = tObject({
info: tObject({
waitId: tString,
phase: tEnum(['before', 'after', 'log']),
event: tOptional(tString),
message: tOptional(tString),
error: tOptional(tString),
}),
});
scheme.BrowserContextWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
scheme.PageWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
scheme.WebSocketWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
scheme.ElectronApplicationWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
scheme.AndroidDeviceWaitForEventInfoParams = tType('EventTargetWaitForEventInfoParams');
scheme.BrowserContextAddCookiesParams = tObject({
cookies: tArray(tType('SetNetworkCookie')),
});

8
src/server/trace/recorder/tracing.ts
View File

@ -133,7 +133,7 @@ export class Tracing implements InstrumentationListener {
return;
if (!this._snapshotter.started())
return;
if (!this._shouldCaptureSnapshot(metadata))
if (!shouldCaptureSnapshot(metadata))
return;
const snapshotName = `${name}@${metadata.id}`;
metadata.snapshots.push({ title: name, snapshotName });
@ -162,7 +162,7 @@ export class Tracing implements InstrumentationListener {
}
pendingCall.afterSnapshot = this._captureSnapshot('after', sdkObject, metadata);
await pendingCall.afterSnapshot;
const event: trace.ActionTraceEvent = { type: 'action', metadata, hasSnapshot: this._shouldCaptureSnapshot(metadata) };
const event: trace.ActionTraceEvent = { type: 'action', metadata, hasSnapshot: shouldCaptureSnapshot(metadata) };
this._appendTraceEvent(event);
this._pendingCalls.delete(metadata.id);
}
@ -225,8 +225,8 @@ export class Tracing implements InstrumentationListener {
await fs.promises.appendFile(this._traceFile!, JSON.stringify(event) + '\n');
});
}
}
private _shouldCaptureSnapshot(metadata: CallMetadata): boolean {
function shouldCaptureSnapshot(metadata: CallMetadata): boolean {
return commandsWithTracingSnapshots.has(metadata.type + '.' + metadata.method);
}
}

11
src/server/trace/viewer/traceModel.ts
View File

@ -43,9 +43,8 @@ export class TraceModel {
appendEvents(events: trace.TraceEvent[], snapshotStorage: SnapshotStorage) {
for (const event of events)
this.appendEvent(event);
const actions: trace.ActionTraceEvent[] = [];
for (const page of this.contextEntry!.pages)
actions.push(...page.actions);
page.actions.sort((a1, a2) => a1.metadata.startTime - a2.metadata.startTime);
this.contextEntry!.resources = snapshotStorage.resources();
}
@ -55,6 +54,7 @@ export class TraceModel {
pageEntry = {
actions: [],
events: [],
objects: {},
screencastFrames: [],
};
this.pageEntries.set(pageId, pageEntry);
@ -83,8 +83,12 @@ export class TraceModel {
}
case 'event': {
const metadata = event.metadata;
if (metadata.pageId)
if (metadata.pageId) {
if (metadata.method === '__create__')
this._pageEntry(metadata.pageId).objects[metadata.params.guid] = metadata.params.initializer;
else
this._pageEntry(metadata.pageId).events.push(event);
}
break;
}
case 'resource-snapshot':
@ -113,6 +117,7 @@ export type ContextEntry = {
export type PageEntry = {
actions: trace.ActionTraceEvent[];
events: trace.ActionTraceEvent[];
objects: { [ket: string]: any };
screencastFrames: {
sha1: string,
timestamp: number,

3
src/server/trace/viewer/traceViewer.ts
View File

@ -141,7 +141,10 @@ export class TraceViewer {
});
await context.extendInjectedScript('main', consoleApiSource.source);
const [page] = context.pages();
if (isUnderTest())
page.on('close', () => context.close(internalCallMetadata()).catch(() => {}));
else
page.on('close', () => process.exit());
await page.mainFrame().goto(internalCallMetadata(), urlPrefix + '/traceviewer/traceViewer/index.html');
return context;
}

1
src/web/third_party/vscode/codicon.css vendored
View File

@ -22,6 +22,7 @@
user-select: none;
}
.codicon-blank:before { content: '\81'; }
.codicon-add:before { content: '\ea60'; }
.codicon-plus:before { content: '\ea60'; }
.codicon-gist-new:before { content: '\ea60'; }

2
src/web/traceViewer/ui/filmStrip.tsx
View File

@ -42,7 +42,7 @@ export const FilmStrip: React.FunctionComponent<{
if (previewPoint !== undefined && screencastFrames) {
const previewTime = boundaries.minimum + (boundaries.maximum - boundaries.minimum) * previewPoint.x / measure.width;
previewImage = screencastFrames[upperBound(screencastFrames, previewTime, timeComparator) - 1];
previewSize = inscribe({width: previewImage.width, height: previewImage.height}, { width: 600, height: 600 });
previewSize = previewImage ? inscribe({width: previewImage.width, height: previewImage.height}, { width: 600, height: 600 }) : undefined;
}
return <div className='film-strip' ref={ref}>{

3
src/web/traceViewer/ui/tabbedPane.css
View File

@ -44,7 +44,7 @@
}
.tab-element {
padding: 2px 6px 0 6px;
padding: 2px 12px 0 12px;
margin-right: 4px;
cursor: pointer;
display: flex;
@ -53,7 +53,6 @@
justify-content: center;
user-select: none;
border-bottom: 3px solid transparent;
width: 80px;
outline: none;
height: 100%;
}

4
src/web/traceViewer/ui/timeline.tsx
View File

@ -170,8 +170,8 @@ export const Timeline: React.FunctionComponent<{
return <div key={index}
className={'timeline-label ' + bar.className + (targetBar === bar ? ' selected' : '')}
style={{
left: bar.leftPosition + 'px',
width: Math.max(1, bar.rightPosition - bar.leftPosition) + 'px',
left: bar.leftPosition,
maxWidth: 100,
}}
>
{bar.label}

3
src/web/traceViewer/ui/workbench.tsx
View File

@ -54,6 +54,9 @@ export const Workbench: React.FunctionComponent<{
const snapshotSize = context.options.viewport || { width: 1280, height: 720 };
const boundaries = { minimum: context.startTime, maximum: context.endTime };
// Leave some nice free space on the right hand side.
boundaries.maximum += (boundaries.maximum - boundaries.minimum) / 20;
return <div className='vbox workbench'>
<div className='hbox header'>
<div className='logo'>🎭</div>

43
tests/chromium/trace-viewer/trace-viewer.spec.ts
View File

@ -24,8 +24,8 @@ class TraceViewerPage {
constructor(public page: Page) {}
async actionTitles() {
await this.page.waitForSelector('.action-title');
return await this.page.$$eval('.action-title', ee => ee.map(e => e.textContent));
await this.page.waitForSelector('.action-title:visible');
return await this.page.$$eval('.action-title:visible', ee => ee.map(e => e.textContent));
}
async selectAction(title: string) {
@ -33,7 +33,20 @@ class TraceViewerPage {
}
async logLines() {
return await this.page.$$eval('.log-line', ee => ee.map(e => e.textContent));
await this.page.waitForSelector('.log-line:visible');
return await this.page.$$eval('.log-line:visible', ee => ee.map(e => e.textContent));
}
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));
const set = new Set<string>();
for (const item of list) {
for (const className of item.split(' '))
set.add(className);
}
const result = [...set];
return result.sort();
}
}
@ -60,6 +73,15 @@ test.beforeAll(async ({ browser }, workerInfo) => {
await page.goto('data:text/html,<html>Hello world</html>');
await page.setContent('<button>Click</button>');
await page.click('"Click"');
await Promise.all([
page.waitForNavigation(),
page.waitForTimeout(200).then(() => page.goto('data:text/html,<html>Hello world 2</html>'))
]);
await page.evaluate(() => {
console.log('Log');
console.warn('Warning');
console.error('Error');
});
await page.close();
traceFile = path.join(workerInfo.project.outputDir, 'trace.zip');
await context.tracing.stop({ path: traceFile });
@ -72,7 +94,14 @@ test('should show empty trace viewer', async ({ showTraceViewer }, testInfo) =>
test('should open simple trace viewer', async ({ showTraceViewer }) => {
const traceViewer = await showTraceViewer(traceFile);
expect(await traceViewer.actionTitles()).toEqual(['page.goto', 'page.setContent', 'page.click']);
expect(await traceViewer.actionTitles()).toEqual([
'page.goto',
'page.setContent',
'page.click',
'page.waitForNavigation',
'page.goto',
'page.evaluate'
]);
});
test('should contain action log', async ({ showTraceViewer }) => {
@ -84,3 +113,9 @@ test('should contain action log', async ({ showTraceViewer }) => {
expect(logLines).toContain('attempting click action');
expect(logLines).toContain(' click action done');
});
test('should render events', async ({ showTraceViewer }) => {
const traceViewer = await showTraceViewer(traceFile);
const events = await traceViewer.eventBars();
expect(events).toContain('page_console');
});

17
utils/generate_channels.js
View File

@ -187,6 +187,18 @@ for (const [name, value] of Object.entries(protocol)) {
mixins.set(name, value);
}
const derivedClasses = new Map();
for (const [name, item] of Object.entries(protocol)) {
if (item.type === 'interface' && item.extends) {
let items = derivedClasses.get(item.extends);
if (!items) {
items = [];
derivedClasses.set(item.extends, items);
}
items.push(name);
}
}
for (const [name, item] of Object.entries(protocol)) {
if (item.type === 'interface') {
const channelName = name;
@ -210,8 +222,11 @@ for (const [name, item] of Object.entries(protocol)) {
for (let [methodName, method] of Object.entries(item.commands || {})) {
if (method === null)
method = {};
if (method.tracing && method.tracing.snapshot)
if (method.tracing && method.tracing.snapshot) {
tracingSnapshots.push(name + '.' + methodName);
for (const derived of derivedClasses.get(name) || [])
tracingSnapshots.push(derived + '.' + methodName);
}
const parameters = objectType(method.parameters || {}, '');
const paramsName = `${channelName}${titleCase(methodName)}Params`;
const optionsName = `${channelName}${titleCase(methodName)}Options`;