Zenn
👶

保育園の連絡帳を Playwright と GitHub Actions で毎朝自動送信する

に公開
GitHub Actions
Playwright
tech

子供の通っている保育園の手書きの連絡帳が、ついに Web 化され大変便利になりました 🙌

が、前日下書きしておいたものを、当日朝に送信するのをつい忘れてしまいます... (朝は忙しい...)
Playwright と GitHub Actions (無料枠) で毎朝自動送信するようにしてみます。

npm init playwright@latest

適当なリポジトリを作成し、実行します
Add a GitHub Actions workflow? は Yes にしておきましょう

npm init playwright@latest

> npx
> create-playwright

Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · true
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

GitHub Actions

上記を実行すると .github/workflows/playwright.yml が生成されます。
少し編集します (コメント部分)

cron の時刻は UTC で記述します
タイムゾーンは env TZ: 'Asia/Tokyo' で指定しています (連絡帳アプリによってはここを見て表示しているかもしれません)
ログイン情報は GitHub Secrets を使います

name: nursery contact book submit

on:
  # Actiosn を手動で実行できるように
  workflow_dispatch:
  # スケジュール実行
  schedule:
  # 平日毎朝 8 時 (JST)
  - cron: '0 23 * * 0-4'

jobs:
  submit:
    timeout-minutes: 5
    runs-on: ubuntu-latest
    env:
      # TimeZone 設定
      TZ: 'Asia/Tokyo'
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
      # GitHub Secrets から環境変数でログイン情報を埋め込みます
      # https://docs.github.com/ja/actions/security-for-github-actions/security-guides/using-secrets-in-github-actions
      env:
        NURSERY_LOGIN_URL: ${{ secrets.NURSERY_LOGIN_URL }}
        NURSERY_EMAIL: ${{ secrets.NURSERY_EMAIL }}
        NURSERY_PASSWORD: ${{ secrets.NURSERY_PASSWORD }}
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 7

Playwright コード

ここからはお使いの連絡帳によりコードが異なります。

VS Code の拡張を利用し、ブラウザで操作してコードを自動生成すると便利です
https://playwright.dev/docs/getting-started-vscode

例として私の保育園の連絡帳のものを tests/nursery_submit.spec.js として保存しました。

import { test, expect } from '@playwright/test'

test('nursery-submit', async ({ page }) => {
  const loginURL = process.env.NURSERY_LOGIN_URL || ''
  if (!loginURL) {
    throw new Error('NURSERY_LOGIN_URL environment variable must be set.')
  }

  const email = process.env.NURSERY_EMAIL || ''
  const password = process.env.NURSERY_PASSWORD || ''
  if (!email || !password) {
    throw new Error('NURSERY_EMAIL and NURSERY_PASSWORD environment variables must be set.')
  }

  await page.goto(loginURL)
  await page.getByRole('textbox', { name: 'ID（メールアドレス）' }).click()
  await page.getByRole('textbox', { name: 'ID（メールアドレス）' }).fill(email)
  await page.getByRole('textbox', { name: 'パスワード' }).click()
  await page.getByRole('textbox', { name: 'パスワード' }).fill(password)
  await page.getByRole('button', { name: 'ログイン' }).click()
  await page.getByRole('button', { name: '確認する' }).click()

  await expect(page.getByText('送信する内容を確認してください')).toBeVisible()

  // プールに参加する
  await expect(page.getByText('参加', { exact: true })).toBeVisible()

  await page.getByRole('button', { name: '送信する' }).click()
})

動作確認

GitHub Actions でブランチを指定して手動実行する他、
main ブランチ (default ブランチ) にマージするとスケジュール実行されます。

デバッグ

Recording Options を追加すると動画や、エラー時のキャプチャを保存できます。
https://playwright.dev/docs/test-use-options#recording-options

playwright.config.ts に以下を追加します。

export default defineConfig({
  use: {
    // Capture screenshot after each test failure.
    screenshot: 'only-on-failure',

    // Record trace only when retrying a test for the first time.
    trace: 'on-first-retry',

    // Record video only when retrying a test for the first time.
    video: 'on-first-retry'
  },
});

GitHub Actions の actions/upload-artifact@v4 で成果物を upload しています。
一番下の Artifact download URL から実行時の動画 (webm) やキャプチャ (png) が入った zip をダウンロードできます。

Run actions/upload-artifact@v4
With the provided path, there will be 20 files uploaded
Artifact name is valid!
Root directory input is valid!
Beginning upload of artifact content to blob storage
Uploaded bytes 1318767
Finished uploading artifact content to blob storage!
SHA256 digest of uploaded artifact zip is 0f240b9bdf6cacf203e91e7456d5772c07fc59294bc119e74002babd2ec0c7c0
Finalizing artifact upload
Artifact playwright-report.zip successfully finalized. Artifact ID 3290175218
Artifact playwright-report has been successfully uploaded! Final size is 1318767 bytes. Artifact ID is 3290175218
Artifact download URL: https://github.com/example/example-submit/actions/runs/12547237711/artifacts/3282175211

大変便利ですね！

終わりに

これで子供が元気なのにプールに参加できなくなることが無くなりそうです。
お読みいただき誠にありがとうございました！！

Discussion