CSS <select>...</select> 源代码的选择器

Question

这是 <select> 的源代码片段。我正在努力寻找合适的 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>

我想 select 在 Puppeteer 中为 page.click() 选择 per_page=100 选项。以下 select 或尝试过的都不正确，错误是 node not found.

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

Answer 1

HTMLOptionsCollection API

使用 HTMLOptionsCollection API 并为其分配一个 .class。下面的演示定位了 <select> 的最后一个 <option>，分配给它一个 .class，并将它的 background-color 更改为 tomato 红色。

演示

var opts = document.querySelector('.input-sm').options;
opts[opts.length -1].classList.add('lastOpt');
document.querySelector('.lastOpt').style.background = 'tomato';

<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>

Answer 2

您可以使用以下 select 或者 option 元素：

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

否则，如果 select 是页面上唯一以 per_page=100 结尾的 value 元素，您可以将其缩短为更简洁的内容：

[value$="per_page=100"]

请注意，您可以使用内置的 page.select() 函数从 Puppeteer 中的 select 元素 select 一个 option，但是您需要将selector 的 select 元素和 value 的 option 元素：

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

CSS <select>...</select> 源代码的选择器

CSS selector for source code of <select>...</select>

javascript

css-selectors

node.js

headless-browser

puppeteer

HTMLOptionsCollection API

演示