【问题标题】：CSS selector for source code of <select>...</select><select>...</select> 源代码的 CSS 选择器
【发布时间】：2019-04-01 08:58:45
【问题描述】：

这是带有<select> 的源代码的sn-p。我正在努力寻找合适的选择器：

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

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

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

【问题讨论】：

你想选择option而不是select对吧？
option[value='https://www.mysited-com/admin/order?per_page=100'] 应该可以工作，尽管 selects 和 options 的样式是出了名的困难和非常有限..（看看：stackoverflow.com/questions/7208786/…）
Philip，选择器会告诉page.click(selector)点击哪里。错误是找不到节点。
如果您需要 javascript 来选择某个选项，将selects .selectedIndex 设置为正确选项的索引比使用（模拟）单击更安全。（如果您使用的是 jQuery，请使用 .val()。）
看看：stackoverflow.com/a/47435873/2142071

标签： javascript node.js css-selectors puppeteer headless-browser

【解决方案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>

【讨论】：

【解决方案2】：

您可以为option 元素使用以下选择器：

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

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

[value$="per_page=100"]

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

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

【讨论】：

option[value="https://www.mysited-com/admin/order?per_page=100"]`` in page.click` 没有找到节点。 page.select(.....) 工作。