javascript - ... 源代码的 CSS 选择器

Question

这是一段带有 <select> 的源代码片段。我正在努力寻找合适的选择器:

<label class="control-label pull-right" style="margin-right: 10px; font-weight: 100;">
    <small>Show</small>&nbsp;
    <select class="input-sm grid-per-pager" name="per-page">
        <option value="https://www.mysite-com/admin/order?per_page=10" >10</option>
        <option value="https://www.mysite-com/admin/order?per_page=20" selected>20</option>
        <option value="https://www.mysite-com/admin/order?per_page=30" >30</option>
        <option value="https://www.mysite-com/admin/order?per_page=50" >50</option>
        <option value="https://www.mysited-com/admin/order?per_page=100" >100</option>
    </select>
    &nbsp;<small>Piece</small>
</label>

我想选择per_page=100选项对于 page.click()在 puppeteer 师中。尝试的以下选择器不正确，错误为 node not found .

"select[value='https://www.mysited-com/admin/order?per_page=100']"

Answer 1

您可以对 option 元素使用以下选择器:

option[value="https://www.mysited-com/admin/order?per_page=100"]

否则，如果选择器是页面上唯一一个 value 以 per_page=100 结尾的元素，您也许可以将选择器缩短为更简洁的内容:

[value$="per_page=100"]

请注意，您可以使用内置 page.select()函数从 Puppeteer 中的 select 元素中选择 option，但您需要传递 select 元素的选择器和 option 元素的值:

await page.select('select[name="per-page"]', 'https://www.mysited-com/admin/order?per_page=100');