0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@m37335(Masahiko Sato)

【第1回】Python + Playwright(Firefox)で社内Web自動化を始める（環境構築と最小実行）

0
Posted at

はじめに

この連載では、次の業務フローを Python + Playwright で段階的に自動化します。

  • 特定URLを開く
  • CSVダウンロードボタンを押す
  • CSVのURL列を読み取る
  • URL先ページから特定タグ情報を取得
  • 商品ID1 / 商品ID2 / issue1 / issue2 を構造化
  • DETAIL_BASE_URL + 商品ID1 の派生URLを開いて追加情報を取得
  • 最終テキストを出力（商品ID、商品名、issue1、issue2、特定タグ1）

第1回では、次回以降の実装がスムーズになるように、以下を完成させます。

  • Windows 11 + VS Code で実行環境を作る
  • Playwright を Firefox で起動できる状態にする
  • .env で設定を外出しする基本形を作る
  • 「ログインして任意ページを開く」最小スクリプトを実行する

前提環境

  • OS: Windows 11
  • エディタ: VS Code
  • Python: 3.11 以上（3.12でも可）
  • ブラウザ: Playwright の Firefox

プロジェクト構成（第1回時点）

ticket-workflow/
  ├─ .env.example
  ├─ requirements.txt
  └─ src/
     ├─ config.py
     └─ main.py

1. 仮想環境を作成する

PowerShellでプロジェクトフォルダに移動して実行します。

python -m venv .venv
.\.venv\Scripts\activate
python -m pip install --upgrade pip

VS Codeで Python: Select Interpreter を使い、.venv を選択しておくと以降が楽です。

2. 必要パッケージをインストールする

requirements.txt を作成します。

playwright
python-dotenv
pydantic

インストールします。

pip install -r requirements.txt
python -m playwright install firefox

3. 設定値を .env に外出しする

