puppeteer进阶之12306买票
开始准备工作
安装
cnpm i puppeteer- 因为要使用到async, await异步处理方法，所以最好是把nodejs升级到7.6.0以上
几个常用的API
-
puppeteer.launch([options])-
options启动浏览器时的配置，可能存在如下字段:ignoreHTTPSErrors是否忽略在导航阶段 HTTPS引发的错误，默认为falseheadless是否以一种headless mode的模式来启动浏览器。 只要devtools 选项不为true，那么此选项的默认值就是 trueexecutablePath或Chromium Chrome的运行路径而不是安装路径。 如果executablePath是一个相对目录, 那么它应该是相对于current working directory。slowMo通过改变此值来减缓Puppeteer的操作速度，单位是毫秒，当你想知道具体发生了什么情况的时候，此参数将会比较有用。args传递给浏览器实例的额外参数，这些参数的可选列表可见与此ignoreDefaultArgs将会使puppeteer.defaultArgs()失效。 属于比较危险的选项，需要小心使用。默认为falsehandleSIGINT程序终止信号，通过按下Ctrl-C来关闭浏览器进程，默认为truehandleSIGTERM程序结束信号，当接收到程序结束信号时，关闭浏览器进程，默认为true。timeout等待浏览器实例启动的超时时间，单位为ms，默认是30000 (30秒)，设置为0标识禁用此选项。-
devtools是否为每个标签页自动打开DevTools面板，如果为true, 那么headless选项将被设置为falsedemo代码 `const browser = await puppeteer.launch({headless:false,slowMo:150});` //打开浏览器并设置浏览器为有头模式，并且减慢操作时间为150ms
-
-
browser.newPage()-
returns:- 返回一个新的
Page Promise对象，Page将在一个默认的浏览器上下文中创建。
const page = await browser.newPage();
- 返回一个新的
创建一个page对象，后面就用这个对象进行操作
-
-
page.goto(url, options)-
url目标页面的url. url中应该包含协议头，例如https://。timeout连接超时时间，单位毫秒, 默认是 30秒, 如果设置为 0则表示禁用此选项。 此值也可以被 page.setDefaultNavigationTimeout(timeout) 方法修改。waitUntil确认navigation成功的条件, 默认是load。如果给定的值是一个事件组成的数组，那么只有当数组中的所有事件全部被触发后才会认为navigation成功，可选的事件列表如下:load- 当load事件触发时，则认为navigation导航结束。domcontentloaded- 当DOMContentLoaded事件触发时，则认为navigation导航结束。networkidle0- 如果在 500ms内发起的http请求数为0，则认为导航结束。-
networkidle2- 如果在 500ms内发起的http请求数为不超过 2条，则认为导航结束。`await page.goto('https://kyfw.12306.cn/otn/login/init')` //页面跳转到12306的登录页
-
-
page.type(selector, text[, options])selector文本框(包括texarea和input)的选择器。如果选择器匹配出了多个元素，则只会选择第一个匹配的元素上。text将要输入到文本框内的文字。optionsdelay按键输入的间隔速度，单位为ms。默认为0.returns:Sends a keydown, keypress/input, and keyup event for each character in the text.-
效果等同于
page.click()demo代码 await page.type('#username', 'yourtelephone') await page.type('#password', 'yourpassword') //上面这段是从12306网站登录页截取下来的，这里的`#username`就是html元素中的id标识，所以我们只要在网站中去找到这个唯一标识，然后获取它就可以给他赋值了
-
page.waitForNavigation(options)options参数，允许存在以下属性timeout超时时间(ms)，默认是 30 seconds, 取值 0则表示禁用此选项。也可以使用navigation page.setDefaultNavigationTimeout(timeout)方法来改变默认值。waitUntil导航成功的界限, 默认是 load. 如果给定的值是一个事件名称组成的数组，那么只有当数组中的所有事件全部被触发后才会认为navigation成功，可选的事件列表如下:load- 当 load 事件触发时，则认为navigation导航结束。domcontentloaded- 当DOMContentLoaded事件触发时，则认为navigation导航结束。networkidle0- 如果在 500ms内发起的http请求数为0，则认为导航结束。networkidle2- 如果在 500ms内发起的http请求数为不超过 2条，则认为导航结束。returns:
适应于当页面重定向到一个新的url或者reload的场景，例如，当执行了一段可能间接导致页面跳转的代码：
await page.waitForNavigation({ waitUntil: 'domcontentloaded' }) console.log(page.url()) console.log('填写验证码后登录') await page.waitForNavigation({ waitUntil: 'load' })这里因为是手动输入图片验证码，所以设置一个等待函数，在点击登录按钮后直接跳转。
-
page.waitForSelector(selector[, options])selector被等待的元素的选择器selectoroptions可选参数：visible出现在DOM中的元素必须是可见的(visible)，例如，不能有 display: none 或者 visibility: hidden CSS 属性。默认是 false。hidden元素不存在于DOM中(包括一开始就不存在，或者存在了又被移除掉)，或者是被隐藏了, 例如， 具有display: none或者visibility: hidden CSS属性。默认是false.timeout最大等待时间(ms)。默认是30000 (30 秒)。取值为的0则表示禁用此参数。returns:
等到 selector选择器选择的元素出现在页面中，如果在调用此方法的同时选择器选取的元素就已经存在于页面中了，
则此方法将会立即返回结果，如果超过了最大等待时间 timeout之后，选择器还没有匹配到元素，则将会抛出错误。demo中需要等待预定车票的元素出现才会点击跳转：
await page.waitForSelector('#selectYuding,#my12306page') await page.goto('https://kyfw.12306.cn/otn/leftTicket/init') -
page.evaluate(pageFunction, …args)pageFunction将在page context中执行的函数...args <…Serializable|JSHandle>传递给pageFunction的参数returns:如果传递给 page.evaluate的 pageFunction函数返回一个 Promise，则page.evaluate将会等待得到resolve后，才会返回它自己的值。
-
如果传递给 page.evaluate的 pageFunction函数返回一个 non-Serializable的值，则page.evaluate将会返回 undefined。
await page.evaluate(() => { document.querySelector('#fromStation').value = "SHH"; document.querySelector('#toStation').value = "TJP"; }) // const fromStationText = await page.$("#fromStationText"); // await fromStationText.click(); // await page.keyboard.type("BJP"); // const toStationText = await page.$("#toStationText"); // await toStationText.click(); // await page.keyboard.type("SHH"); await page.tap('#date_icon_1'); //填写表单 console.log('开始填写日期'); await page.evaluate((month, day) => { let cals = document.querySelectorAll('.cal'); let target = Array.from(cals).filter((cal) => cal.querySelector('.month input').value === month)[0]; let days = target.querySelectorAll('.cal-cm .cell') let theDay = Array.from(days).filter(dayel => dayel.innerText === day + '\n')[0]; theDay.click() }, month, day)
这里有个坑需要避开，就是12306的输入出发地和到达站时候，如果你直接给他的输入框赋值是不能成功的，因为他有两个input框，一个能看见，一个隐藏的，当你在input框输入你的到达地时候必须要选择一下才能成功赋值，并且那个隐藏的input框的value值会变化，并且他是以SHH形式标识上海：
所以在输入出发地和到达地的时候，直接获取起作用的那个隐藏的input框，然后给他赋值就可以了。上面的代码后半部分是在给输入框赋值结束后，对时间选择器进行赋值，但是在
evaluate中好像只能用原生的选择器document.querySelectorAll，$$()不起作用，赋值结束后点击查询按钮，出来列车的列表。
await page.tap('#query_ticket') //点击查询按钮
console.log('开始查询');
await page.waitForSelector('tr[datatran]');
let tra = await page.$('[datatran="G216"]');//通过datatran="G216"查找G216车次
await page.evaluate(() => {
var trainId = document.querySelector('[datatran="G216"]').id
console.log(this.trainId)
let tr = document.querySelector('#'+trainId.replace('price','ticket'))
let yuding_btns = tr.querySelector('td:last-child a')//看有没有预定的btn
yuding_btns.click()
})
page.on('load',async () => {
await page.tap('#normalPassenger_0')//点选第一个默认乘客
wait page.tap('#submitOrder_id')//提交按钮
await page.tap('#qr_submit_id') //确认按钮
})
- 完整代码
const puppeteer = require('puppeteer');
const month = '八月';
const day = '30';
(async () => {
const browser = await puppeteer.launch({headless:false,slowMo:150});
const page = await browser.newPage();
await page.setViewport({width:1920, height:1080});
await page.setJavaScriptEnabled(true);
// page.on('console', msg => console.log('PAGE LOG:', msg.text()));
await page.goto('https://kyfw.12306.cn/otn/login/init')
await page.type('#username', 'yourtele')
await page.type('#password', 'yourkey')
await page.waitForNavigation({
waitUntil: 'domcontentloaded'
})
console.log(page.url())
console.log('填写验证码后登录')
await page.waitForNavigation({
waitUntil: 'load'
})
await page.waitForSelector('#selectYuding,#my12306page')
await page.goto('https://kyfw.12306.cn/otn/leftTicket/init')
await page.evaluate(() => {
document.querySelector('#fromStation').value = "SHH";
document.querySelector('#toStation').value = "TJP";
})
// const fromStationText = await page.$("#fromStationText");
// await fromStationText.click();
// await page.keyboard.type("BJP");
// const toStationText = await page.$("#toStationText");
// await toStationText.click();
// await page.keyboard.type("SHH");
await page.tap('#date_icon_1');
//填写表单
console.log('开始填写日期');
await page.evaluate((month, day) => {
let cals = document.querySelectorAll('.cal');
let target = Array.from(cals).filter((cal) => cal.querySelector('.month input').value === month)[0];
let days = target.querySelectorAll('.cal-cm .cell')
let theDay = Array.from(days).filter(dayel => dayel.innerText === day + '\n')[0];
theDay.click()
}, month, day)
//点击查询
await page.tap('#query_ticket')
console.log('开始查询');
await page.waitForSelector('tr[datatran]');
let tra = await page.$('[datatran="G216"]');
await page.evaluate(() => {
var trainId = document.querySelector('[datatran="G216"]').id
console.log(this.trainId)
let tr = document.querySelector('#'+trainId.replace('price','ticket'))
let yuding_btns = tr.querySelector('td:last-child a')//看有没有预定的btn
yuding_btns.click()
})
page.on('load',async () => {
await page.tap('#normalPassenger_0')
await page.tap('#submitOrder_id')
await page.tap('#qr_submit_id')
})
await browser.close();
})();