如何根据用户输入单击按钮？

Question

例如网站：https://www.jdsports.com.sg/product/white-adidas-ultraboost-21-primeblue-womens/16140531_jdsportssg/

const size = prompt('Size? ')
page.evaluate(size => {
const elements = [...document.querySelectorAll('btn btn-default  ')];
const targetElement = elements.find(e => e.innerText.includes(size));
targetElement && targetElement.click();
}, size);

我正在使用 puppeteer。 目前，我正在尝试根据用户输入自动点击尺寸。以上是我目前的代码，但它不起作用。

这是产品尺寸按钮 html 的方式：

<button data-e2e="pdp-productDetails-size" type="button" class="btn btn-default  " data-price="SGD 260.00" data-sku="16140531_jdsportssg.2910757" data-upc="4064036981142" data-fulfilment-infopage="" data-pool=" 1 " data-stockcheckeravailable="0" data-stock="1" title="Select Size 4">
            4
    </button>

所以我试图根据文本单击按钮。提前谢谢！

Answer 1

你可以这样试试。

await page.evaluate(size => {
  Array.from(document.getElementsByClassName('btn btn-default')).filter(e => {
    return e.innerText == size
  }).forEach(element => {
    if (element) element.click();
  });
}, size);

顺便说一句，如果您要使用 e.innerText.includes(size) 并且有人在提示符中输入了 5 号，它将检查选择器中是否有任何包含 5 号的内容。

例如：

有 4、4.5、5、5.5、6、6.5 码，我选择 5 码。

e.innerText.includes('5') 将选择其中包含数字 5 的任何一个，因此它甚至可以选择 4.5 的大小。

你可以试试。

await page.evaluate(size => {
  const elements = [...document.querySelectorAll('#itemOptions .options .btn')];
  const targetElement = elements.find(e => e.innerText == size);
}, size);

你也可以用。

await page.evaluate(size => {
  Array.from(document.querySelectorAll('#itemOptions .options .btn')).filter(e => e.innerText == size).forEach(e => e.click());
}, size)

Answer 2

类选择器需要点而不需要空格。试试

const elements = [...document.querySelectorAll('.btn.btn-default')];

而不是

const elements = [...document.querySelectorAll('btn btn-default  ')];