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

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);

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

这里是产品尺寸按钮 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

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

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

而不是

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

Answer 2

你可以这样试试

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)

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

How to click button based on user input?

javascript

css

webautomation

node.js

puppeteer