人偶无效的选择器

时间:2018-11-14 11:59:50

标签: javascript css-selectors puppeteer headless-browser

我正在尝试在网页上用Puppeteer填写表格,输入内容有一个ID,然后将其用作选择器。

ID为:

#loginPage:SiteTemplate:formulaire:login-field

当我从chrome获取选择器时,它会给我:

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

此外,如果我将第一个或第二个选项放在Puppeteer中,则会让我吐出这个错误:

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

如果需要,这里是代码:

(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();
})();

2 个答案:

答案 0 :(得分:1)

对于这样的ID,一个选项如下:

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

或者,如果行不通,请按照以下说明将其拆分,以解决:的使用:

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

希望其中一个(或两个)有帮助!

答案 1 :(得分:0)

我不确定,但是我将删除行await page.waitForNavigation({waitUntil: 'load'});

并替换await page.waitFor(EMAIL_SELECTOR); // here

await page.waitForSelector(EMAIL_SELECTOR);

并测试是否仅使用#login-field或其他#loginPage > SiteTemplate > formulaire > login-field

我可能仍在解决这个问题,所以我错了。