/** * Copyright 2019 Google Inc. All rights reserved. * Modifications copyright (c) Microsoft Corporation. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import * as dialog from '../dialog'; import * as dom from '../dom'; import { Events } from '../events'; import * as frames from '../frames'; import { assert, debugError, helper, RegisteredListener } from '../helper'; import { Page, PageBinding, PageDelegate, Worker } from '../page'; import * as platform from '../platform'; import { kScreenshotDuringNavigationError } from '../screenshotter'; import * as types from '../types'; import { getAccessibilityTree } from './ffAccessibility'; import { FFBrowserContext } from './ffBrowser'; import { FFSession, FFSessionEvents } from './ffConnection'; import { FFExecutionContext } from './ffExecutionContext'; import { RawKeyboardImpl, RawMouseImpl } from './ffInput'; import { FFNetworkManager, headersArray } from './ffNetworkManager'; import { Protocol } from './protocol'; import { selectors } from '../selectors'; const UTILITY_WORLD_NAME = '__playwright_utility_world__'; export class FFPage implements PageDelegate { readonly rawMouse: RawMouseImpl; readonly rawKeyboard: RawKeyboardImpl; readonly _session: FFSession; readonly _page: Page; readonly _networkManager: FFNetworkManager; readonly _browserContext: FFBrowserContext; private _pagePromise: Promise; private _pageCallback: (pageOrError: Page | Error) => void = () => {}; private _initialized = false; private readonly _opener: FFPage | null; private readonly _contextIdToContext: Map; private _eventListeners: RegisteredListener[]; private _workers = new Map(); constructor(session: FFSession, browserContext: FFBrowserContext, opener: FFPage | null) { this._session = session; this._opener = opener; this.rawKeyboard = new RawKeyboardImpl(session); this.rawMouse = new RawMouseImpl(session); this._contextIdToContext = new Map(); this._browserContext = browserContext; this._page = new Page(this, browserContext); this._networkManager = new FFNetworkManager(session, this._page); this._page.on(Events.Page.FrameDetached, frame => this._removeContextsForFrame(frame)); this._eventListeners = [ helper.addEventListener(this._session, 'Page.eventFired', this._onEventFired.bind(this)), helper.addEventListener(this._session, 'Page.frameAttached', this._onFrameAttached.bind(this)), helper.addEventListener(this._session, 'Page.frameDetached', this._onFrameDetached.bind(this)), helper.addEventListener(this._session, 'Page.navigationAborted', this._onNavigationAborted.bind(this)), helper.addEventListener(this._session, 'Page.navigationCommitted', this._onNavigationCommitted.bind(this)), helper.addEventListener(this._session, 'Page.navigationStarted', event => this._onNavigationStarted(event.frameId)), helper.addEventListener(this._session, 'Page.sameDocumentNavigation', this._onSameDocumentNavigation.bind(this)), helper.addEventListener(this._session, 'Runtime.executionContextCreated', this._onExecutionContextCreated.bind(this)), helper.addEventListener(this._session, 'Runtime.executionContextDestroyed', this._onExecutionContextDestroyed.bind(this)), helper.addEventListener(this._session, 'Page.linkClicked', event => this._onLinkClicked(event.phase)), helper.addEventListener(this._session, 'Page.uncaughtError', this._onUncaughtError.bind(this)), helper.addEventListener(this._session, 'Runtime.console', this._onConsole.bind(this)), helper.addEventListener(this._session, 'Page.dialogOpened', this._onDialogOpened.bind(this)), helper.addEventListener(this._session, 'Page.bindingCalled', this._onBindingCalled.bind(this)), helper.addEventListener(this._session, 'Page.fileChooserOpened', this._onFileChooserOpened.bind(this)), helper.addEventListener(this._session, 'Page.workerCreated', this._onWorkerCreated.bind(this)), helper.addEventListener(this._session, 'Page.workerDestroyed', this._onWorkerDestroyed.bind(this)), helper.addEventListener(this._session, 'Page.dispatchMessageFromWorker', this._onDispatchMessageFromWorker.bind(this)), helper.addEventListener(this._session, 'Page.crashed', this._onCrashed.bind(this)), ]; this._pagePromise = new Promise(f => this._pageCallback = f); session.once(FFSessionEvents.Disconnected, () => this._page._didDisconnect()); this._initialize(); } async _initialize() { try { await Promise.all([ // TODO: we should get rid of this call to resolve before any early events arrive, e.g. dialogs. this._session.send('Page.addScriptToEvaluateOnNewDocument', { script: '', worldName: UTILITY_WORLD_NAME, }), new Promise(f => this._session.once('Page.ready', f)), ]); this._pageCallback(this._page); } catch (e) { this._pageCallback(e); } this._initialized = true; } _initializedPage(): Page | null { return this._initialized ? this._page : null; } async pageOrError(): Promise { return this._pagePromise; } _onExecutionContextCreated(payload: Protocol.Runtime.executionContextCreatedPayload) { const {executionContextId, auxData} = payload; const frame = this._page._frameManager.frame(auxData ? auxData.frameId : null); if (!frame) return; const delegate = new FFExecutionContext(this._session, executionContextId); const context = new dom.FrameExecutionContext(delegate, frame); if (auxData.name === UTILITY_WORLD_NAME) frame._contextCreated('utility', context); else if (!auxData.name) frame._contextCreated('main', context); this._contextIdToContext.set(executionContextId, context); } _onExecutionContextDestroyed(payload: Protocol.Runtime.executionContextDestroyedPayload) { const {executionContextId} = payload; const context = this._contextIdToContext.get(executionContextId); if (!context) return; this._contextIdToContext.delete(executionContextId); context.frame._contextDestroyed(context); } private _removeContextsForFrame(frame: frames.Frame) { for (const [contextId, context] of this._contextIdToContext) { if (context.frame === frame) this._contextIdToContext.delete(contextId); } } _onLinkClicked(phase: 'before' | 'after') { if (phase === 'before') this._page._frameManager.frameWillPotentiallyRequestNavigation(); else this._page._frameManager.frameDidPotentiallyRequestNavigation(); } _onNavigationStarted(frameId: string) { this._page._frameManager.frameRequestedNavigation(frameId); } _onNavigationAborted(params: Protocol.Page.navigationAbortedPayload) { const frame = this._page._frameManager.frame(params.frameId)!; for (const task of frame._frameTasks) task.onNewDocument(params.navigationId, new Error(params.errorText)); } _onNavigationCommitted(params: Protocol.Page.navigationCommittedPayload) { for (const [workerId, worker] of this._workers) { if (worker.frameId === params.frameId) this._onWorkerDestroyed({ workerId }); } this._page._frameManager.frameCommittedNewDocumentNavigation(params.frameId, params.url, params.name || '', params.navigationId || '', false); } _onSameDocumentNavigation(params: Protocol.Page.sameDocumentNavigationPayload) { this._page._frameManager.frameCommittedSameDocumentNavigation(params.frameId, params.url); } _onFrameAttached(params: Protocol.Page.frameAttachedPayload) { this._page._frameManager.frameAttached(params.frameId, params.parentFrameId); } _onFrameDetached(params: Protocol.Page.frameDetachedPayload) { this._page._frameManager.frameDetached(params.frameId); } _onEventFired(payload: Protocol.Page.eventFiredPayload) { const {frameId, name} = payload; if (name === 'load') this._page._frameManager.frameLifecycleEvent(frameId, 'load'); if (name === 'DOMContentLoaded') this._page._frameManager.frameLifecycleEvent(frameId, 'domcontentloaded'); } _onUncaughtError(params: Protocol.Page.uncaughtErrorPayload) { const error = new Error(params.message); error.stack = params.stack; this._page.emit(Events.Page.PageError, error); } _onConsole(payload: Protocol.Runtime.consolePayload) { const {type, args, executionContextId, location} = payload; const context = this._contextIdToContext.get(executionContextId)!; this._page._addConsoleMessage(type, args.map(arg => context._createHandle(arg)), location); } _onDialogOpened(params: Protocol.Page.dialogOpenedPayload) { this._page.emit(Events.Page.Dialog, new dialog.Dialog( params.type, params.message, async (accept: boolean, promptText?: string) => { await this._session.send('Page.handleDialog', { dialogId: params.dialogId, accept, promptText }).catch(debugError); }, params.defaultValue)); } _onBindingCalled(event: Protocol.Page.bindingCalledPayload) { const context = this._contextIdToContext.get(event.executionContextId)!; this._page._onBindingCalled(event.payload, context); } async _onFileChooserOpened(payload: Protocol.Page.fileChooserOpenedPayload) { const {executionContextId, element} = payload; const context = this._contextIdToContext.get(executionContextId)!; const handle = context._createHandle(element).asElement()!; this._page._onFileChooserOpened(handle); } async _onWorkerCreated(event: Protocol.Page.workerCreatedPayload) { const workerId = event.workerId; const worker = new Worker(event.url); const workerSession = new FFSession(this._session._connection, 'worker', workerId, (message: any) => { this._session.send('Page.sendMessageToWorker', { frameId: event.frameId, workerId: workerId, message: JSON.stringify(message) }).catch(e => { workerSession.dispatchMessage({ id: message.id, method: '', params: {}, error: { message: e.message, data: undefined } }); }); }); this._workers.set(workerId, { session: workerSession, frameId: event.frameId }); this._page._addWorker(workerId, worker); workerSession.once('Runtime.executionContextCreated', event => { worker._createExecutionContext(new FFExecutionContext(workerSession, event.executionContextId)); }); workerSession.on('Runtime.console', event => { const {type, args, location} = event; const context = worker._existingExecutionContext!; this._page._addConsoleMessage(type, args.map(arg => context._createHandle(arg)), location); }); // Note: we receive worker exceptions directly from the page. } async _onWorkerDestroyed(event: Protocol.Page.workerDestroyedPayload) { const workerId = event.workerId; const worker = this._workers.get(workerId); if (!worker) return; worker.session.dispose(); this._workers.delete(workerId); this._page._removeWorker(workerId); } async _onDispatchMessageFromWorker(event: Protocol.Page.dispatchMessageFromWorkerPayload) { const worker = this._workers.get(event.workerId); if (!worker) return; worker.session.dispatchMessage(JSON.parse(event.message)); } async _onCrashed(event: Protocol.Page.crashedPayload) { this._page._didCrash(); } async exposeBinding(binding: PageBinding) { await this._session.send('Page.addBinding', { name: binding.name, script: binding.source }); } didClose() { this._session.dispose(); helper.removeEventListeners(this._eventListeners); this._networkManager.dispose(); this._page._didClose(); } async navigateFrame(frame: frames.Frame, url: string, referer: string | undefined): Promise { const response = await this._session.send('Page.navigate', { url, referer, frameId: frame._id }); return { newDocumentId: response.navigationId || undefined }; } async updateExtraHTTPHeaders(): Promise { await this._session.send('Network.setExtraHTTPHeaders', { headers: headersArray(this._page._state.extraHTTPHeaders || {}) }); } async setViewportSize(viewportSize: types.Size): Promise { assert(this._page._state.viewportSize === viewportSize); await this._session.send('Page.setViewportSize', { viewportSize: { width: viewportSize.width, height: viewportSize.height, }, }); } async setEmulateMedia(mediaType: types.MediaType | null, colorScheme: types.ColorScheme | null): Promise { await this._session.send('Page.setEmulatedMedia', { type: mediaType === null ? undefined : mediaType, colorScheme: colorScheme === null ? undefined : colorScheme }); } async updateRequestInterception(): Promise { await this._networkManager.setRequestInterception(this._page._needsRequestInterception()); } async setFileChooserIntercepted(enabled: boolean) { await this._session.send('Page.setInterceptFileChooserDialog', { enabled }).catch(e => {}); // target can be closed. } async opener(): Promise { if (!this._opener) return null; const result = await this._opener.pageOrError(); if (result instanceof Page && !result.isClosed()) return result; return null; } async reload(): Promise { await this._session.send('Page.reload', { frameId: this._page.mainFrame()._id }); } async goBack(): Promise { const { navigationId } = await this._session.send('Page.goBack', { frameId: this._page.mainFrame()._id }); return navigationId !== null; } async goForward(): Promise { const { navigationId } = await this._session.send('Page.goForward', { frameId: this._page.mainFrame()._id }); return navigationId !== null; } async evaluateOnNewDocument(source: string): Promise { await this._session.send('Page.addScriptToEvaluateOnNewDocument', { script: source }); } async closePage(runBeforeUnload: boolean): Promise { await this._session.send('Page.close', { runBeforeUnload }); } canScreenshotOutsideViewport(): boolean { return true; } async setBackgroundColor(color?: { r: number; g: number; b: number; a: number; }): Promise { if (color) throw new Error('Not implemented'); } async takeScreenshot(format: 'png' | 'jpeg', documentRect: types.Rect | undefined, viewportRect: types.Rect | undefined, quality: number | undefined): Promise { if (!documentRect) { const context = await this._page.mainFrame()._utilityContext(); const scrollOffset = await context.evaluateInternal(() => ({ x: window.scrollX, y: window.scrollY })); documentRect = { x: viewportRect!.x + scrollOffset.x, y: viewportRect!.y + scrollOffset.y, width: viewportRect!.width, height: viewportRect!.height, }; } // TODO: remove fullPage option from Page.screenshot. // TODO: remove Page.getBoundingBox method. const { data } = await this._session.send('Page.screenshot', { mimeType: ('image/' + format) as ('image/png' | 'image/jpeg'), clip: documentRect, }).catch(e => { if (e instanceof Error && e.message.includes('document.documentElement is null')) e.message = kScreenshotDuringNavigationError; throw e; }); return platform.Buffer.from(data, 'base64'); } async resetViewport(): Promise { assert(false, 'Should not be called'); } async getContentFrame(handle: dom.ElementHandle): Promise { const { contentFrameId } = await this._session.send('Page.describeNode', { frameId: handle._context.frame._id, objectId: toRemoteObject(handle).objectId!, }); if (!contentFrameId) return null; return this._page._frameManager.frame(contentFrameId); } async getOwnerFrame(handle: dom.ElementHandle): Promise { const { ownerFrameId } = await this._session.send('Page.describeNode', { frameId: handle._context.frame._id, objectId: toRemoteObject(handle).objectId!, }); return ownerFrameId || null; } isElementHandle(remoteObject: any): boolean { return remoteObject.subtype === 'node'; } async getBoundingBox(handle: dom.ElementHandle): Promise { const quads = await this.getContentQuads(handle); if (!quads || !quads.length) return null; let minX = Infinity; let maxX = -Infinity; let minY = Infinity; let maxY = -Infinity; for (const quad of quads) { for (const point of quad) { minX = Math.min(minX, point.x); maxX = Math.max(maxX, point.x); minY = Math.min(minY, point.y); maxY = Math.max(maxY, point.y); } } return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }; } async scrollRectIntoViewIfNeeded(handle: dom.ElementHandle, rect?: types.Rect): Promise { await this._session.send('Page.scrollIntoViewIfNeeded', { frameId: handle._context.frame._id, objectId: toRemoteObject(handle).objectId!, rect, }); } async getContentQuads(handle: dom.ElementHandle): Promise { const result = await this._session.send('Page.getContentQuads', { frameId: handle._context.frame._id, objectId: toRemoteObject(handle).objectId!, }).catch(debugError); if (!result) return null; return result.quads.map(quad => [ quad.p1, quad.p2, quad.p3, quad.p4 ]); } async layoutViewport(): Promise<{ width: number, height: number }> { return this._page.evaluate(() => ({ width: innerWidth, height: innerHeight })); } async setInputFiles(handle: dom.ElementHandle, files: types.FilePayload[]): Promise { await handle.evaluate(dom.setFileInputFunction, files); } async adoptElementHandle(handle: dom.ElementHandle, to: dom.FrameExecutionContext): Promise> { const result = await this._session.send('Page.adoptNode', { frameId: handle._context.frame._id, objectId: toRemoteObject(handle).objectId!, executionContextId: (to._delegate as FFExecutionContext)._executionContextId }); if (!result.remoteObject) throw new Error('Unable to adopt element handle from a different document'); return to._createHandle(result.remoteObject) as dom.ElementHandle; } async getAccessibilityTree(needle?: dom.ElementHandle) { return getAccessibilityTree(this._session, needle); } async inputActionEpilogue(): Promise { } async getFrameElement(frame: frames.Frame): Promise { const parent = frame.parentFrame(); if (!parent) throw new Error('Frame has been detached.'); const handles = await selectors._queryAll(parent, 'iframe', undefined, true /* allowUtilityContext */); const items = await Promise.all(handles.map(async handle => { const frame = await handle.contentFrame().catch(e => null); return { handle, frame }; })); const result = items.find(item => item.frame === frame); items.map(item => item === result ? Promise.resolve() : item.handle.dispose()); if (!result) throw new Error('Frame has been detached.'); return result.handle; } } function toRemoteObject(handle: dom.ElementHandle): Protocol.Runtime.RemoteObject { return handle._remoteObject; }