如何抓取按钮类元素并使用puppeteer和nodejs进行收集

Question

我正在开发一款应用程序，该应用程序在某种意义上自动检查您的耐克订单，收集的数据通过discord嵌入发送回用户。

我已经差不多完成了，但有一件事我有意见。我无法抓取耐克用来标记跟踪号码的按钮类元素。有人有什么想法吗？我已经附上了相关元素和我当前的代码的ss。

await page.click(".nds-btn.css-1cxnzw1.css-xxsqkh.ex41m6f0.primary", { delay: 2000 });
/*
await page.waitForSelector(".sc-cendjg-0.u2kmlc-0.eIyaJU.iyTHDa.u2kmlc-0.sc-17uic18-0.u2kmlc-0.ggum8u-1.cFnOmG.ldmkHq-0.iumkEx");
await page.click(".sc-196beyx-0.iumkEx");
let trackingInfo = await page.evaluate(() => {
let trackingTag = document.querySelectorAll(".sc-196beyx-0.iumkEx");
let tracking = [];
trackingTag.forEach((tag) => {
tracking.push(tag.innerText)
})
return tracking;
});
console.log('Tracking number has been collected!')*/```[enter image description here][1]

[1]: https://i.stack.imgur.com/rzdgS.jpg

Answer 1

这里有一个例子，说明如果选择器是动态生成的，我如何等待基于coords而不是选择器的元素。

const wait = ms => new Promise(r => setTimeout(r, ms));
const waitForButton = async (page, coords) => {
let cntr = 0;
const LIMIT = 10;
const WAIT_INTERVAL_MS = 500;
while (cntr++ < LIMIT) {
const buttonClass = await page.evaluate((coords) => {
const {xMin, xMax, yMin, yMax} = coords;
const buttonFittingCoords = [...document.querySelectorAll("button")].find(btn => {
const { x, y } = btn.getBoundingClientRect();
return (
( x < xMax ) &&
( x > xMin ) &&
( y < yMax ) &&
( y > yMin )
)
});
return buttonFittingCoords?.className;
}, coords);
if (buttonClass) return buttonClass;
await wait(WAIT_INTERVAL_MS);
}
console.log("Could not find button after "+LIMIT+" attempts waiting " + WAIT_INTERVAL_MS);
return undefined;
};
(async () => {
/* 
got your browser and page and whatnot
*/
const buttonClassName = await waitForButton(page, {
xMin: 6, 
xMax: 9, 
yMin: 4, 
yMax: 13
});
if (!buttonClassName) throw new Error("button couldn't be found!!!");
const selector = "." + buttonClassName.replace(/ /g, ".");
await page.click(selector);
})().catch(err => console.log(err.message));