Puppeteer的学习笔记

1. 简单例子：生成页面截图

前提：已安装：node 和 puppeteer（命令行安装：npm i puppeteer）

const puppeteer = require('puppeteer');
 
(async () => {
  const browser = await puppeteer.launch({
  		headless:false,
        defaultViewport: false,
        args: ['--start-maximized'],
        waitUntil: 'networkidle2'
  });
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com/');
  await page.screenshot({path: 'example.png'});
 
  await browser.close();
})();

说明：
waitUntil:代表什么时候才认为导航加载成功， 其中：

• networkidle0: 在 500ms 内没有网络连接时就算成功(全部的request结束),才认为导航结束
• networkidle2: 500ms 内有不超过 2 个网络连接时就算成功(还有两个以下的request),就认为导航完成。

2. puppeteer 默认设置页面大小为：800px*600px. 这也是截图的大小，页面的大小可以用：Page.setViewport() 方法自定义

Page.setViewport()的用法：

  await page.setViewport({
  width: 50,
  height: 50,
  deviceScaleFactor: 1
});

3. 获取单个元素的文本值

方法：page.$eval()

 //获取元素的文本值
    const logoutButtonValue = await page.$eval('.logout', element => element.innerHTML)
    console.log(logoutButtonValue)

说明：

• element.innerHTML，也可以用: element.textContent

4. 获取多个元素的文本值

方法：page.$$eval()

 const memu_list = await page.$$eval('.nav_com li a',
            elements => elements.map(el => el.innerHTML))
    console.log(memu_list)

返回：
[ ‘推荐’, ‘动态’, ‘程序人生’, ‘Python’, ‘Java’, ‘百万人学AI’ …]

5. 定位到单个iframe里面的元素

第一种方式：

//找到页面所有的iframe, 并通过frame.url()获取frame的url，选择出目标frame的url
        const f = (await page.frames().map(frame=> frame.url()))[1]
        const target_frame = f.split('?')[0];

        const frame = await page.frames().find(frame => frame.url().includes(target_frame));
           //在定位的iframe页面内操作
        const phone = await frame.waitForSelector('#phoneIpt');

说明：

• 参考blog：https://www.cnblogs.com/wuweiblogs/p/12918612.html
• page.frames 获取页面上所有的iframe，通过frame.url() 找到该frame的url
• 用page.frames().find() 方法找到定位到目标frame
• frame.waitForSelector方法定位iframe内的元素

第二种方式：通过name/ID找frame

const f = (await page.frames().map(frame=> frame.name()))[1]

说明：

• 没有找到name，会返回ID

6. 切换tab

定位tab页

• 方法一

const new_page = (await browser.pages())[2]

• 方法二：

const target = await browser.waitForTarget(t => t.url().includes('passport'));

其他跳转相关的方法：

• 等待跳转完成：

page.waitForNavigation()

• 将画面切换到某一页，如下：切换到page1

page1.bringToFront()