はじめに

この連載では、次の業務フローを 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列読み取りまで進めます。