CSS-селектор для исходного кода <select>... </select> - PullRequest
Новая
       6

CSS-селектор для исходного кода <select>... </select>

0 голосов
/ 28 октября 2018

Вот фрагмент исходного кода с <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']"

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Вы можете использовать следующий селектор для элемента option: 

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

В противном случае вы можете сократить селектор до чего-то более краткого, если это единственный элемент на странице сvalue, оканчивающийся на per_page=100: 

[value$="per_page=100"]

Обратите внимание, что вы можете использовать встроенную функцию page.select(), чтобы выбрать option из элемента selectв Puppeteer, но вам нужно будет передать селектор элемента select и value элемента option: 

await page.select('select[name="per-page"]', 'https://www.mysited-com/admin/order?per_page=100');
0 голосов
/ 28 октября 2018

API HTMLOptionsCollection

Используйте API HTMLOptionsCollection и присвойте ему .class.Следующая демонстрация находит последний <option> из <select>, присваивает ему .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>
...