0

Here is a snippet of source code with <select>. I am struggling to find the right selector:

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

I would like to select the option of per_page=100 for page.click() in Puppeteer. The following selector tried was not correct and error was node not found.

"select[value='https://www.mysited-com/admin/order?per_page=100']"
Grant Miller
  • 27,532
  • 16
  • 147
  • 165
user938363
  • 9,990
  • 38
  • 137
  • 303
  • You want to select the `option` not the `select` right? – Philip Oct 28 '18 at 04:30
  • 1
    `option[value='https://www.mysited-com/admin/order?per_page=100']` should work, altough styling `select`s and `option`s is notoriously difficult and very limited.. (Have a look at: https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select) – Philip Oct 28 '18 at 04:32
  • `Philip`, the selector will tell `page.click(selector)` where to click. Error is the node not found. – user938363 Oct 28 '18 at 04:36
  • 1
    If you need javascript to select a certain option, it's safer to set the `select`s `.selectedIndex` to the right option's index than using a (simulated) click. (Or use `.val()` if you're using jQuery.) – Philip Oct 28 '18 at 04:39
  • Docs: https://www.w3schools.com/jsref/prop_select_selectedindex.asp and http://api.jquery.com/val/ – Philip Oct 28 '18 at 04:40
  • I am using `puppeteer` which is kind of unforgiving. – user938363 Oct 28 '18 at 04:42
  • So maybe I'm not really understanding your question. Could you elaborate on what your trying to do? And some more context? – Philip Oct 28 '18 at 04:44
  • https://pptr.dev/#?product=Puppeteer&version=v1.9.0&show=api-pageclickselector-options. This is the doc about `page.click(selector)`. I need to have the right selector for the function. – user938363 Oct 28 '18 at 04:49
  • 1
    Have a look at: https://stackoverflow.com/a/47435873/2142071 – Philip Oct 28 '18 at 04:50
  • Possible duplicate of [How to select an option from dropdown select](https://stackoverflow.com/questions/45864516/how-to-select-an-option-from-dropdown-select) – Philip Oct 28 '18 at 04:51
  • I read this post you provided before but somehow I did not get it right. – user938363 Oct 28 '18 at 05:05
  • Did `await page.select('select[name="per-page"]', 'https://www.mysited-com/admin/order?per_page=100')` not work? – Philip Oct 28 '18 at 05:07
  • `page.select('select#per-page', 'https://www.mysited-com/admin/order?per_page=100');` this seems to work finally. – user938363 Oct 28 '18 at 05:32

2 Answers2

1

HTMLOptionsCollection API

Use the HTMLOptionsCollection API and assign a .class to it. The following demo locates the last <option> of the <select>, assigns it a .class, and changes its background-color to tomato red.

Demo

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>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
1

You can use the following selector for the option element:

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

Otherwise, you might be able to shorten the selector to something more concise if it is the only element on the page with a value that ends with per_page=100:

[value$="per_page=100"]

Note that you can use the built-in page.select() function to select an option from a select element in Puppeteer, but you will need to pass the selector of the select element and the value of the option element:

await page.select('select[name="per-page"]', 'https://www.mysited-com/admin/order?per_page=100');
Grant Miller
  • 27,532
  • 16
  • 147
  • 165
  • `option[value="https://www.mysited-com/admin/order?per_page=100"]`` in `page.click` did not find the node. `page.select(.....)` works. – user938363 Oct 28 '18 at 05:34