无法在“文档”上执行“querySelector”：“#traveller[36350015][date_of_birth(3i)]”不是有效的选择器答案

【问题标题】：Failed to execute 'querySelector' on 'Document': '#traveller[36350015][date_of_birth(3i)]' is not a valid selector无法在“文档”上执行“querySelector”：“#traveller[36350015][date_of_birth(3i)]”不是有效的选择器
【发布时间】：2018-07-19 14:04:27
【问题描述】：

我正在使用 puppeteer 并遇到错误

无法对“文档”执行“querySelector”：“#traveller[36350015][date_of_birth(3i)]”不是有效的选择器

从下拉列表中选择年龄时。 Html代码在这里

<select id="traveller[36350015][date_of_birth(3i)]" name="traveller[36350015][date_of_birth(3i)]"><option value="0" selected="selected">...</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
</select>`

我每次都尝试过以下但同样的错误

await page.select("#traveller[36350015][date_of_birth(3i)]", `${day}`);

await page.evaluate((day) => {
    {

        document.querySelector('#traveller*> option:nth-child(1)').selected = true;
    }
}, day);

我猜这个id有问题。

【问题讨论】：

标签： javascript css-selectors puppeteer

【解决方案1】：

方括号、括号和数字都需要用反斜杠转义，以免被视为特殊字符。

由于您的 ID 中有 这么多 个，将它们全部转义是多余的，并且会导致选择器看起来非常混乱，因此我建议改用属性选择器：

await page.select("[id='traveller[36350015][date_of_birth(3i)]']", `${day}`);

【讨论】：

我已经使用上面的选择器做到了。谢谢你的回答！

【解决方案2】：

您没有在选择器中正确转义括号。试试这个：

"#traveller\[36350015\]\[date_of_birth\(3i\)\]"

【讨论】：

感谢您的回复。我刚刚更改了您提供的 id 但现在新的错误未能找到与选择器匹配的元素 \"#traveller\[36350015\]\[date_of_birth\(3i\)\]\"
我在这里假设了另一种格式。您必须使用一个反斜杠来转义括号。
评估失败：DOMException：无法在“文档”上执行“querySelector”：“#traveller[36350015][date_of_birth(3i)]”不是有效的选择器
Carsten，所有的数字也需要转义。