我有一个问题,他们的选择器获取元素.

我奋斗的页面是：http://html5.haxball.com/.
我成功的是登录,但这是一种黑客攻击,因为我使用的事实是,我需要填充的字段已被选中.

输入昵称并进入大厅后,我想点击“创建房间”按钮.它的选择器：
身体> div> div> div> div> div.buttons>按钮：第n个孩子(3)

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
    args: ['--no-sandbox'], headless: false, slowMo: 10
});
const page = await browser.newPage();
await page.goto('http://html5.haxball.com/index.html');
await page.keyboard.type(name);
await page.keyboard.press('Enter');
//at this point I am logged in.

let buttonSelector = 'body > div > div > div > div > div.buttons > button:nth-child(3)';

await page.waitForSelector('body > div > div');
await page.evaluate(() => {
    document.querySelector(buttonSelector).click();
});

browser.close();
})();

运行这样的代码后,我得到错误：

UnhandledPromiseRejectionWarning: Error: Evaluation failed: TypeError: Cannot read property ‘click’ of null

我最初的做法是：
    等待page.click(buttonSelector);
而不是page.evaluate但它也失败了.

最令我沮丧的是,当我在Chromium控制台中运行时：
    document.querySelector(按钮选择器).单击();
它工作正常.

解决方法:

有几点需要注意：

>用于检索按钮的选择器比它需要的更复杂.尝试更简单的东西：’button [data-hook =“create”]’.
>游戏在iframe中,所以你最好使用iframe的文档对象调用document.querySelector而不是包含窗口的文档
>传递给evaluate的函数在与运行节点脚本的位置不同的上下文中执行.因此,您必须显式地将变量从节点脚本传递到窗口脚本,否则buttonSelector将是未定义的：

进行上述更改后,您的代码将输入您的姓名并成功点击“创建房间”：

const puppeteer = require('puppeteer');

(async () => {

    const browser = await puppeteer.launch({
        args: ['--no-sandbox'], headless: false, slowMo: 10
    });

    const page = await browser.newPage();
    await page.goto('http://html5.haxball.com/index.html');
    await page.keyboard.type('Chris');
    await page.keyboard.press('Enter');
    //at this point I am logged in.

    let buttonSelector = 'button[data-hook="create"]';

    await page.waitForSelector('body > div > div');

    await page.evaluate((buttonSelector) => {

        var frame = document.querySelector('iframe');

        var frameDocument = frame.contentDocument;

        frameDocument.querySelector(buttonSelector).click();

    }, buttonSelector);

    browser.close();

})();