如何检查 puppeteer 中是否存在选择器？

Question

在 puppeteer 中，我如何检查例如 #idProductType 是否存在，如果不存在，将 producttype 设置为“”？我尝试了很多很多东西，但它不起作用。

            const urls = [myurls, ...]
            const productsList = [];
            for (let i = 0; i < urls.length; i++) {
                const url = urls[i];

                await Promise.all([
                    page.goto(url),
                    page.waitForNavigation({ waitUntil: 'networkidle0' }),
                ]);

                let products = await page.evaluate(() => {

              //here i want to test if #idProductType exists do : 
                    let producttype = document.querySelector('#idProductType').innerText;
              //else 
                    let producttype = "";
              //and same thing for other selectors

                    let productsubtype = document.querySelector('#idProductSubType').innerText;
                    let product = document.querySelector('#idProduct').innerText;
                    let description = document.querySelector('td.js-orderModelVer').innerText;
                    let reference = document.querySelector('td.text-nowrap').innerText;
                    let prixpub = document.querySelector('td.text-nowrap.text-right.js-pricecol-msrp').innerText;
                    let dispo = document.querySelector('td.text-nowrap.text-center.js-pricecol-availability').innerText;
                    let retire = document.querySelector('td.js-retired-filler-cell').innerText;

                    let results = [];
                    results.push({
                        producttype: producttype,
                        productsubtype: productsubtype,
                        product: product,
                        description: description,
                        reference: reference,
                        prixpub: prixpub,
                        dispo: dispo,
                        retire: retire
                    })
                    return results
                })
                productsList.push(products);
            }

Answer 1

当无法找到匹配的元素时，Puppeteer 会抛出错误。

所以为了确认存在，

try {
  await page.$(selector)
  // Does exist
} catch {
  // Does not
}

或者为是否存在设置一个flag

const exists = await page.$eval(selector, () => true).catch(() => false)

Answer 2

如果未找到，则返回 innerText 或空字符串：

let productType = await page.evaluate(() => {
  let el = document.querySelector(".foo")
  return el ? el.innerText : ""
})

Answer 3

querySelector()null如果 DOM 中没有具有特定选择器的可用元素，则返回值

所以你可以编写简单的辅助函数：

const getInnerTextForSelector = (selector) => {
    const element = document.querySelector(selector);
    if (element)
        return element.innerText;
    return '';
};

并运行例如#idProductType选择器：

const producttype = getInnerTextForSelector('#idProductType');

或者您可以编写帮助程序来操作 puppeteer Page 和 ElementHandle：

const getElementForSelector = async (page, selector) => {
    return (await element.$(selector)) || undefined;
};

export const getInnerText = async (page, selector) => {
    const elementForSelector = await getElementForSelector(page, selector);
    try {
        if (elementForSelector)
            return (
                (await elementForSelector.evaluate(element => {
                    return element.innerText;
                })) || ''
            );
    } catch {
        return '';
    }
};

然后运行例如#idProductType选择器：

const producttype = await getInnerText(page, '#idProductType');

Answer 4

另一种可能更适合此类用例的方法：

let producttype

if ((await page.$('#idProductType')) !== null) {
  // do things with its content
  producttype = await page.evaluate(el => el.innerText, await page.$('#idProductType'))
} else {
  // do something else
  producttype = ''
}

Answer 5

您可以使用类似于document.querySelector(selector) 的page.$ (selector)

let producttype = (await page.$('#idProductType')) || "";