木偶：选择器中的方括号逸出

Question

我需要选择ID包含方括号的元素。

即

#element[0]

但是，我不断得到：

错误：找不到与选择器“ element [0]”匹配的元素

我已经用\\逃避了选择器中的元素，但这是行不通的。

page.select("#fruit\[0\]", "apples")

双反斜杠转义符也不起作用。 即：

page.select("#fruit\\[0\\]", "apples")

更新：我正在尝试选择的元素：

<select id="fruit[0]">
  <option>Please make a selection</option>
  <option>apples</option>
</select>

注意：即使我尝试对上面的查询使用page.waitFor方法，我也会收到相同的错误。

Answer 1

使用[id="fruit[0]"] ：

您可以使用CSS 属性选择器来引用元素的id属性：

await page.waitFor( '[id="fruit[0]"]' );

await page.select( '[id="fruit[0]"]', 'apples' );

Answer 2

使用编码数据转义

如果您甚至尝试在浏览器上执行document.querySelector('#fruit[0]') ，也会遇到相同的错误。 转义不起作用，因为到伪造者读取它时，它已经被解析并且没有相同的转义值。 逃脱它们的几种方法。

说我们有一个这样的元素，

<a href="/" id="sample[112]">Bar</a>

现在，如果您想使用vanila JS，可以尝试以下方法，

内容如下：

< document.querySelector(CSS.escape('#sample[112]'))
> null

< document.querySelector('#sample[112]')
> Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#sample[112]' is not a valid selector.

< document.querySelector('#sample\5b 112\5d')
> ncaught DOMException: Failed to execute 'querySelector' on 'Document': '#sampleb 112d' is not a valid selector.

< document.querySelector('#sample\\5b 112\\5d')
> <a href="/" id="sample[112]">Bar</a>

如您在上面看到的，左括号为5b ，右括号为5d ，我们甚至不得不转义该5d并不得不留出空间，以便浏览器可以解析它。

您应该尝试上述代码，然后找到适合您网站的代码。

真实案例脚本

面对现实，您的目标网站没有任何选择的价值。 最好的方法是通过文本选择，从此答案中无耻地复制。

另外，我可以对它进行两次转义并获取数据，而无需对其进行编码。 毕竟，nodeJS与浏览器控制台不同，并且在使用脚本时，所有动作都将有所不同。

用于HTML的源代码，

<select id="sample[1]"><option>mango</option><option>apple</option></select>

还有用于测试的操纵up代码，

const puppeteer = require("puppeteer");

function setSelectByText(selector, text) {
  // Loop through sequentially//
  const ele = document.querySelector(selector);
  console.log(ele);

  for (let ii = 0; ii < ele.length; ii++) {
    if (ele.options[ii].text == text) {
      // Found!
      ele.options[ii].selected = true;
      return true;
    }
  }
  return false;
}

puppeteer.launch().then(async browser => {
  console.log("Opening browser");
  const page = await browser.newPage();

  console.log("Going to site");
  await page.goto("http://0.0.0.0:8080"); // temporary website created for testing

  await page.evaluate(setSelectByText, "#sample\\[1\\]", "apple"); // we can use this over and over, without creating a separate function, just passing them as arguments

  await page.screenshot({ path: "test.png" });

  await browser.close();
});

Answer 3

您可能未正确引用ID。

如果您在创建HTML元素（例如fruit[0] ， fruit[1] ）时以编程方式生成ID，则存储的是值而不是引用。

示例：我有一个数组fruit = [apple, banana]并创建了一个元素... <button id=fruit[0]>Click me</button>如果要选择该按钮，则需要page.select('#apple') 代替 page.select('#fruit[0]')