puppeteer 学习笔记

因为 OI 学不下去了，所以整天搞一些小玩意。

安装

首先安装 node.js、node.exe，配置好环境变量等之后进行以下操作：

在工作目录下执行：

npm install express -g
npm install puppeteer

然后每次在当前目录中执行

node xxx.js [$value]

即可执行。

使用

python 爬虫可以拿下多数情况下的爬虫操作，但遇到动态 js 之类的玩意就不太行了。

这个时候 puppeteer 的模拟浏览器行为可以解决这个问题。py 也有类似的东西，但是有谷歌官方做支持的 puppeteer 的 bug 等会少一些。

0.实例创建与基本操作

我们可以通过以下代码创建一个实例：

const puppeteer = require('puppeteer');
const browser = await puppeteer.launch({headless: false}); 
	// true 为不观看操作过程
	// executablePath: "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"
const page = await browser.newPage();
await page.goto(Url, {timeout: 0, waitUntil: 'load'});
await browser.close() // 关闭浏览器

page 有如下常用操作：

await page.goto(url); // 前往某个 url
await page.reload(); // 刷新
cookies=[{/*something*/},{...}];
await page.setCookie(...cookies); // 设置cookies，注意格式
await page.close(); //关闭当前页
await page.waitForTimeout(/*Time (ms)*/);
await page.waitForSelector('selector');
await page.waitForXpath('xpath');
await page.waitForNavigation(); // 等待页面完全加载完成。

有时 cmd 命令中需要传入一些参数，可以直接带在 .js 文件后面。

const value = process.argv[2]; // 2 为取出 .js 后第一项
/*
如: node test.js https://www.baidu.com
那么将取出 https://www.baidu.com	
*/
console.log(value) // 输出在标准输出中

数字代表项数，用空格分开。

更多操作见官方文档.许多 js 基本操作与 c++ 类似甚至完全一样。

1.获取页面元素

可以通过 selector 或 xpath 获取元素。

const element = await page.$eval('selector', el => el.something);
const value = await page.$x('xpath');
await value[0].click();

这将获取整个元素，具体要取出哪些内容要自己选择。select 便于获得一些 href 之类的玩意，xpath 则被我用于点击。
xpath获取的元素有若干属性，可通过通配符获取子节点个数：

const ele = await page.$x('//*[@id="comicContain"]/*');
const len = ele.length;

2.输入/点击/截图

实时获取命令行输入需要引入 readline-sync 库。

输入与点击操作：

await (await page.$x('xpath'))[0].type(something_to_type); // 通过某个xpath获取元素并输入
await (await page.$x('xpath'))[0].click(); // 选择元素并点击
await page.keyboard.press('[option]');	// 按一下
await page.keyboard.down('[option]');	// 按着
await page.keyboard.up('[option]');		// 松开

有时需要对某个元素截图并保存，可以通过以下代码实现：

async function screenshotDOMElement(page, selector, path, padding = 0) {
    const rect = await page.evaluate(selector => {
        try{
            const element = document.querySelector(selector);
            const {x, y, width, height} = element.getBoundingClientRect();
            if(width * height != 0){
                return {left: x, top: y, width, height, id: element.id}; }
            else { return null; }
        }catch(e){return null; }
    }, selector);
    return await page.screenshot({path: path, clip: rect ? {x: rect.left - padding, y: rect.top - padding,  rect.width + padding * 2, height: rect.height + padding * 2 } : null });
}
// 传入: page实例、selector选择器、path保存路径. 

获得交互的方法如下：

var v_type = readlineSync.question('Some Output with the question');

那么 v_type 中就获得了实时的输入。

3.文件下载保存

文件系统相关操作需要引入 fs 库。

文件路径相关操作则需要引入 path 库。

文件下载操作通过点击操作触发。

const cdp = await page.target().createCDPSession();
save_path = '';
await cdp.send('Page.setDownloadBehavior', {
	behavior: 'allow',
    downloadPath: path.resolve(__dirname, `${save_path}`)
    // path 的这个格式比不可少，save_path 是真正的路径。
});		// 文件下载相关行为

对于保存路径可能不存在的情况，可以通过如下代码完成路径创建。

async function dirExists(savepath) { whole = savepath.split('\'); var now = whole[0];
    for (var i = 1; i < whole.length; ++i) {
    	now = now + '\' + whole[i]; 
    	if (!fs.existsSync(now)) { 
            fs.mkdirSync(now); console.log(`File ${now} is not exist, now is making...`); 		  }
    }
}

文件写入操作也可以通过 fs 的 write 操作完成。

---

未完待续……