How to use createJSHandle method in Puppeteer

Best JavaScript code snippet using puppeteer

ExecutionContext.js

Source:ExecutionContext.js

...79        userGesture: true80      }).catch(rewriteError);81      if (exceptionDetails)82        throw new Error('Evaluation failed: ' + helper.getExceptionMessage(exceptionDetails));83      return createJSHandle(this, remoteObject);84    }85    if (typeof pageFunction !== 'function')86      throw new Error(`Expected to get |string| or |function| as the first argument, but got "${pageFunction}" instead.`);87    let functionText = pageFunction.toString();88    try {89      new Function('(' + functionText + ')');90    } catch (e1) {91      // This means we might have a function shorthand. Try another92      // time prefixing 'function '.93      if (functionText.startsWith('async '))94        functionText = 'async function ' + functionText.substring('async '.length);95      else96        functionText = 'function ' + functionText;97      try {98        new Function('(' + functionText + ')');99      } catch (e2) {100        // We tried hard to serialize, but there's a weird beast here.101        throw new Error('Passed function is not well-serializable!');102      }103    }104    let callFunctionOnPromise;105    try {106      callFunctionOnPromise = this._client.send('Runtime.callFunctionOn', {107        functionDeclaration: functionText + '\n' + suffix + '\n',108        executionContextId: this._contextId,109        arguments: args.map(convertArgument.bind(this)),110        returnByValue: false,111        awaitPromise: true,112        userGesture: true113      });114    } catch (err) {115      if (err instanceof TypeError && err.message === 'Converting circular structure to JSON')116        err.message += ' Are you passing a nested JSHandle?';117      throw err;118    }119    const {120      exceptionDetails,121      result: remoteObject122    } = await callFunctionOnPromise.catch(rewriteError);123    if (exceptionDetails)124      throw new Error('Evaluation failed: ' + helper.getExceptionMessage(exceptionDetails));125    return createJSHandle(this, remoteObject);126    /**127     * @param {*} arg128     * @return {*}129     * @this {ExecutionContext}130     */131    function convertArgument(arg) {132      if (typeof arg === 'bigint') // eslint-disable-line valid-typeof133        return {134          unserializableValue: `${arg.toString()}n`135        };136      if (Object.is(arg, -0))137        return {138          unserializableValue: '-0'139        };140      if (Object.is(arg, Infinity))141        return {142          unserializableValue: 'Infinity'143        };144      if (Object.is(arg, -Infinity))145        return {146          unserializableValue: '-Infinity'147        };148      if (Object.is(arg, NaN))149        return {150          unserializableValue: 'NaN'151        };152      const objectHandle = arg && (arg instanceof JSHandle) ? arg : null;153      if (objectHandle) {154        if (objectHandle._context !== this)155          throw new Error('JSHandles can be evaluated only in the context they were created!');156        if (objectHandle._disposed)157          throw new Error('JSHandle is disposed!');158        if (objectHandle._remoteObject.unserializableValue)159          return {160            unserializableValue: objectHandle._remoteObject.unserializableValue161          };162        if (!objectHandle._remoteObject.objectId)163          return {164            value: objectHandle._remoteObject.value165          };166        return {167          objectId: objectHandle._remoteObject.objectId168        };169      }170      return {171        value: arg172      };173    }174    /**175     * @param {!Error} error176     * @return {!Protocol.Runtime.evaluateReturnValue}177     */178    function rewriteError(error) {179      if (error.message.endsWith('Cannot find context with specified id'))180        throw new Error('Execution context was destroyed, most likely because of a navigation.');181      throw error;182    }183  }184  /**185   * @param {!JSHandle} prototypeHandle186   * @return {!Promise<!JSHandle>}187   */188  async queryObjects(prototypeHandle) {189    assert(!prototypeHandle._disposed, 'Prototype JSHandle is disposed!');190    assert(prototypeHandle._remoteObject.objectId, 'Prototype JSHandle must not be referencing primitive value');191    const response = await this._client.send('Runtime.queryObjects', {192      prototypeObjectId: prototypeHandle._remoteObject.objectId193    });194    return createJSHandle(this, response.objects);195  }196  /**197   * @param {Puppeteer.ElementHandle} elementHandle198   * @return {Promise<Puppeteer.ElementHandle>}199   */200  async _adoptElementHandle(elementHandle) {201    assert(elementHandle.executionContext() !== this, 'Cannot adopt handle that already belongs to this execution context');202    assert(this._world, 'Cannot adopt handle without DOMWorld');203    const nodeInfo = await this._client.send('DOM.describeNode', {204      objectId: elementHandle._remoteObject.objectId,205    });206    const {207      object208    } = await this._client.send('DOM.resolveNode', {209      backendNodeId: nodeInfo.node.backendNodeId,210      executionContextId: this._contextId,211    });212    return /** @type {Puppeteer.ElementHandle}*/ (createJSHandle(this, object));213  }214}215export {216  ExecutionContext,217  EVALUATION_SCRIPT_URL...

index.js

Source:index.js

...29  });30  await app.exposeFunction('$eval', async(backendNodeId, func, ...args) => {31    const page = await pagePromise;32    const {object} = await page._client.send('DOM.resolveNode', {backendNodeId});33    const handle = createJSHandle(await page.mainFrame().executionContext(), object);34    const dummy = () => void 0;35    dummy.toString = () => func;36    return await page.evaluate(dummy, handle, ...args);37  });38  await app.exposeFunction('keypress', async key => {39    const page = await pagePromise;40    await page.keyboard.press(key);41  });42  await app.exposeFunction('changeURL', async url => {43    const page = await pagePromise;44    await page.goto(prependHttp(url));45  });46  await app.exposeFunction('goForward', async url => {47    const page = await pagePromise;...

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch({headless: false});4  const page = await browser.newPage();5  await page.waitForSelector('input[title="Search"]');6  await page.type('input[title="Search"]', 'Puppeteer');7  await page.click('input[value="Google Search"]');8  await page.waitForSelector('div#search');9  const searchResults = await page.$eval('div#search', el => el.innerHTML);10  const handle = await page.evaluateHandle(() => document.body);11  await page.evaluate(body => body.style.background = 'red', handle);12  await page.screenshot({path: 'screenshot.png'});13  await browser.close();14})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  const handle = await page.evaluateHandle(() => document.body);6  await browser.close();7})();8const puppeteer = require('puppeteer');9(async () => {10  const browser = await puppeteer.launch();11  const page = await browser.newPage();12  const handle = await page.evaluateHandle(() => document.body);13  await browser.close();14})();15const puppeteer = require('puppeteer');16(async () => {17  const browser = await puppeteer.launch();18  const page = await browser.newPage();19  const handle = await page.evaluateHandle(() => document.body);20  await browser.close();21})();22const puppeteer = require('puppeteer');23(async () => {24  const browser = await puppeteer.launch();25  const page = await browser.newPage();26  const handle = await page.evaluateHandle(() => document.body);27  await browser.close();28})();29const puppeteer = require('puppeteer');30(async () => {31  const browser = await puppeteer.launch();32  const page = await browser.newPage();33  const handle = await page.evaluateHandle(() => document.body);34  await browser.close();35})();36const puppeteer = require('puppeteer');37(async () => {38  const browser = await puppeteer.launch();39  const page = await browser.newPage();40  const handle = await page.evaluateHandle(() => document.body);

Using AI Code Generation

1const puppeteer = require('puppeteer');2const fs = require('fs');3(async () => {4  const browser = await puppeteer.launch({ headless: false });5  const page = await browser.newPage();6  const aHandle = await page.evaluateHandle(() => document.body);7  const bHandle = await page.evaluateHandle(body => body, aHandle);8  const cHandle = await page.evaluateHandle(body => body, bHandle);9  const dHandle = await page.evaluateHandle(body => body, cHandle);10  const eHandle = await page.evaluateHandle(body => body, dHandle);11  const fHandle = await page.evaluateHandle(body => body, eHandle);12  const gHandle = await page.evaluateHandle(body => body, fHandle);13  const hHandle = await page.evaluateHandle(body => body, gHandle);14  const iHandle = await page.evaluateHandle(body => body, hHandle);15  const jHandle = await page.evaluateHandle(body => body, iHandle);16  const kHandle = await page.evaluateHandle(body => body, jHandle);17  const lHandle = await page.evaluateHandle(body => body, kHandle);18  const mHandle = await page.evaluateHandle(body => body, lHandle);19  const nHandle = await page.evaluateHandle(body => body, mHandle);20  const oHandle = await page.evaluateHandle(body => body, nHandle);21  const pHandle = await page.evaluateHandle(body => body, oHandle);

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  const element = await page.$('body');6  const handle = await element.asElement().createJSHandle();7  console.log(await handle.jsonValue());8  await browser.close();9})();10const puppeteer = require('puppeteer');11(async () => {12  const browser = await puppeteer.launch();13  const page = await browser.newPage();14  const element = await page.$('body');15  const handle = await element.asElement().evaluateHandle(() => document.body);16  console.log(await handle.jsonValue());17  await browser.close();18})();19const puppeteer = require('puppeteer');20(async () => {21  const browser = await puppeteer.launch();22  const page = await browser.newPage();23  const element = await page.$('body');24  const handle = await element.asElement().getProperty('innerHTML');25  console.log(await handle.jsonValue());26  await browser.close();27})();28const puppeteer = require('puppeteer');29(async () => {30  const browser = await puppeteer.launch();31  const page = await browser.newPage();32  const element = await page.$('body');33  const handle = await element.asElement().evaluate(element => element.innerHTML);34  console.log(handle);35  await browser.close();36})();37const puppeteer = require('puppeteer');38(async () => {39  const browser = await puppeteer.launch();40  const page = await browser.newPage();41  const handle = await page.$$eval('body', element => element[0].innerHTML);42  console.log(handle);43  await browser.close();44})();

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.