代码之家 › 专栏 › 技术社区 › user938363

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

headless-browser puppeteer css-selectors node.js javascript

user938363 · 技术社区 · 6 年前

下面是一段源代码 <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() 在木偶戏里。尝试的下列选择器不正确,错误为 node not found

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

2 回复 | 直到 6 年前

Grant Miller 6 年前

您可以将以下选择器用于 option 元素:

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

否则,如果选择器是页面上唯一具有 value 最后是 per_page=100

[value$="per_page=100"]

page.select() 函数来选择 选项 从 select 元素,但您需要传递 选择 价值 的 选项

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

zer00ne 6 年前

HTMLOptionsCollection API

HTMLOptionsCollection API .class <option> 的 <select> ,将其指定为 .类 ,并更改其 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>

推荐文章

ssp singh · 使用Puppeter为URL列表截图。js公司

7 年前

Arel · 使用Puppeter拍摄运行WebGL的页面截图

7 年前

Atav32 · 如何设置Jest测试运行Puppeter的最大超时?

7 年前

Jon Wilson · 多个选择器上的木偶等待选择器

7 年前

Steren · 禁用无头镀铬中的闪烁光标(使用Puppeter)

7 年前

Ryoji Ishii · 如何模糊木偶戏中的输入元素?

7 年前

Nicholas DiPiazza · 有没有办法让Puppeter的waitUntil“networkidle”只考虑XHR(ajax)请求?

7 年前

Nicholas DiPiazza · 你如何包装一个木偶演员应用程序?

7 年前

Vega · 如何从DOM获取所有链接?

7 年前

AnnaCICI · 按子项获取项目ID(vanilla JS)

7 年前