Javascript 木偶演员：选择器中的逃逸方括号

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

i、 e

然而，我不断得到：

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

我用

\

对选择器中的元素进行了转义，但这不起作用

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

双反斜杠转义也不起作用。i、 e:

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

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

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

请选择
苹果

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

使用编码数据进行转义 如果您甚至尝试在浏览器上执行

document.querySelector（“#fruit[0]”）

，您将得到相同的错误。转义不起作用，因为当木偶演员读取它时，它已经被解析，并且没有相同的转义值。几乎没有办法逃脱他们

假设我们有这样一个元素

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

以及用于测试的木偶演员代码

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

const puppeter=require（“木偶演员”）；
功能设置SelectByText（选择器，文本）{
//按顺序循环//
const ele=document.querySelector（选择器）；
控制台日志（ele）；
对于（设ii=0；ii{
console.log（“打开浏览器”）；
const page=wait browser.newPage（）；
控制台日志（“前往现场”）；
等待页面。转到（“http://0.0.0.0:8080“”；//为测试而创建的临时网站
等待page.evaluate（setSelectByText，“#sample\\[1\\]”，“apple”）；//我们可以反复使用它，而不需要创建单独的函数，只需将它们作为参数传递即可
等待page.screenshot（{path:“test.png”}）；
等待浏览器关闭（）；
});

---

您可能引用的ID不正确

如果在创建HTML元素时以编程方式生成ID（即

水果[0]

，

水果[1]

），则存储的是值，而不是引用

示例：我有一个数组

fruit=[apple，banana]

，我创建了一个元素…

点击我

如果我想选择该按钮，那么我需要

页面。选择（“#苹果”）

而不是

页面。选择（“#水果[0]”）

使用

[id=“水果[0]”]

： 您可以在引用元素的

id

属性时使用CSS：

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

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

---

我刚试过这个。不走运：（.我得到了完全相同的错误：（节点：4995）未处理PromisejectionWarning:错误：评估失败：DomeException:未能对“文档”执行“querySelector”：“水果[0]'不是一个有效的选择器。在木偶师的评估中，脚本：1:33Ah，等等，我记得这个问题，让我尽快得到一个可靠的答复。@kashiB现在我添加了更多的答案。：）Peace。关于backticks的部分有误导性：

“#水果[0]”

和backticks版本一样有效，如果你担心奇怪和不寻常的选择器，当您尝试匹配

输入[value=“${foo}”]

时，后者将中断。关于文本匹配，考虑到我们正在讨论的是木偶演员，它将比使用您自己的函数更有效和可靠。请参阅。无需担心。我看到您在示例中使用了引号，因此它应该按照您设置的方式存储字符串。但这为什么也会失败：

wait page.waitFor（“#应答列表[0]”）

注意，这取决于创建元素的方式。如果我说

document.body.innerHTML=“Click me”

，则ID将是文本字符串

fruit[0]

，而不是

fruit

数组的第一个元素，正确的选择器将是

#fruit\[0\]

。

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

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

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

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