Puppeteer触ってみる

# 環境
- Mac
- Node.js v15.3.0
- Npm 7.0.14
- puppeteer 5.5.0

# ■ 画面操作
日本Seleniumユーザーコミュニティの[テストサイト](http://www.selenium.jp/test-site)を利用
### 1. 予約サイト

```js
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. 実行結果
![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/57d79f15-d9b3-8af0-6b38-c93700d0b50c.png)
![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/ff1c63b2-43ba-c476-3d7f-f7acfa85a325.png)
![nextpage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/77533b77-96a1-ee78-244b-b201fe5864a6.png)
![commit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/9aa82707-60db-e6c3-f2ba-93976716eede.png)

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

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

![before_Renewal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/e4425556-b15b-1d5b-bf3b-56d4d196e5f1.png)
![after_Renewal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/543a6ec2-811d-2584-c684-6fc74bb98fa5.png)
![nextpage_Renewal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/6adc2010-acf9-82f6-0c7d-555353cbf930.png)
![commit_Renewal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/256753/930b994c-dd06-6905-9e22-d72e57dd5ff2.png)