如何检查 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

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

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

Answer 2

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

所以你可以编写简单的助手 function：

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 3

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

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 4

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

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

Answer 5

Puppeteer 在找不到匹配的元素时抛出错误。

所以要确认存在，

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

或者让它是否存在一个标志

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

Answer 6

我想我找到了一种方法，我不知道这是否是最好的解决方案：

            var producttype = "";
            try {
                var producttype = document.querySelector('#idProductType').innerText;
            } catch (err) {
                console.log("The element didn't appear.")

Answer 7

如果元素是由 Javascript 生成的，最好使用超时：

let producttype;
try {
  await page.waitForSelector("#idProductType", {timeout: 1000});
  producttype = document.querySelector('#idProductType').innerText;
} catch (error) {
  producttype = "";
} 

Answer 8

这是我用来执行此操作的方法

这是我的做法

if(page.$(selector) !== null) {
  // selector was found in the page
} else {
  // selector not found
}

供参考，您可以查看此讨论

也在这里你可以看到它在行动