puppeteer 练习
2019-10-25 本文已影响0人
你说的独品
官网api：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md（不懂就问）
demo1 截图
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless:false});// 创建一个浏览器实例 Browser 对象
const page = await browser.newPage();// 通过浏览器实例 Browser 对象创建页面 Page 对象
await page.goto('https://www.baidu.com');// 通过url参数打开指定的页面
await page.setViewport({width:1920, height:1080}); // 修改可视页面大小
const documentSize = await page.evaluate(() => { //如果下面要用到“documentSize.height”，这里必须先声明
return {
width: document.documentElement.clientWidth,
height : document.body.clientHeight,
}
})
// await page.screenshot({path: '1.png'});// 对页面进行截图 ，并进行保存
// await page.screenshot({path:"2.png", clip : {x:0, y:0, width:1920, height:documentSize.height}});
await page.screenshot({path:"2.png", clip : {x:0, y:0, width:400, height:documentSize.height,}});
// await browser.close();// 关闭浏览器
})();
另外下面这种写法也可以达到全页面截图
await page.screenshot({
path:"4399.png",
fullPage: true
});
demo2
const puppeteer = require('puppeteer');
(async ()=>{
try{
// 创建一个浏览器实例 Browser 对象
let browser = await puppeteer.launch({
// 是否不显示浏览器， 为true则不显示
'headless': false,
});
// 通过浏览器实例 Browser 对象创建页面 Page 对象
let page = await browser.newPage();
// 设置浏览器信息
const UA = "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/63.0.3239.84 Chrome/63.0.3239.84 Safari/537.36";
await Promise.all([
page.setUserAgent(UA),
// 允许运行js
page.setJavaScriptEnabled(true),
// 设置页面视口的大小
page.setViewport({width: 1100, height: 1080}),
]);
// 地址
let chapter_list_url = 'https://www.opposhop.cn/'
// 打开章节列表
await page.goto(chapter_list_url);
// 使用css选择器的方式
let content= await page.$eval('#oc-header > nav > section.oh-navlist-wrapper > ul', el => el.innerText);
console.log(content);
}catch(err){
console.log(err)
}
})()
结果会在控制台打印出来
image.png
demo3 爬取豆瓣电影信息并保存文件.js
const fs = require('fs'); //用于保存文件，暂时不知道什么作用
const puppeteer = require('puppeteer');
// 等待3000毫秒
const sleep = time => new Promise(resolve => {
setTimeout(resolve, time);
})
const url = 'https://movie.douban.com/explore#!type=movie&tag=%E7%A7%91%E5%B9%BB&sort=rank&page_limit=20&page_start=0';
;(async() => {
console.log('Start visit');
// 启动一个浏览器
const brower = await puppeteer.launch({
args: ['--no-sandbox'],
dumpio: false,
headless: false
});
const page = await brower.newPage() // 开启一个新页面
// 去豆瓣那个页面
await page.goto(url, {
waitUntil: 'networkidle2' // 网络空闲说明已加载完毕
});
await sleep(3000);
// 页面加载更多按钮出现
await page.waitForSelector('.more');
// 只爬取两页的数据 如果想多来几页，加几次循环就行了
for (let i = 0; i < 1; i++) {
await page.click('.more')
// 点击加载更多
await sleep(3000);
}
// 结果
const result = await page.evaluate(() => {
// 拿到页面上的jQuery
var $ = window.$;
var items = $('.list-wp a');
var links = [];
if (items.length >= 1) {
items.each((index,item)=>{
let it = $(item)
let doubanId = it.find('div').data('id')
let title = it.find('img').attr('alt')
let rate = Number(it.find('strong').text())
let poster = it.find('img').attr('src')
links.push({
doubanId,
title,
rate,
poster
})
});
}
return links
});
// console.log(result); 这条是直接输出的
writerStream = fs.createWriteStream('demo3.txt'); //创建文件
writerStream.write(JSON.stringify(result, undefined, 2), 'UTF8');//写入文件
writerStream.end(); //关闭文件
})();
demo3.txt 如下：
image.png
demo4 登录豆瓣，输入用户名，密码，之后截图，
const puppeteer = require('puppeteer');
const account = '123456@qq.com';
const password = '123456';
(async () => {
const browser = await puppeteer.launch({
headless: false,
// slowMo: 250,
defaultViewport:{ width: 1920, height: 1080 }
});//打开浏览器
const page = await browser.newPage();//打开一个空白页
await page.goto('https://accounts.douban.com/passport/login');//打开豆瓣网站
await page.setViewport({ width: 1920, height: 1080 }) //设置页面大小
await page.click("input[type=phone][name=phone]");
await page.type("input", "9999999");
await page.click("input[type=text][name=code]");
await page.type("input:first-child","123456");
await page.click("a.btn");
await page.screenshot({path: 'douban.png',fullpage:true});//截个图
// await page.click('a.quick');
// await page.evaluate(()=>{ alert(2) }) //js代码执行
})();
任意的js代码执行。
// await page.click('a.quick');
// await page.evaluate(()=>{ alert(2) }) //js代码执行
还可以用这种方式实现点击
const subBtn=await page.$('.btn-account a');
await subBtn.click();
demo5 爬取瓜子车信息 输出两个json文件
const fs = require('fs');
const puppeteer = require('puppeteer');
(async () => {
const browser = await (puppeteer.launch({headless: false}));
const page = await browser.newPage();
// 进入页面
await page.goto('https://www.guazi.com/hz/buy/');
// 获取页面标题
let title = await page.title();
console.log(title);
// 获取汽车品牌
const BRANDS_INFO_SELECTOR = '.dd-all.clearfix.js-brand.js-option-hid-info';
const brands = await page.evaluate(sel => {
const ulList = Array.from($(sel).find('ul li p a'));
const ctn = ulList.map(v => {
return v.innerText.replace(/\s/g, '');
});
return ctn;
}, BRANDS_INFO_SELECTOR);
console.log('汽车品牌: ', JSON.stringify(brands));
let writerStream = fs.createWriteStream('car_brands.json');
writerStream.write(JSON.stringify(brands, undefined, 2), 'UTF8');
writerStream.end();
// await bodyHandle.dispose();
// 获取车源列表
const CAR_LIST_SELECTOR = 'ul.carlist';
const carList = await page.evaluate((sel) => {
const catBoxs = Array.from($(sel).find('li a'));
const ctn = catBoxs.map(v => {
const title = $(v).find('h2.t').text();
const subTitle = $(v).find('div.t-i').text().split('|');
return {
title: title,
year: subTitle[0],
milemeter: subTitle[1]
};
});
return ctn;
}, CAR_LIST_SELECTOR);
console.log(`总共${carList.length}辆汽车数据: `, JSON.stringify(carList, undefined, 2));
// 将车辆信息写入文件
writerStream = fs.createWriteStream('car_info_list.json');
writerStream.write(JSON.stringify(carList, undefined, 2), 'UTF8');
writerStream.end();
browser.close();
})();
