puppeteer无法获取登陆后主页面中的元素,无法拿到evaluate中的参数

### 问题描述
登录网站 => 进入主页 => 获取导航列表标签(无法获取)

以下是UI和HTML布局
clipboard.png

clipboard.png

// 相关代码
    const puppeteer = require("puppeteer");
    (async  () => {
        let timeout = function (delay) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        resolve(1)
                    } catch (e) {
                        reject(0)
                    }
                }, delay);
            })
        }
        const browser = await puppeteer.launch({
            headless: false,
            // slowMo: 250
        });
        const page = await browser.newPage();
        // waitUtil:load页面加载完成是触发
        await page.goto("https://example.com", { waitUntil: 'load'});
    
        // 登录
        await page.type("#username", "username");
        await page.type("#password", "password");
    
        await page.click("#btn_submit");
        await timeout(3000)
    
        const body = await page.$(".nav"); //页面上的导航ul的类名
        const result = await page.evaluate((el) => {
            console.log(el)  //取不到el的值
            return el;
        }, body);
        // 监听console输出
        page.on('console', msg => console.log('PAGE LOG:', ...msg.args));
        await page.evaluate(() => console.log(`url is ${location.href}`));
    
        //页面登录成功后,需要保证redirect 跳转到请求的页面
        await page.waitForNavigation();
    })()

能获取到导航下面的子元素li并给a标签添加hover事件

各位大神帮我看看代码有没有问题,我给怎么修改或是问题出自哪里。感谢!

阅读 6.5k
2 个回答

1、输入完整名称的 class 。
2、dom 渲染需要时间,你可以使用 page.waitForSelector 方法等待找到这个元素。
3、page.waitFor(1000) 直接输入数字就是 timeout 操作,不需要你重写延时方法。

await page.$$eval(".nav li a", elements => {
    // 此时的elements 是个List类型的伪数组(又或者是Array类型我忘了。。。)
    // 然后你就可以遍历对每个a进行操作 , 当然了 如果你想事件委托么 selector写到.nav li或者.nav这就是另一个话题了
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题