Puppeteer - 按类删除元素

Question

我尝试按类名删除元素,但它不起作用.

这是我使用的代码:

await page.screenshot({path: 'pic.png'});   //for testing purposes
    let div_selector_to_remove= ".xj7.Kwh5n";
    var thingToRemove = document.querySelectorAll(div_selector_to_remove);
    var number_of_elements = thingToRemove.length;
    for (var i = 0; i < number_of_elements.length; i++) {
        thingToRemove[i].parentNode.removeChild(thingToRemove);
    }

浏览器加载,我得到加载元素的屏幕截图.什么都没发生.元素仍然存在

Answer 1

如何在document.querySelector不写入内容的情况下运行page.evaluate？如果有可能知道.否则这是我的答案版本

await page.goto('<url_here>');
let div_selector_to_remove= ".xj7.Kwh5n";
await page.evaluate((sel) => {
    var elements = document.querySelectorAll(sel);
    for(var i=0; i< elements.length; i++){
        elements[i].parentNode.removeChild(elements[i]);
    }
}, div_selector_to_remove)

Answer 2

也许更容易...

删除第一个匹配的节点selector：

await page.$eval(selector, el => el.remove());

删除所有匹配的节点selector：

await page.$$eval(selector, els => els.forEach(el => el.remove()));

等待选择器，然后将其删除：

const el = await page.waitForSelector(selector);
await el.evaluate(el => el.remove());

如果由于某种原因您需要在控制台浏览器中选择并删除：

const selector = ".foo";

// single
await page.evaluate(`
  document.querySelector("${selector}").remove()
`);

// multiple
await page.evaluate(selector =>
  document.querySelectorAll(selector).forEach(el => el.remove()),
  selector
);

您也可以将选择器硬编码到eval字符串/函数中，但我认为以两种不同的方式显示它来自变量会很有用，以防万一。

与 Puppeteer 中的任何内容一样，了解哪些代码在 Node/Puppeteer-land 中运行以及哪些代码在浏览器/控制台-land 中运行非常重要。经验法则是：如果它是回调或字符串化函数体，则它在浏览器中，您只能使用浏览器/DOM 概念，如HTMLElement.remove()、window和document，否则它在 Node 中运行，您只能调用 Puppeteer API 函数。在 OP 的例子中，看起来我们不在 Node-land 的回调之外，所以这document不是一个东西，只是 Puppeteerpage.函数。