node.js - How to check if jsHandle returned from page.evaluateHandle is empty/null?

Question

setversionNumber = async (index, page) => {
const input = await page.evaluateHandle((i) => {
    const versionView = document.getElementsByClassName("mx-dataview mx-name-dataView9")[0]; 
    const inputfield =  versionView.getElementsByTagName('input')[i]; 
    if (inputfield.value === null || inputfield.value === '' ) {
            console.info('returning input');
            return inputfield;
        } 
    console.info('returning null');
    return null;
}, index);

if (await input !== null) {
    console.info('input is filled');
    const content = await page.evaluate((i) => i.value, input);
    console.log(content);
    await input.type('1');
} else {
    console.info('input is empty');
}

I got this code which needs to get an input field and type '1' if the input's value is empty. When i run it in the browser the console logs 'retruning null' which is expected, because the inputs value is empty.

But when checking if the returned input is actually null, it logs that the 'input is filled' . And after that an error is thrown, saying 'cannot read property "value" of null'. Which means input is actually null. So i think i'm just not using the right check to see if this input object is actaully null.

Is there an other way to check if a returned object from page.evaluateHandle is empty/null?

question from:https://stackoverflow.com/questions/65887292/how-to-check-if-jshandle-returned-from-page-evaluatehandle-is-empty-null

Answer 1

1. page.evaluateHandle() alwais returns jsHandle for in-page JS value. When this value is null, jsHandle for this value is not null itself.

2. When you provide jsHandle for page.evaluate() it is automatically converted into the value itself, so this is why await input !== null and 'cannot read property "value" of null' from page.evaluate((i) => i.value, input); can be both true.

To check for null, use the value returned by page.evaluate() — or use jsHandle.jsonValue() after page.evaluateHandle():

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch(/* { headless: false, defaultViewport: null } */);

try {
  const [page] = await browser.pages();

  await page.goto('https://example.org/');

  const data = await page.evaluate(() => null);
  console.log(data === null); // true

  const dataHandle = await page.evaluateHandle(() => null);
  console.log(dataHandle === null); // false
  console.log(await dataHandle.jsonValue() === null); // true

} catch(err) { console.error(err); } finally { await browser.close(); }