【初心者】Puppeteerでよく使うコードベスト3

はじめに

毎月末になると、ルーティンで作業工数の入力をしています。
JavaScriptで半自動で入力していて、５分ほどで入力出来ています。
が、憂鬱すぎるので全自動化することにしました。
ググって最初に目に付いたPuppeteerを利用します。
実際に利用してみてベースとなるコード、更によく使うコードがわかったのでQiitaに残します。

コード

基本のコード

kihon.js

const puppeteer = require('puppeteer');
// ID・アカウント認証する時はここでID・アカウント情報を読み込む↓
// 後述
// ID・アカウント認証する時はここでID・アカウント情報を読み込む↑

(async () => {
    const browser = await puppeteer.launch({
        headless: false,  // ブラウザの動きを表示
        slowMo: 50  // puppeteerの操作を遅らせる
    })
    const page = await browser.newPage()

    // ページを開く
    await page.goto('https://www.google.com/')

    // 必要な処理を書く↓
    // 後述
    // 必要な処理を書く↑

    // ブラウザを閉じる
    await browser.close()
})()

ID・アカウント認証する時はここでID・アカウント情報を読み込む

const {USER, PWD} = require('./config.json'); // 認証が必要であれば別ファイルのconfigファイルから読み込む

config.jsonの中身は以下

config.json

{
    "USER":"xxx",
    "PWD":"xxx"
}

必要な処理（よく使うコード）

今回だと使うコードは決まっていて、必要な値を入力して、ボタンをクリックして登録するだけでしたので以下の操作で事足りました。

// 指定した時間待つ
await page.waitFor(10000); // ミリ秒

// 入力
await page.type("#IdUser", 'userName'); // セレクタ,入力文字。
await page.type("#IdUser", USER); // 変数の場合

// クリック
await page.click("#loginButton"); // セレクタ

// テキスト取得
const text = await page.$eval('td.timeHour', text => text.textContent) // セレクタ

最終的なコード

kihonプラスα.js

const puppeteer = require('puppeteer');
// ID・アカウント認証する時はここでID・アカウント情報を読み込む
const {USER, PWD} = require('./config.json'); // 認証が必要であれば別ファイルのconfigファイルから読み込む

(async () => {
    const browser = await puppeteer.launch({
        headless: false,  // ブラウザの動きを表示
        slowMo: 50  // puppeteerの操作を遅らせる
    })
    const page = await browser.newPage()

    // ページを開く
    await page.goto('https://www.google.com/')

    // 必要な処理を書く
    // 指定した時間待つ
    await page.waitFor(10000); // ミリ秒
    // 入力
    await page.type("#IdUser", USER); // 変数の場合
    // クリック
    await page.click("#loginButton"); // セレクタ
    // テキスト取得
    const text = await page.$eval('td.timeHour', text => text.textContent) // セレクタ

    // ブラウザを閉じる
    await browser.close()
})()

参考

• 公式
• Puppeteer
• 環境構築
• 10分ではじめるpuppeteer
• サンプルコード
• puppeteerを体験してみた
• よく使う操作解説
• Puppeteerを使った開発の勘所