まずは .env.example` を作り、必要なキーを定義します（値は仮でOK）。

# ===== URL =====
LOGIN_URL=https://example.local/login
CSV_PAGE_URL=https://example.local/csv
DETAIL_BASE_URL=https://example.local/detail?id=

# ===== LOGIN =====
USERNAME=your_username
PASSWORD=your_password

# ===== CSV =====
CSV_URL_COLUMN_NAME=target_url

# ===== SELECTORS (temporary) =====
SEL_LOGIN_USERNAME=input[name='username']
SEL_LOGIN_PASSWORD=input[name='password']
SEL_LOGIN_SUBMIT=button[type='submit']
SEL_CSV_DOWNLOAD_BUTTON=button[data-testid='download-csv']

SEL_PRODUCT_ID1=[data-testid='product-id1']
SEL_PRODUCT_ID2=[data-testid='product-id2']
SEL_PRODUCT_NAME=[data-testid='product-name']
SEL_ISSUE_SOURCE=[data-testid='issue-source']
SEL_DERIVED_TAG1=[data-testid='specific-tag-1']

次に .env.example をコピーして .env を作ります。

copy .env.example .env

.env には実際の認証情報が入るため、Git管理しない運用がおすすめです。

4. 設定読み込みコードを作る（src/config.py）

以下は、初学者向けにコメントを多めにした設定クラスです。

from dotenv import load_dotenv
from pydantic import BaseModel
import os

# .env ファイルの内容を環境変数として読み込みます。
# main.py を実行したときに、このモジュールが import されれば自動で反映されます。
load_dotenv()


class Settings(BaseModel):
    # ===== URL関連 =====
    # ログインページURL
    login_url: str
    # CSVダウンロードページURL
    csv_page_url: str
    # 商品ID1を連結して使う詳細ページのベースURL
    detail_base_url: str

    # ===== ログイン情報 =====
    username: str
    password: str

    # ===== CSV関連 =====
    # CSVからURLを取り出す列名
    csv_url_column_name: str

    # ===== セレクタ関連（仮） =====
    sel_login_username: str
    sel_login_password: str
    sel_login_submit: str
    sel_csv_download_button: str
    sel_product_id1: str
    sel_product_id2: str
    sel_product_name: str
    sel_issue_source: str
    sel_derived_tag1: str


def load_settings() -> Settings:
    # os.getenvで環境変数を1つずつ取得してSettingsに詰めます。
    # ここでキーが不足していると、後で想定外エラーになるため、
    # 連載の次回以降でバリデーションも強化していきます。
    return Settings(
        login_url=os.getenv("LOGIN_URL", ""),
        csv_page_url=os.getenv("CSV_PAGE_URL", ""),
        detail_base_url=os.getenv("DETAIL_BASE_URL", ""),
        username=os.getenv("USERNAME", ""),
        password=os.getenv("PASSWORD", ""),
        csv_url_column_name=os.getenv("CSV_URL_COLUMN_NAME", ""),
        sel_login_username=os.getenv("SEL_LOGIN_USERNAME", ""),
        sel_login_password=os.getenv("SEL_LOGIN_PASSWORD", ""),
        sel_login_submit=os.getenv("SEL_LOGIN_SUBMIT", ""),
        sel_csv_download_button=os.getenv("SEL_CSV_DOWNLOAD_BUTTON", ""),
        sel_product_id1=os.getenv("SEL_PRODUCT_ID1", ""),
        sel_product_id2=os.getenv("SEL_PRODUCT_ID2", ""),
        sel_product_name=os.getenv("SEL_PRODUCT_NAME", ""),
        sel_issue_source=os.getenv("SEL_ISSUE_SOURCE", ""),
        sel_derived_tag1=os.getenv("SEL_DERIVED_TAG1", ""),
    )

5. 最小実行コードを作る（src/main.py）

この時点では、まず「Firefox起動→ログイン→CSVページ遷移」までを目標にします。

from playwright.sync_api import sync_playwright
from config import load_settings


def run() -> None:
    # .env から読み込んだ設定を取得します。
    settings = load_settings()

    # Playwrightのコンテキストを開始します。
    # withブロックを使うことで、異常終了時も後片付けされやすくなります。
    with sync_playwright() as p:
        # Firefoxを起動します。
        # headless=False にすると画面が見えるので、最初のデバッグがしやすいです。
        browser = p.firefox.launch(headless=False)

        # 新しいブラウザコンテキスト（セッション）を作成します。
        context = browser.new_context()

        # 1タブ分のページを取得します。
        page = context.new_page()

        # ログインページへアクセス
        page.goto(settings.login_url)

        # ユーザー名入力欄に値を入れる
        page.fill(settings.sel_login_username, settings.username)

        # パスワード入力欄に値を入れる
        page.fill(settings.sel_login_password, settings.password)

        # ログインボタンをクリック
        page.click(settings.sel_login_submit)

        # ログイン完了後、CSVダウンロード画面へ移動
        page.goto(settings.csv_page_url)

        # この時点では「画面遷移できること」を確認するため、3秒待機
        page.wait_for_timeout(3000)

        # ブラウザを終了
        browser.close()


if __name__ == "__main__":
    run()

6. 実行してみる

python src/main.py

この段階で確認したいこと

  • Firefoxが起動する
  • ログイン画面に遷移できる
  • 入力とクリックが動く
  • CSVページまで遷移できる

よくあるエラーと対処

TimeoutError が出る

  • セレクタが誤っている可能性が高いです。
  • 開発者ツールで対象要素を再確認しましょう。

ログイン後に別画面へ飛ばない

  • ログインボタン押下後に読み込み待機が必要な場合があります。
  • 次回以降で wait_for_load_state() や expect_navigation() を導入します。

.env が読み込まれない

  • 実行場所がプロジェクトルートになっているか確認しましょう。

まとめ

第1回では、以下を達成しました。

  • Playwright(Firefox) の実行環境を用意
  • 設定を .env に外出しする形を作成
  • ログイン〜CSVページ遷移までの最小コードを実行

次回は、CSVダウンロードボタン押下と expect_download() を使った保存処理、そしてCSVのURL列読み取りまで進めます。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?