const {assert, debugError} = require('./helper'); const path = require('path'); class JSHandle { /** * @param {!ExecutionContext} context * @param {*} payload */ constructor(context, payload) { this._context = context; this._session = this._context._session; this._executionContextId = this._context._executionContextId; this._objectId = payload.objectId; this._type = payload.type; this._subtype = payload.subtype; this._disposed = false; this._protocolValue = { unserializableValue: payload.unserializableValue, value: payload.value, objectId: payload.objectId, }; } /** * @return {ExecutionContext} */ executionContext() { return this._context; } /** * @override * @return {string} */ toString() { if (this._objectId) return 'JSHandle@' + (this._subtype || this._type); return 'JSHandle:' + this._deserializeValue(this._protocolValue); } /** * @param {string} propertyName * @return {!Promise} */ async getProperty(propertyName) { const objectHandle = await this._context.evaluateHandle((object, propertyName) => { const result = {__proto__: null}; result[propertyName] = object[propertyName]; return result; }, this, propertyName); const properties = await objectHandle.getProperties(); const result = properties.get(propertyName) || null; await objectHandle.dispose(); return result; } /** * @return {!Promise>} */ async getProperties() { const response = await this._session.send('Page.getObjectProperties', { executionContextId: this._executionContextId, objectId: this._objectId, }); const result = new Map(); for (const property of response.properties) { result.set(property.name, createHandle(this._context, property.value, null)); } return result; } _deserializeValue({unserializableValue, value}) { if (unserializableValue === 'Infinity') return Infinity; if (unserializableValue === '-Infinity') return -Infinity; if (unserializableValue === '-0') return -0; if (unserializableValue === 'NaN') return NaN; return value; } async jsonValue() { if (!this._objectId) return this._deserializeValue(this._protocolValue); const simpleValue = await this._session.send('Page.evaluate', { executionContextId: this._executionContextId, returnByValue: true, functionText: (e => e).toString(), args: [this._protocolValue], }); return this._deserializeValue(simpleValue.result); } /** * @return {?ElementHandle} */ asElement() { return null; } async dispose() { if (!this._objectId) return; this._disposed = true; await this._session.send('Page.disposeObject', { executionContextId: this._executionContextId, objectId: this._objectId, }); } } class ElementHandle extends JSHandle { /** * @param {Frame} frame * @param {ExecutionContext} context * @param {*} payload */ constructor(frame, context, payload) { super(context, payload); this._frame = frame; this._frameId = frame._frameId; } /** * @return {?Frame} */ async contentFrame() { const {frameId} = await this._session.send('Page.contentFrame', { frameId: this._frameId, objectId: this._objectId, }); if (!frameId) return null; const frame = this._frame._frameManager.frame(frameId); return frame; } /** * @override * @return {!ElementHandle} */ asElement() { return this; } /** * @return {!Promise<{width: number, height: number, x: number, y: number}>} */ async boundingBox() { return await this._session.send('Page.getBoundingBox', { frameId: this._frameId, objectId: this._objectId, }); } /** * @param {{encoding?: string, path?: string}} options */ async screenshot(options = {}) { const clip = await this._session.send('Page.getBoundingBox', { frameId: this._frameId, objectId: this._objectId, }); if (!clip) throw new Error('Node is either not visible or not an HTMLElement'); assert(clip.width, 'Node has 0 width.'); assert(clip.height, 'Node has 0 height.'); await this._scrollIntoViewIfNeeded(); return await this._frame._page.screenshot(Object.assign({}, options, { clip: { x: clip.x, y: clip.y, width: clip.width, height: clip.height, }, })); } /** * @returns {!Promise} */ isIntersectingViewport() { return this._frame.evaluate(async element => { const visibleRatio = await new Promise(resolve => { const observer = new IntersectionObserver(entries => { resolve(entries[0].intersectionRatio); observer.disconnect(); }); observer.observe(element); // Firefox doesn't call IntersectionObserver callback unless // there are rafs. requestAnimationFrame(() => {}); }); return visibleRatio > 0; }, this); } /** * @param {string} selector * @return {!Promise} */ async $(selector) { const handle = await this._frame.evaluateHandle( (element, selector) => element.querySelector(selector), this, selector ); const element = handle.asElement(); if (element) return element; await handle.dispose(); return null; } /** * @param {string} selector * @return {!Promise>} */ async $$(selector) { const arrayHandle = await this._frame.evaluateHandle( (element, selector) => element.querySelectorAll(selector), this, selector ); const properties = await arrayHandle.getProperties(); await arrayHandle.dispose(); const result = []; for (const property of properties.values()) { const elementHandle = property.asElement(); if (elementHandle) result.push(elementHandle); } return result; } /** * @param {string} selector * @param {Function|String} pageFunction * @param {!Array<*>} args * @return {!Promise<(!Object|undefined)>} */ async $eval(selector, pageFunction, ...args) { const elementHandle = await this.$(selector); if (!elementHandle) throw new Error(`Error: failed to find element matching selector "${selector}"`); const result = await this._frame.evaluate(pageFunction, elementHandle, ...args); await elementHandle.dispose(); return result; } /** * @param {string} selector * @param {Function|String} pageFunction * @param {!Array<*>} args * @return {!Promise<(!Object|undefined)>} */ async $$eval(selector, pageFunction, ...args) { const arrayHandle = await this._frame.evaluateHandle( (element, selector) => Array.from(element.querySelectorAll(selector)), this, selector ); const result = await this._frame.evaluate(pageFunction, arrayHandle, ...args); await arrayHandle.dispose(); return result; } /** * @param {string} expression * @return {!Promise>} */ async $x(expression) { const arrayHandle = await this._frame.evaluateHandle( (element, expression) => { const document = element.ownerDocument || element; const iterator = document.evaluate(expression, element, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE); const array = []; let item; while ((item = iterator.iterateNext())) array.push(item); return array; }, this, expression ); const properties = await arrayHandle.getProperties(); await arrayHandle.dispose(); const result = []; for (const property of properties.values()) { const elementHandle = property.asElement(); if (elementHandle) result.push(elementHandle); } return result; } async _scrollIntoViewIfNeeded() { const error = await this._frame.evaluate(async(element) => { if (!element.isConnected) return 'Node is detached from document'; if (element.nodeType !== Node.ELEMENT_NODE) return 'Node is not of type HTMLElement'; const visibleRatio = await new Promise(resolve => { const observer = new IntersectionObserver(entries => { resolve(entries[0].intersectionRatio); observer.disconnect(); }); observer.observe(element); // Firefox doesn't call IntersectionObserver callback unless // there are rafs. requestAnimationFrame(() => {}); }); if (visibleRatio !== 1.0) element.scrollIntoView({block: 'center', inline: 'center', behavior: 'instant'}); return false; }, this); if (error) throw new Error(error); } /** * @param {!{delay?: number, button?: string, clickCount?: number}=} options */ async click(options) { await this._scrollIntoViewIfNeeded(); const {x, y} = await this._clickablePoint(); await this._frame._page.mouse.click(x, y, options); } /** * @param {!Array} filePaths */ async uploadFile(...filePaths) { const files = filePaths.map(filePath => path.resolve(filePath)); await this._session.send('Page.setFileInputFiles', { frameId: this._frameId, objectId: this._objectId, files, }); } async hover() { await this._scrollIntoViewIfNeeded(); const {x, y} = await this._clickablePoint(); await this._frame._page.mouse.move(x, y); } async focus() { await this._frame.evaluate(element => element.focus(), this); } /** * @param {string} text * @param {{delay: (number|undefined)}=} options */ async type(text, options) { await this.focus(); await this._frame._page.keyboard.type(text, options); } /** * @param {string} key * @param {!{delay?: number}=} options */ async press(key, options) { await this.focus(); await this._frame._page.keyboard.press(key, options); } /** * @return {!Promise} */ async _clickablePoint() { const result = await this._session.send('Page.getContentQuads', { frameId: this._frameId, objectId: this._objectId, }).catch(debugError); if (!result || !result.quads.length) throw new Error('Node is either not visible or not an HTMLElement'); // Filter out quads that have too small area to click into. const quads = result.quads.filter(quad => computeQuadArea(quad) > 1); if (!quads.length) throw new Error('Node is either not visible or not an HTMLElement'); // Return the middle point of the first quad. return computeQuadCenter(quads[0]); } } function createHandle(context, result, exceptionDetails) { const frame = context.frame(); if (exceptionDetails) { if (exceptionDetails.value) throw new Error('Evaluation failed: ' + JSON.stringify(exceptionDetails.value)); else throw new Error('Evaluation failed: ' + exceptionDetails.text + '\n' + exceptionDetails.stack); } return result.subtype === 'node' ? new ElementHandle(frame, context, result) : new JSHandle(context, result); } function computeQuadArea(quad) { // Compute sum of all directed areas of adjacent triangles // https://en.wikipedia.org/wiki/Polygon#Simple_polygons let area = 0; const points = [quad.p1, quad.p2, quad.p3, quad.p4]; for (let i = 0; i < points.length; ++i) { const p1 = points[i]; const p2 = points[(i + 1) % points.length]; area += (p1.x * p2.y - p2.x * p1.y) / 2; } return Math.abs(area); } function computeQuadCenter(quad) { let x = 0, y = 0; for (const point of [quad.p1, quad.p2, quad.p3, quad.p4]) { x += point.x; y += point.y; } return {x: x / 4, y: y / 4}; } module.exports = {JSHandle, ElementHandle, createHandle};