Puppeteer基础经验

Puppeteer是一个通过Chrome DevTools Protocal程序性操作Chrome的官方node库,其功能十分强大,Chrome能做的基本都能做。最明显的用处大概是抓数据,现在用各种framework写出来的页面通常直接http get只能得到一个加载页面,而真正的内容需要执行JavaScript才能加载出来, 放在Chrome里运行自然就不成问题了。当然最大的优点也是其最大的缺陷,那就是需要安装并运行Chrome,比较耗费资源,规模太大的话就不太适合了。
这次找到puppeteer是因为需要做一个生成Steam销量报告的工具。 这个信息只能手动登录查看,而且登录的时候会出现Steam Guard, 要输入邮件里的验证码才能继续。最后的解决方法是创建了一个bot用的Steam帐号,模拟用户操作输入,自动读取发到Gmail的验证码并输入,然后就能抓到数据了。同时还用了第二个功能,用html生成一个报告,直接放在Chrome里渲染成一个pdf发回来。用浏览器渲染pdf可能有点小题大做的感觉,但既然Chrome已经运行起来了,就顺便了。下面记录几个个人在开发中遇到的问题。

1.运行环境

Puppeteer默认会下载Chromium. 这个可以通过在npmrc里写PUPPETEER_SKIP_CHROMIUM_DOWNLOAD来避免下载,或者直接安装puppeteer-core. 这样配合chrome-launcher就可以很灵活地启动不同版本的Chrome.

const launchOptions = {
logLevel: ‘silent’,
chromeFlags: [‘–headless’]
}
const chrome = await chromeLauncher.launch(launchOptions)
const debugPort = chrome.port
const resp = await util.promisify(request)(`http://localhost:${debugPort}/json/version`)
const {webSocketDebuggerUrl} = JSON.parse(resp.body)
const browser = await puppeteer.connect({browserWSEndpoint:webSocketDebuggerUrl})
const page = await browser.newPage()

开发的时候怎么来都可以,但是因为Chrome的存在,部署是个问题。开始本来想把整个功能放在AWS Lambda上,有人专门针对这个需要做了个瘦身版的serverless-chrome,能将将塞进50MB的空间里,但是由于最开始的设想是手动输入邮箱验证码,所以没有采用。然后转向了Elastic Beanstalk, 但是运行环境没有Chrome需要的dependency, 而且不能自己配置,最后还是搞了个EC2. 系统是Ubuntu 18.04LTS, 默认也是没有dependency,需要安装。由于需要输出PDF, 还需要安装字体,不然英文之外显示的是方块。

2.异步处理

一般说到JavaScript的异步处理就是用promise, 在操作puppeteer时则需要用到async/await的写法。Async返回一个promise, 而await是要等promise resolve. 无论是转向新页面、等待页面元素出现、获取页面内容,全部需要await, 很容易写丢。Await也只能在async函数里才能使用。

await page.waitForNavigation({waituntil:’networkidle2′});
await page.waitForSelector(‘#login_btn_wait’,{hidden: true, timeout:30000})
const successButton = await page.$(‘#success_continue_btn’)
await successButton.click()
const html = await page.content()

需要抓取的内容可以通过selector单独选取,但感觉需要获得的内容多了的话,与其一个一个await, 不如直接取得整个页面,然后用别的库来处理html. cheerio貌似很流行,可以用jQuery的写法。

3. 选择页面元素

自己写网页的话用不到很复杂的CSS selector,也就是选个class选个id, 但是解析别人写的网页就比较麻烦了,尤其是遇到需要选择的元素没有id的情况。其实CSS selector还有:nth-of-type(n), :nth-child(n)这些写法,而且能一层一层串起来,这样就能选到需要的元素了。这是个人之前没有注意到的。

4.异常处理

使用puppeteer需要处理的异常很多。首先http返回值不是200要处理,需要的页面元素没有出现也要处理,总之一不留神脚本就会停止执行。异常处理同时也可以作为判断页面状态的依据,例如一定时间内某个元素没有出现,就说明登录失败了。

try{
const response = await page.goto(url,{waituntil:’networkidle2′})
if (!response.ok){
console.log(“HTTP Error”)
}
}catch (err){
console.log(“Failed to load URL” + err)
}
try{
const contents = await page.content();
return cheerio.load(contents,{decodeEntities: false});
}catch (err){
console.log(“Most likely page is redirected”);
}
try{
await page.waitForSelector(‘div#header_menu’,{visible:true,timeout:5000})
console.log(“Login success”)
}catch(err){
console.log(“Login error ” + err)
}

5. Bot判定

这个要根据目标网站来调整。比如有的网站如果访问频次过快可能会屏蔽IP, 那么每次跳转页面之间就最好sleep上几秒。Puppeteer已经是在模拟用户操作,如果目标网站防bot对策不是很强的话应该没什么问题。但如果还是遇到Captcha的话就束手无策了。

Leave a Reply

Your email address will not be published.