使用Puppeteer启动浏览器跳转url并读取数据

1.启动浏览器

import puppeteer from 'puppeteer';

(async () => {
    const browser = await puppeteer.launch();
    const page =await browser.newPage();
})();

这里没有设置关闭浏览器，但还是进程结束了，这是因为 Node.js 的进程生命周期特性：

1. 当 Node.js 执行完所有代码且事件循环中没有待处理的任务时，进程会自动退出
2. 当主程序退出时，所有由程序创建的子进程（包括 Puppeteer 启动的浏览器进程）也会被自动终止

调整：添加 await new Promise(() => {}); // 永久等待

2.设置可视化的窗口

默认情况下，Puppeteer 启动的是无头（headless）模式的浏览器。要看到实际的浏览器窗口，需要在 launch 选项中设置 headless: false

const browser = await puppeteer.launch({
        headless: false,  // 显示浏览器窗口
        defaultViewport: null  // 使用默认的视窗大小
    });

3.授权

在某些网站需要使用地理位置等权限时，我们可以通过这个方法来预先授权

    // 创建一个新的浏览器上下文
    const context = await browser.createIncognitoBrowserContext();
    
    // 为指定网站设置权限
    await context.overridePermissions('https://juejin.cn', [
        'geolocation',       // 地理位置
        'notifications',     // 通知
        'camera',           // 摄像头
        'microphone'        // 麦克风
    ]);

3.完整代码

import puppeteer from 'puppeteer';

(async () => {
    //启动浏览器
    const browser = await puppeteer.launch({
        headless: false,  // 显示浏览器窗口
        defaultViewport: null  // 使用默认的视窗大小
    });
    const page =await browser.newPage();
    await page.goto('https://juejin.cn/frontend')
    await page.type('.search-input', '前端开发');
    await page.waitForSelector('.entry');
    await page.click('.entry');
    await page.setViewport({width: 500, height: 500});

    //查找包含"前端"文本的元素
    const textSelector= await page.waitForSelector('text/提升自己',);
    console.log("textSelector",textSelector)
    // 获取元素的完整文本内容
    const fullText = await textSelector?.evaluate(el => el.textContent);
    console.log('找到的文本:', fullText);
    await new Promise(() => {});  // 永久等待
    await browser.close();
})();

常用的操作示例：

• 访问网页： await page.goto('网址')
• 点击元素： await page.click('选择器')
• 输入文字： await page.type('选择器', '文字')
• 等待元素出现： await page.waitForSelector('选择器')
• 获取页面内容： await page.content()

官方文档：pptr.dev/category/in…