模板文字在查询选择器上不起作用

Question

我正在浏览一个下拉列表，我正在尝试选择各个选项。如果我尝试使用模板文字，则querySelector返回null。

这里有两个不同的查询，一个带有模板文字，另一个没有。我使用的是反向滴答，并且一切相同，但是第一个查询返回null，而第二个查询返回正确的值，即使在这种情况下，即使“ i” = 2。

const value = await self.page.evaluate(() => {
              return document.querySelector(`select option:nth-child(${i})`);
});

const value1 = await self.page.evaluate(() => {
              return document.querySelector(`select option:nth-child(2)`);           
});

// Structure
for (let i = 2; i < options.length; i++){

    if (options[i]....){
        const value = await self.page.evaluate((i) => {
             return document.querySelector(`select option:nth-child(${i})`);
            });

    }
}

为什么会这样？

Answer 1

由于您将函数作为参数传递，因此在调用函数时，变量i将超出范围。定义函数时应传递值：

const value = await self.page.evaluate((i) => {
    return document.querySelector(`select option:nth-child(${i})`);
});

Answer 2

链接：Puppeteer: pass variable in .evaluate()

您必须将另一个参数传递给page.evaluate以确保i在范围内

const value = await self.page.evaluate((i) => {
    return document.querySelector(`select option:nth-child(${i})`);
}, i);

Answer 3

以防万一，您似乎已经选择了很长一段路。

如果您打算将<option>的文本值提取到数组中，则可以使用Document.querySelectorAll()：

Document.querySelectorAll()

const [,...options] = [...document.querySelectorAll('select option')].map(option => option.textContent)

console.log(options)

p.s。如果需要每个选项的

<select>
  <option disabled selected>Select</option>
  <option>first option</option>
  <option>second option</option>
  <option>last option</option>
</select>

，您可以简单地将value替换为.textContent，如果DOM节点本身，只需跳过.value -part