如何在没有任何 class、id ……分配给它的情况下使用 Puppeteer 单击网站上的按钮？

Question

所以我想点击一个网站上的按钮。该按钮没有 id，class，...所以我应该找到一种方法来单击按钮上的名称。在此示例中，我应该单击名称“Supreme®/The North Face® 皮革单肩包

这是我在 Node.js

中的代码

const puppeteer = require('puppeteer');

let scrape = async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://www.supremenewyork.com/shop/all/bags');
await page.click(...);
browser.close();
return result;
};

这是我要点击的元素：

<a class="name-link" href="/shop/bags/a9cz4te2r/rsth86fbl">Supreme®/The 
North Face® Leather Shoulder Bag</a>

Answer 1

如果我没看错，下面的代码应该可以让你点击 link:

const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://www.supremenewyork.com/shop/all/bags');
await page.click("a[href$='a05ivugj2']");
await browser.close();
})();

Answer 2

这是一种收集该数据的方法。首先在您的浏览器控制台上尝试这些。

[...document.querySelectorAll('a.name-link')]
.filter(element => 
  element.innerText.includes('Supreme®/The North Face® Leather Shoulder Bag')
)

这是怎么回事？

document.querySelectorAll 查找具有该选择器的所有元素。
.filter 将 return 匹配查询的结果。
.includes 将 return 包含给定字符串的数据。

如果 a.name-link 不起作用，则寻找 a，如果那不起作用，则找到父项并使用它。

一旦您在浏览器中获得该元素，您就可以将其应用到您的代码中，点击它等。

用法：

您可以使用page.evaluate进行筛选和点击。

const query = "Supreme®/The North Face® Leather Shoulder Bag";

page.evaluate(query => {
  const elements = [...document.querySelectorAll('a.name-link')];

  // Either use .find or .filter, comment one of these
  // find element with find
  const targetElement = elements.find(e => e.innerText.includes(query));

  // OR, find element with filter
  // const targetElement = elements.filter(e => e.innerText.includes(query))[0];

  // make sure the element exists, and only then click it
  targetElement && targetElement.click();
}, query)

Answer 3

以下函数将单击与特定文本匹配的第一个元素：

const clickText = text => {
    return page.evaluate(text => [...document.querySelectorAll('*')].find(e => e.textContent.trim() === text).click(), text);
};

您可以使用以下方法在 Puppeteer 脚本中使用该函数：

await clickText('Supreme®/The North Face® Leather Shoulder Bag');

如何在没有任何 class、id ……分配给它的情况下使用 Puppeteer 单击网站上的按钮？

How to click a button on a website using Puppeteer without any class, id ,... assigned to it?

html

automation

node.js

web-scraping

puppeteer

用法：