QAエンジニア｜Playwrightで環境(URL)違いを選んでテストする方法

QAエンジニア学習記録
2025.09.06

PythonでPlaywrightの自動テストしていると、環境（stg / test / dev など）ごとにURLやログイン情報を変えたいことってありますよね。
でもコードに直書きすると、環境を切り替えるたびに修正が必要になり、ミスも増えてしまいます。

この記事を読むと、こんなことができます。

  • コードは1本のまま
  • 実行時に環境を選ぶだけで、自動的にURLやログイン情報を切り替えてテスト実行

解説は ローカル専用のシンプル運用 に絞っています。
コピペで動くので、コーディング未経験のQAエンジニアでも安心です。

大まかな流れ

  1. 環境ごとに .env を作成
  2. VS Code の launch.json を作成
  3. .env を読み込むヘルパー（config_loader）を作成
  4. メインスクリプト（run_tests.py）でヘルパーを呼び出す
  5. 実行して環境を切り替え

フォルダとファイル構成例としてはこのようになる想定です。

C:\qa\playwright-demo
├─ .venv/ # Python仮想環境
├─ .env.stg # STG用の環境変数
├─ .env.test # TEST用の環境変数
├─ run_tests.py # メインスクリプト
├─ modules/ # 補助モジュール置き場
│ ├─ __init__.py
│ └─ config_loader.py # .envを読み込むヘルパー
└─ .vscode/
    └─ launch.json             # VS Codeの実行構成

1. 環境ごとに.env作成

📌 例：プロジェクト直下 に保存

  • .env.stg
  • .env.test

例：.env.stg

URL=https://stg.example.app/login
DOMAIN=example-domain
EMAIL=user@example.com
PASSWORD=your-password-here

例：.env.test

URL=https://test.example.app/login
DOMAIN=example-domain
EMAIL=user@example.com
PASSWORD=your-password-here

.envってなに？

.env ファイルは、アプリケーションやプロジェクトに必要な設定情報を保存するためのファイルです。
environment（環境変数）の略で
主に環境変数（アプリケーションの設定値）を格納するために使います。

アプリケーションが動作するために必要な情報（URLやパスワードなど）を通常コード内に直書きせず、外部のファイル（.env）に保存して管理することで、コードを変更せずに環境を変更したり、設定を変更したりできます。

Appiumでいう、environments.json ファイルに似た役割です。
environments.json ファイルも、環境ごとの設定を保存して
それを基にテスト実行時に必要な設定を読み込みます。

2. VS Code の launch.jsonを作成

📌 作成場所：.vscode/launch.json

{
  "version": "0.2.0",
  "inputs": [
    {
      "id": "env",
      "type": "pickString",
      "description": "実行する環境を選択",
      "options": ["stg", "test"],
      "default": "stg"
    }
  ],
  "configurations": [
    {
      "name": "Run Tests (選択式)",
      "type": "debugpy",
      "request": "launch",
      "program": "${workspaceFolder}/run_tests.py",
      "args": ["--env", "${input:env}"]
    }
  ]
}

VS Codeで F5 を押すと、画面上部に 実行環境を選ぶポップアップ が表示されます

3. 環境読み込み用ヘルパーを作成

次に .env を読み込む専用モジュールを用意します。

📌 保存場所：modules/config_loader.py

from dataclasses import dataclass
from pathlib import Path
import os
from dotenv import load_dotenv

@dataclass
class Auth:
    url: str
    tenant: str
    email: str
    password: str

def load_auth(env_name: str | None = None) -> Auth:
    env = env_name or os.getenv("APP_ENV", "stg")
    root = Path(__file__).resolve().parents[1]
    env_file = root / f".env.{env}"
    if not env_file.exists():
        env_file = root / ".env"
    if not env_file.exists():
        raise FileNotFoundError(f"環境ファイルが見つかりません: {env_file}")

    load_dotenv(env_file)
    return Auth(
        url=os.getenv("URL", ""),
        tenant=os.getenv("TENANT", ""),
        email=os.getenv("EMAIL", ""),
        password=os.getenv("PASSWORD", ""),
    )

この関数 load_auth() を使えば、指定した環境の .env からログイン情報を取得できます。

dotenvってなに？

dotenvとは環境変換ファイル（.env）を読み取って、環境変数として使えるようにするためのツールです。
dotenvは標準ライブラリではなく、外部ライブラリ”python-dotenv”に含まれています。
そのため別途インストールする必要があります。

pip install python-dotenv

インストール済みか確認したい場合は下記コマンドで確認します。

pip show python-dotenv

4. メインスクリプト（run_tests.py）

📌 保存場所：run_tests.py

import argparse
from pathlib import Path
import os
from dataclasses import dataclass
from dotenv import load_dotenv
from playwright.sync_api import sync_playwright, Page

@dataclass
class Auth:
    url: str
    domain: str
    email: str
    password: str

def load_auth(env_name: str | None = None) -> Auth:
    """指定した環境の .env ファイルを読み込んで認証情報を返す"""
    env = env_name or os.getenv("APP_ENV", "stg")
    root = Path(__file__).resolve().parent
    env_file = root / f".env.{env}"
    if not env_file.exists():
        env_file = root / ".env"
    if not env_file.exists():
        raise FileNotFoundError(f"環境ファイルが見つかりません: {env_file}")

    load_dotenv(env_file)
    return Auth(
        url=os.getenv("URL", ""),
        domain=os.getenv("DOMAIN", ""),   # Tenant → Domain に変更
        email=os.getenv("EMAIL", ""),
        password=os.getenv("PASSWORD", ""),
    )

def login_and_get_page(auth: Auth) -> Page:
    """PlaywrightでログインしてPageオブジェクトを返す"""
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False, slow_mo=300)
        context = browser.new_context(viewport={"width": 1280, "height": 800})
        page = context.new_page()

        # ログイン画面へアクセス
        page.goto(auth.url)
        page.get_by_label("Domain").fill(auth.domain)    # Tenant → Domain
        page.get_by_label("Email").fill(auth.email)
        page.get_by_label("Password").fill(auth.password)
        page.get_by_role("button", name="ログイン").click()

        # ログイン後の画面確認（適宜書き換え）
        page.get_by_text("ダッシュボード").wait_for(timeout=5000)
        print("ログイン成功！")

        return page  # この後に追加のテスト処理を書ける

if __name__ == "__main__":
    parser = argparse.ArgumentParser()
    parser.add_argument("--env", choices=["stg", "test"], default="stg")
    args = parser.parse_args()

    auth = load_auth(args.env)
    page = login_and_get_page(auth)

    # ▼ここから追加テスト処理を書く
    # 例: タスク登録など
    # page.get_by_placeholder("タスクを入力").fill("サンプルタスク")
    # page.get_by_role("button", name="追加").click()

こうすることで、URLや認証情報をコードに直書きする必要がなくなります。

5. VS Codeで実行して環境を切り替える

  1. F5 を押す
  2. 「環境を選択（stg / test）」のポップアップが出る
  3. 選択した環境の設定でテストが実行される

ちょっと安心テク（任意）

  • Windowsなら .env.xxx を右クリック → プロパティ → 「読み取り専用」にしておくと誤編集防止に。
  • 「隠しファイル」にすると目立たなくなり、うっかり開くミスを減らせます。

まとめ

  • .env で環境ごとに設定を分離すれば、コードは1本のまま。
  • VS Codeの構成は1つだけで、起動時に環境を選べる。
  • ちょっとした工夫で安心して環境切替を運用できる。

ぜひ活用してみてください！

タイトルとURLをコピーしました