木偶师在选择<td>后点击它

Question

我在chrome工具中测试了我的xpath选择器，它找到了我要选择的<td>。

我尝试了几种使用page.x$的方法，然后确保元素的选择是正确的，如下所示：

page.waitForXPath("//td[contains(., 'All Projects')]")
.then(selector => {
    page.click(selector);
})

执行确实到达了page.click()，我得到了以下错误。我很困惑，因为我不认为我在改变环境。UnhandledPromiseRejectionWarning: Error: JSHandles can be evaluated only in the context they were created!

编辑:这是HTML代码。它是一个由HTML表格组成的角网格。<td>在底部。

​

下面是代码的其余部分。其他一切都很好。抱歉，这太笨重了。

const puppeteer = require('puppeteer');
const kindle = puppeteer.devices['Kindle Fire HDX landscape'];

async function main() {
    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();

    //go to page and log in
    await page.emulate(kindle);
    await page.goto('http://localhost:4201/#/login');
    await page.waitForSelector('input[id="usr"]');
    await page.type('#usr', 'myusername');
    await page.type('#pwd', '');
    await page.click('button');

    //wait for homepage to load
    await page.waitForSelector('#menuData');
    await page.click('#menuData');
    await page.waitForSelector('#drCreate');
    await page.click('#drCreate');
    await page.waitForSelector('.mat-input-element'); //a request piece is loaded
    //populate fields

    var date = new Date();

    await page.type('#mat-input-0', humanReadableDate(date));
    date.setDate(date.getDate() + 1);
    await page.type('#mat-input-1', humanReadableDate(date));
    date.setDate(date.getDate() + 5)
    await page.type('#mat-input-3', humanReadableDate(date));

    await page.click('.pi-angle-double-right');

    page.waitForXPath("//td[contains(., 'All Projects')]")
    .then(selector => {
        page.click(selector);
    })
}

function humanReadableDate(date) {
    if (!date) {
        date = new Date();
    }
    return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();
}

main();

Answer 1

它看起来像一个无效的页面上下文。试着做这样的事情：

await page.waitForXPath("//td[contains(., 'All Projects')]")
const [ projects ] = await page.$x("//td[contains(., 'All Projects')]");
projects.click()

或简略版本：

page.waitForXPath("//td[contains(., 'All Projects')]").then(selector => selector.click())

Answer 2

问题

page.click需要一个字符串(选择器)作为参数，但是您要传递一个元素句柄。

引用来自page.waitForXPath的文档

返回：>承诺，它将在xpath指定的元素添加到DOM时进行解析。如果在DOM中找不到hidden: true和xpath，则解析为hidden: true。

这意味着您不能将该函数(元素句柄)的结果传递给page.click。

解决方案

相反，您可以像这样使用elementHandle.click编写代码

await page.waitForXPath("//td[contains(., 'All Projects')]")
.then(elementHandle => elementHandle.click())

但是，我建议使用async/await语法，以使其更符合您的其余代码：

const elementHandle = await page.waitForXPath("//td[contains(., 'All Projects')]");
await elementHandle.click();