Hwo can I set HTML select element value?

[thujikun]

I tried following code. But I cannot set the value.

await page.click('.select-element[name=select]');
await page.click('.select-element[name=select] > option[value="123"]');

And I set the value with page.evaluate.
But I need to virtual DOM value.
So following code is not useful for me.

    async setSelectVal(sel, val) {
        await page.evaluate((data) => {
            return document.querySelector(data.sel).value = data.val;
        }, {sel, val});
    }

[aslushnikov]

@thujikun I don't follow, why the second approach with page.evaluate doesn't work for you?

[thujikun]

@aslushnikov I 'm using React. And I think page.evaluate is same with setting value with JavaScript. So it doesn't change React's virtual DOM value. And I think the method to set select value like click method should be because it's normal user's action. The user doesn't use page.evaluate

[sean-hill]

Also a lot of websites use jQuery 🤒 And have code like $(selector).on('change', () => {}) how could we trigger a change event after we set the value of a select box?

[Garbee]

@sean-hill By firing the change event manually.

As far as React goes. It seems like your component would need to expose an API to programatically change the value. Just like .value='whatever' is doing. So look for one of those since they should exist.

Could someone provide a react-based sample test though? That would help loads in understanding the exact situation and how to resolve it.

[nabati]

Doesn't this

    async setSelectVal(sel, val) {
        await page.evaluate((data) => {
            return document.querySelector(data.sel).value = data.val;
        }, {sel, val});
    }

actually just circumvent the underlying issue, that you can't click on certain elements? Will there be support for this in the future? I think this circumvention is more of an escape hatch than it should be a default approach.

[fixingcredit]

@thujikun I had to deal with the same issue and this seems to work for me. A bit of a hack though:

await page.evaluate(() => {
    document.querySelector('#element > option:nth-child(3)').selected = true;
    element = document.querySelector('#element');
    var event = new Event('change', { bubbles: true });
    event.simulated=true;
    element.dispatchEvent(event);
});

[thujikun]

@fixingcredit
Thx! I succeeded changing value managed in Redux by your hack. But I hope Puppeteer supports the feature to set the value to select element.

[aslushnikov]

@thujikun the Page.select method has just landed and should address this issue.

[thujikun]

@aslushnikov
Awesome! This is the method I wanted!

[DaveRandom]

Incomplete polyfill for Page.select() based on @fixingcredit's code. Should cover the most common case of setting the value to an option that is known to exist in a dropdown. Does not handle multiple selects and does not handle errors gracefully when the selector matches nothing or the specified value doesn't exist in the options.

if (page.select === undefined) {
    page.select = async function(selector, value) {
        await page.evaluate((selector, value) => {
            let element = document.querySelector(selector);
            element.querySelector('option[value="' + value + '"]').selected = true;

            let event = new Event('change', { bubbles: true });
            event.simulated = true;

            element.dispatchEvent(event);
        }, selector, value);
    };
 }

[thujikun]

@aslushnikov Doesn't this select method trigger change event on selecting value?

[aslushnikov]

@thujikun yes it does

[AlexChung1995]

Can I suggest adding something to the page.select function?
I was thinking the function should throw an error if the option doesn't exist. In my use case, it was important to know if the select was executed. I think this would be the case for many use cases.

The code I added was:
if (!options.some(function (v) {return values.indexOf(v.value) >= 0;})){ throw new Error('Option does not exist'); }

This is the altered select function:
`async select(selector, ...values) {
await this.$eval(selector, (element, values) => {
if (element.nodeName.toLowerCase() !== 'select')
throw new Error('Element is not a element.'); const options = Array.from(element.options); if (!options.some(function (v) {return values.indexOf(v.value) >= 0;})){ throw new Error('Option does not exist'); } if (element.multiple) { for (const option of options) option.selected = values.includes(option.value); } else { element.value = values.shift(); } element.dispatchEvent(new Event('input', { 'bubbles': true })); element.dispatchEvent(new Event('change', { 'bubbles': true })); }, values); }`

[aslushnikov]

@AlexChung1995 feel free to send a PR or file a new issue, we'll discuss it there

[dsheiko]

I would extend also ElementHandle:

/**
 * Set value on a select element
 * @param {string} value
 * @returns {Promise<Undefined>}
 */
ElementHandle.prototype.select = async function( value ) {
  await this._page.evaluateHandle( ( el, value ) => {
      const event = new Event( "change", { bubbles: true });
      event.simulated = true;
      el.querySelector( `option[value="${ value }"]` ).selected = true;
      el.dispatchEvent( event );
  }, this, value );
};

Then one can use it like:

const combobox= await page.$('select');
await combobox.select("optionFoo");