如何检查jhandle是否从页面返回.evaluateHandle为空/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');
}

我得到了这个代码，需要得到一个输入字段和类型'1'，如果输入的值是空的。当我在浏览器中运行它时，控制台记录'返回null'，这是预期的，因为输入值是空的。

但是当检查返回的输入是否为null时，它记录'input is fill '。之后会抛出一个错误，说"不能读取属性值"空的。这意味着输入实际上是空的。所以我想我只是没有使用正确的检查来查看这个输入对象是否为空。

是否有其他方法来检查从page返回的对象。evaluateHandle为空/null?

Answer 1

1. page.evaluateHandle()总是为页内JS值返回jhandle。当该值为null时，jhandle的值本身不为null。

2. 当您为page.evaluate()提供jhandle时，它会自动转换为值本身，所以这就是为什么page.evaluate((i) => i.value, input);中的await input !== null和'cannot read property "value" of null'都可以为真。

检查是否为空，使用page.evaluate()返回的值-或者在page.evaluateHandle()之后使用jsHandle.jsonValue():

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(); }