puppeteer进阶之12306买票

开始准备工作

安装

1. cnpm i puppeteer
2. 因为要使用到async, await异步处理方法，所以最好是把nodejs升级到7.6.0以上

几个常用的API

1. puppeteer.launch([options])

   • options <Object> 启动浏览器时的配置，可能存在如下字段:

     • ignoreHTTPSErrors <boolean> 是否忽略在导航阶段 HTTPS引发的错误，默认为false

     • headless <boolean> 是否以一种 headless mode的模式来启动浏览器。 只要devtools 选项不为true，那么此选项的默认值就是 true

     • executablePath <string> Chromium 或 Chrome 的运行路径而不是安装路径。 如果 executablePath 是一个相对目录, 那么它应该是相对于 current working directory。

     • slowMo <number> 通过改变此值来减缓 Puppeteer的操作速度，单位是毫秒，当你想知道具体发生了什么情况的时候，此参数将会比较有用。

     • args <Array<string>> 传递给浏览器实例的额外参数，这些参数的可选列表可见与此

     • ignoreDefaultArgs <boolean> 将会使 puppeteer.defaultArgs()失效。 属于比较危险的选项，需要小心使用。默认为 false

     • handleSIGINT <boolean> 程序终止信号，通过按下 Ctrl-C 来关闭浏览器进程，默认为 true

     • handleSIGTERM <boolean> 程序结束信号，当接收到程序结束信号时，关闭浏览器进程，默认为 true。

     • timeout <number> 等待浏览器实例启动的超时时间，单位为 ms，默认是30000 (30秒)，设置为 0标识禁用此选项。

     • devtools <boolean>是否为每个标签页自动打开 DevTools面板，如果为 true, 那么 headless选项将被设置为 false

         demo代码  
         `const browser = await puppeteer.launch({headless:false,slowMo:150});`
         //打开浏览器并设置浏览器为有头模式，并且减慢操作时间为150ms
       

2. browser.newPage()

   • returns: <Promise<Page>>
     • 返回一个新的 Page Promise对象，Page将在一个默认的浏览器上下文中创建。
       const page = await browser.newPage();

   创建一个page对象，后面就用这个对象进行操作

3. page.goto(url, options)

   • url <string> 目标页面的url. url中应该包含协议头，例如 https://。

     • timeout <number> 连接超时时间，单位毫秒, 默认是 30秒, 如果设置为 0则表示禁用此选项。 此值也可以被 page.setDefaultNavigationTimeout(timeout) 方法修改。

     • waitUntil <string|Array<string>> 确认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的登录页
       

4. page.type(selector, text[, options])

   • selector <string> 文本框(包括 texarea和input)的选择器。如果选择器匹配出了多个元素，则只会选择第一个匹配的元素上。

   • text <string> 将要输入到文本框内的文字。

   • options <Object>

   • delay <number> 按键输入的间隔速度，单位为ms。默认为0.

   • returns: <Promise>

   • 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')
      <input id="username" tabindex="1" name="loginUserDTO.user_name" type="text" class="inptxt w200" style="color: rgb(153, 153, 153); width: 309px;">
      //上面这段是从12306网站登录页截取下来的，这里的`#username`就是html元素中的id标识，所以我们只要在网站中去找到这个唯一标识，然后获取它就可以给他赋值了
     

5. page.waitForNavigation(options)

   • options <Object> Navigation 参数，允许存在以下属性

   • timeout <number> navigation超时时间(ms)，默认是 30 seconds, 取值 0则表示禁用此选项。也可以使用 page.setDefaultNavigationTimeout(timeout) 方法来改变默认值。

   • waitUntil <string|Array<string>> navigation导航成功的界限, 默认是 load. 如果给定的值是一个事件名称组成的数组，那么只有当数组中的所有事件全部被触发后才会认为 navigation成功，可选的事件列表如下:

   • load - 当 load 事件触发时，则认为 navigation导航结束。

   • domcontentloaded - 当 DOMContentLoaded 事件触发时，则认为 navigation导航结束。

   • networkidle0 - 如果在 500ms内发起的http请求数为0，则认为导航结束。

   • networkidle2 - 如果在 500ms内发起的http请求数为不超过 2条，则认为导航结束。

   • returns: <Promise<Response>> Promise which resolves to the main resource response. In case of multiple redirects, the navigation will resolve with the response of the last redirect.

   适应于当页面重定向到一个新的url或者reload的场景，例如，当执行了一段可能间接导致页面跳转的代码：

    await page.waitForNavigation({
        waitUntil: 'domcontentloaded'
            })
        console.log(page.url())
        console.log('填写验证码后登录')
        await page.waitForNavigation({
        waitUntil: 'load'
        })
   

   这里因为是手动输入图片验证码，所以设置一个等待函数，在点击登录按钮后直接跳转。

6. page.waitForSelector(selector[, options])

   • selector <string> 被等待的元素的选择器selector

   • options <Object>可选参数：

   • visible <boolean> 出现在DOM中的元素必须是可见的(visible)，例如，不能有 display: none 或者 visibility: hidden CSS 属性。默认是 false。

   • hidden <boolean>元素不存在于DOM中(包括一开始就不存在，或者存在了又被移除掉)，或者是被隐藏了, 例如， 具有 display: none 或者 visibility: hidden CSS 属性。默认是false.

   • timeout <number> 最大等待时间(ms)。默认是30000 (30 秒)。取值为的 0则表示禁用此参数。

   • returns: <Promise<ElementHandle>> 当在 DOM中找到 selector指定的元素时，Promise 将会 resolves 这个元素的ElementHandle。

   等到 selector选择器选择的元素出现在页面中，如果在调用此方法的同时选择器选取的元素就已经存在于页面中了，
   则此方法将会立即返回结果，如果超过了最大等待时间 timeout之后，选择器还没有匹配到元素，则将会抛出错误。

   demo中需要等待预定车票的元素出现才会点击跳转：

    await  page.waitForSelector('#selectYuding,#my12306page')
    await page.goto('https://kyfw.12306.cn/otn/leftTicket/init')
   

7. page.evaluate(pageFunction, …args)

   • pageFunction <function|string> 将在page context中执行的函数

   • ...args <…Serializable|JSHandle> 传递给 pageFunction的参数

   • returns: <Promise<Serializable>> Promise which resolves to the return value of pageFunction

   • 如果传递给 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 id="fromStation" type="hidden" value="SHH" name="leftTicketDTO.from_station">
    <input type="text" id="fromStationText" class="inp-txt inp_selected" value="" name="leftTicketDTO.from_station_name">
   

   所以在输入出发地和到达地的时候，直接获取起作用的那个隐藏的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') //确认按钮
        })

8. 完整代码

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();
})();