Skïp
Skïp

Reputation: 421

Puppeteer invalid selector

I'm trying to fill a form with Puppeteer on a webpage, the input has an id and I'm using it as a selector.

The ID is :

#loginPage:SiteTemplate:formulaire:login-field

When I get the selector from chrome it gives me that :

#loginPage\3a SiteTemplate\3a formulaire\3a login-field

And wether I put the first or the second option in Puppeteer it spits me out this error :

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '#loginPage:SiteTemplate:formulaire:login-field' is not a valid selector.

Here is the code if needed :

(async () => {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();
    await page.goto('XXX');
    await page.click(GOTO_LOGIN_BUTTON_SELECTOR)
    await page.waitForNavigation({waitUntil: 'load'});
    await page.waitFor(EMAIL_SELECTOR); // here
    await page.focus(EMAIL_SELECTOR);
    await page.keyboard.type(CREDS.email);
    await page.focus(PASSWORD_SELECTOR);
    await page.keyboard.type(CREDS.password);

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

Upvotes: 1

Views: 1357

Answers (2)

Hellonearthis
Hellonearthis

Reputation: 1762

I'm not sure but I would drop the line await page.waitForNavigation({waitUntil: 'load'});

And replace await page.waitFor(EMAIL_SELECTOR); // here

with await page.waitForSelector(EMAIL_SELECTOR);

And test to see if just using #login-field or other #loginPage > SiteTemplate > formulaire > login-field

I could be wrong as I'm still working this out too.

Upvotes: 0

AJC24
AJC24

Reputation: 3336

One option, for an ID like that, is to do as follows:

const EMAIL_SELECTOR = '[id="loginPage:SiteTemplate:formulaire:login-field"]';

Or, if that doesn't work, split it up as follows to work around the use of the ::

const EMAIL_SELECTOR = '[id*="loginPage"][id*="SiteTemplate"][id*="formulaire"][id*="login-field"]';

Hopefully one (or both) of those will help!

Upvotes: 2

Related Questions