Puppeteer page.select got error: Cannot read property 'indexOf' of undefined #3327

jennycai0807 · 2018-10-01T02:14:21Z

When I use page.select function, it got an error:
TypeError: Cannot read property 'indexOf' of undefined

My code is:
await page.select('#providerSelector', '101');

Then I use another way:
let selectElem = await page.waitForSelector("#providerSelector");
let optionElem = await page.waitForSelector("#providerSelector > option:nth-child(3)");
await page.evaluate((optionElem, selectElem) => {
optionElem.selected = true;
const event = new Event('change', {bubbles: true});
event.simulated=true;
selectElem.dispatchEvent(event);
}, optionElem, selectElem);

But still got the same error.
Is it a bug of Puppeteer?
Note: My Chromium Version 69.0.3452.0 (Developer Build) (64-bit)

If it's a puppeteer bug? How can I upgrade my puppeteer version?

lusarz · 2018-10-01T13:35:11Z

Hello @jennycai0807, I cannot reproduce this issue. I've run this code:

const browser = await puppeteer.launch();
const page = await browser.newPage();
page.setViewport({ width: 80, height: 40 });
await page.setContent('<!doctype html><html><body><select id="providerSelector"><option value="99">99</option><option value="100">100</option><option value="101">101</option></select></body></html>');

await page.select('#providerSelector', '101');
await page.screenshot({path: 'select.png'});

await browser.close();

on https://try-puppeteer.appspot.com/ and I got expected result:

Could you provide html or link to page you're testing on ?

jennycai0807 · 2018-10-01T15:14:56Z

Here is the html:

<div>
<div class="form form-group" data-test-automation-id="selector">
<label class="control-label" for="Selector" data-test-automation-id="label">Current service provider</label>
<span class="select">
<select name="select" class="form-control" id="selector" data-test-automation-id="select">
<option value="">Please select</option>
<option value="100" data-test-automation-id="choose100">Test1</option>
<option value="101" data-test-automation-id="choose101">Test2</option>
<option value="102" data-test-automation-id="choose102">Test3</option>
</select>
</span>
</div>
</div>

The default value is "Please select", and the default value can't be selected. So when I tried page.type function, it didn't work.
Note: When I select other option from real UI, e.g. Test2, the 1st option "Please select" will add disabled=""

jennycai0807 · 2018-10-01T15:59:34Z

Oh, it’s providerSelector. I changed some text, but it doesn’t matter.

lusarz · 2018-10-01T17:48:47Z

I've created script based on HTML:
https://gist.github.com/lusarz/b00d54c89c899bd4549c0ed6b74d3482

and I've got valid result:

One important thing is that there was id="selector", so I used await page.select('#selector', '101');.

Does script from my gist works for you?

jennycai0807 · 2018-10-03T07:53:03Z

I used your script, it worked.
And I also generate my whole HTML, and run, it also worked.

But the problem is when I run the real test in my test web url, it shows the error:
(node:7476) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Evaluation failed: TypeError: Cannot read property 'indexOf' of undefined
at new (https://service-xxxxxx/RCLibX/RCLibX.min.js?v=10.03.f7227d5eb8ce339b6b54b5b1ec2332649f58ba6c:3:13312)
at :12:29
(node:7476) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

In the UI, the value is selected, but "Next" button is activated. Note: When I select the value from real UI, the "Next" button will be enabled, so I can go to next step.
And when I input text in other input box, the selector will be reset.
Do you have any idea why it's fake selected.

aslushnikov · 2018-10-04T03:17:25Z

@jennycai0807 any chance you can share an HTML that reproduces the issue? If you can't share a link, a minified example would help a lot.

jennycai0807 · 2018-10-04T07:19:53Z

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    page.setViewport({ width: 1280,
        height: 1280 });
    await page.goto('https://service.ringcentral.com/');
    await page.waitForNavigation({timeout: 0, waitUntil: "networkidle0"});
    await page.select('#rc-gen11 > div > div.rc-panel > div > div.panel-footer > div > div > div.col-lg-2.col-md-2.col-sm-2.col-xs-5 > span > select', 'de_DE');
    await page.screenshot({path: 'select.png', fullPage: true});

    await browser.close();
})();

Use this script can show the error, and also the language value isn't real selected (The whole page isn't updated to de_DE language)

aslushnikov · 2018-10-04T16:21:32Z

@jennycai0807 awesome, thanks. The website overrides the top-level Event class which we happen to use internally in page.select.

This will be addressed with #2671

References puppeteer#3327.

jennycai0807 · 2018-10-04T16:59:01Z

Hi @aslushnikov, how can I get the latest puppeteer version after you fix this issue?

jennycai0807 · 2018-10-04T17:04:20Z

Can I ask another question about puppeteer?
It's addressed in https://stackoverflow.com/questions/52651818/how-to-create-a-folder-in-my-computer-when-saving-screenshots-using-puppeteer.

Or should I create a new issue Or feature request?

References #3327.

aslushnikov · 2018-10-04T17:54:33Z

Hi @aslushnikov, how can I get the latest puppeteer version after you fix this issue?

Upvote the bug to receive updates on its status
Once it's fixed, you'll be able to install tip-of-tree puppeteer using npm install puppeteer@next
We release new versions of puppeteer monthly; bugfix will be eventually released.

Can I ask another question about puppeteer?

Sure, I answered on SO.

jennycai0807 · 2018-10-05T03:44:49Z

Can I manually update my puppeteer code to quickly fix this issue? Because I need to use page.select these days.
I search the file test/page.spec.js in my project, but didn't find it.

jennycai0807 · 2018-10-06T08:45:55Z

@aslushnikov before you fix this bug, do I have any workaround to select it using puppeteer?
I tried page.type, and page.keyboard.press('ArrowDown'), but both failed.

jennycai0807 · 2018-10-06T14:21:25Z

I have used below workaround, and it worked:

await page.focus('#providerSelector');
await page.waitFor(2000);
await page.keyboard.sendCharacter('BT');

This patch starts creating secondary DOMWorld for every connected page and switches `page.select()` to run inside the secondary world. Fix puppeteer#3327.

This patch starts creating secondary DOMWorld for every connected page and switches `page.select()` to run inside the secondary world. Fix #3327.

aslushnikov mentioned this issue Oct 4, 2018

Feature request: create isolated world #2671

Open

aslushnikov closed this as completed Oct 4, 2018

aslushnikov added a commit to aslushnikov/puppeteer that referenced this issue Oct 4, 2018

test: add failing test for page.select

40e110b

References puppeteer#3327.

aslushnikov mentioned this issue Oct 4, 2018

test: add failing test for page.select #3346

Merged

aslushnikov added a commit that referenced this issue Oct 4, 2018

test: add failing test for page.select (#3346)

8becb31

References #3327.

aslushnikov mentioned this issue Jan 19, 2019

fix(page): use secondary DOMWorld to drive page.select() #3809

Merged

aslushnikov added a commit that referenced this issue Jan 22, 2019

fix(page): use secondary DOMWorld to drive page.select() (#3809)

678b8e8

This patch starts creating secondary DOMWorld for every connected page and switches `page.select()` to run inside the secondary world. Fix #3327.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Puppeteer page.select got error: Cannot read property 'indexOf' of undefined #3327

Puppeteer page.select got error: Cannot read property 'indexOf' of undefined #3327

jennycai0807 commented Oct 1, 2018

lusarz commented Oct 1, 2018

jennycai0807 commented Oct 1, 2018 •

edited

jennycai0807 commented Oct 1, 2018

lusarz commented Oct 1, 2018

jennycai0807 commented Oct 3, 2018

aslushnikov commented Oct 4, 2018

jennycai0807 commented Oct 4, 2018

aslushnikov commented Oct 4, 2018

jennycai0807 commented Oct 4, 2018 •

edited

jennycai0807 commented Oct 4, 2018

aslushnikov commented Oct 4, 2018

jennycai0807 commented Oct 5, 2018

jennycai0807 commented Oct 6, 2018

jennycai0807 commented Oct 6, 2018 •

edited

Puppeteer page.select got error: Cannot read property 'indexOf' of undefined #3327

Puppeteer page.select got error: Cannot read property 'indexOf' of undefined #3327

Comments

jennycai0807 commented Oct 1, 2018

lusarz commented Oct 1, 2018

jennycai0807 commented Oct 1, 2018 • edited

jennycai0807 commented Oct 1, 2018

lusarz commented Oct 1, 2018

jennycai0807 commented Oct 3, 2018

aslushnikov commented Oct 4, 2018

jennycai0807 commented Oct 4, 2018

aslushnikov commented Oct 4, 2018

jennycai0807 commented Oct 4, 2018 • edited

jennycai0807 commented Oct 4, 2018

aslushnikov commented Oct 4, 2018

jennycai0807 commented Oct 5, 2018

jennycai0807 commented Oct 6, 2018

jennycai0807 commented Oct 6, 2018 • edited

jennycai0807 commented Oct 1, 2018 •

edited

jennycai0807 commented Oct 4, 2018 •

edited

jennycai0807 commented Oct 6, 2018 •

edited