Puppeteer触ってみる

環境

• Mac
• Node.js v15.3.0
• Npm 7.0.14
• puppeteer 5.5.0

■ 画面操作

日本Seleniumユーザーコミュニティのテストサイトを利用

1. 予約サイト

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://example.selenium.jp/reserveApp/');

  // 入力画面
  await page.screenshot({path: 'before.png'});
  await page.$eval('#reserve_year', el => el.value = '');
  await page.$eval('#reserve_month', el => el.value = '');
  await page.$eval('#reserve_day', el => el.value = '');
  await page.$eval('#reserve_term', el => el.value = '');
  await page.type('#reserve_year', '2021');
  await page.type('#reserve_month', '1');
  await page.type('#reserve_day', '10');
  await page.type('#reserve_term', '5');
  await page.click('#breakfast_off');
  await page.click('#plan_b');
  await page.type('#guestname', 'まん');
  await page.screenshot({path: 'after.png'});

  // 確認画面
  await Promise.all([
      page.waitForNavigation(),
      page.click('#goto_next')
  ])
  await page.screenshot({path: 'nextpage.png'});

  // 完了画面
  await Promise.all([
    page.waitForNavigation(),
    page.click('#commit')
  ])
  await page.screenshot({path: 'commit.png'});

  await browser.close();
})();

2. 実行結果

3. 予約サイト(リニューアル)

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://example.selenium.jp/reserveApp_Renewal/');

  // 入力画面
  await page.screenshot({path: 'before_Renewal.png', fullPage: true});
  await page.focus('#datePick')
  await page.$eval('#datePick', el => el.value = '');
  await page.type('#datePick', '2021/01/22');
  await page.keyboard.down('Tab') // datepickerのカレンダー表示を消すため、Tabで遷移。
  await page.select('#reserve_term', '6')
  await page.click('#breakfast_off');
  await page.click('#plan_b');
  await page.type('#guestname', 'まん');
  await page.screenshot({path: 'after_Renewal.png', fullPage: true});

  // 確認画面
  await Promise.all([
      page.waitForNavigation(),
      page.click('#agree_and_goto_next')
  ])
  await page.screenshot({path: 'nextpage_Renewal.png', fullPage: true});

  // 完了画面
  await Promise.all([
    page.waitForNavigation(),
    page.click('#commit')
  ])
  await page.screenshot({path: 'commit_Renewal.png', fullPage: true});

  await browser.close();
})();