Question

我需要从Puppeteer的下拉列表中进行选择-该选项并不重要，但需要提交表单。问题在于该下拉列表可能包含几个禁用的选项，我似乎无法排除这些选项。

这是为了在测试结帐中向购物车添加带有选项的项目。在选择正确的选项之前，“添加到购物车”按钮将被禁用。

由于选择的选项是动态的，并且每种产品都在变化，因此我无法知道启用了哪些选项并有库存。

我最初尝试选择第一项selectedindex = 1，然后还尝试使用各种方法来排除属性：

const option = (await page.$x(
    '//*[@id = "selectID"]/option[disabled=null]'
  ))[0];
const value = await (await option.getProperty('value')).jsonValue();
await page.select('#selectID', value);



<select name="Color" id="selectID" pseudoid="1" class="select" style="border: 1px solid lightgray; width: 190px;" selectedindex="0"><option value="-1">- Select -</option>

<option id="opt-0" outofstock="true" value="0" disabled="disabled" style="color: rgb(204, 204, 204);">Black[out of stock]</option>

<option id="opt-1" outofstock="true" value="1" disabled="disabled" style="color: rgb(204, 204, 204);">Blue[out of stock]</option>

<option id="opt-2" outofstock="true" value="2" disabled="disabled" style="color: rgb(204, 204, 204);">Red[out of stock]</option>

<option id="opt-3" outofstock="true" value="3" disabled="disabled" style="color: rgb(204, 204, 204);">Chocolate[out of stock]</option>

<option id="opt-4" value="4" style="color: black;">Green Camouflage</option>

<option id="opt-5" outofstock="true" value="5" disabled="disabled" style="color: rgb(204, 204, 204);">Pink Camouflage[out of stock]</option>

<option id="opt-6" value="6" style="color: black;">Arctic Blue Camouflage</option></select>

我想确定第一个有现货的选择。

我可以基于它具有的属性甚至是文本/值来选择任何选项，但是如果该选项没有文本或属性，我似乎无法做到这一点。

Answer 1

您可以使用evaluate函数来解决此问题：

const select = await page.$("#selectID");
await page.evaluate(select => {
  for(let option of select.options)
  {
    if(!option.disabled) {
      option.selected = true;
    }
  }
}, select);
const value = await page.evaluate(select => select.value, select); 
console.log(value);

这将在浏览器端完成工作，从而减少往返次数。

如果您想在Puppeteer一侧选择该项目，则可以返回该选项：

const select = await page.$("#selectID");
const valueToSelect = await page.evaluate(select => {
  for(let option of select.options)
  {
    if(!option.disabled && option.id) {
      return option.value;
    }
  }
}, select);
await page.select("#selectID", valueToSelect);
const value = await page.evaluate(select => select.value, select); 
console.log(value);

处理操纵up中的禁用选择选项

1 个答案: