Puppeteer 无效的选择器答案

【问题标题】：Puppeteer invalid selectorPuppeteer 无效的选择器
【发布时间】：2019-04-17 09:26:39
【问题描述】：

我正在尝试在网页上使用 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();
})();

【问题讨论】：

标签： javascript css-selectors puppeteer headless-browser

【解决方案1】：

对于这样的 ID，一个选项是执行以下操作：

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

或者，如果这不起作用，请按如下方式拆分它以解决:的使用问题：

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

希望其中一个（或两个）会有所帮助！

【讨论】：

【解决方案2】：

我不确定，但我会放弃await page.waitForNavigation({waitUntil: 'load'});

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

await page.waitForSelector(EMAIL_SELECTOR);

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

我可能错了，因为我还在解决这个问题。

【讨论】：