![[kaneko lab.]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
Python で Playwright を使ってみる
【概要】
Python から Playwright を使って Webブラウザを自動操作し、Webページ内の要素を取得・クリックする方法を扱う。前準備として Python 3.12 と Visual Studio Code、playwright ライブラリおよびブラウザ本体を導入したうえで、ブラウザのディベロッパーツールで要素の XPath を調べ、Playwright の自動待機（オートウェイティング）機能を使ってクリックする実例を示す。
【目次】
【関連する外部ページ】
- Python公式サイト：https://www.python.org/
- Playwright 公式サイト：https://playwright.dev/python/
【サイト内の関連情報】
前準備
Python 3.12 のインストール
Pythonのインストールを行い、Pythonのプログラムを実行する環境を整える。扱う環境は、Windows搭載パソコンである。金子研究室では、Python 3.12.10を推奨する。
[Windows での Python 3.12 のインストール手順を見るには、ここをクリック]
Windows での Python 3.12 のインストール
以下のいずれかの方法でPython 3.12をインストールする。Pythonがインストール済みの場合、この手順は不要である。
方法 1：winget によるインストール
【インストールコマンドの実行方法】
管理者権限でコマンドプロンプトを起動する（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして、コマンド全体をコマンドプロンプトにコピー＆ペーストする。
--scope machine を指定することで、システム全体（全ユーザー向け）にインストールされる。このオプションの実行には管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動するとPATHが反映される。
REM Python 3.12 をシステム領域にインストール
winget install --id Python.Python.3.12 -e --scope machine --silent --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_test=0 Include_pip=1 Include_launcher=1 InstallLauncherAllUsers=1 TargetDir=\"C:\Program Files\Python312\""
REM Python と Scripts を PATH 先頭に追加
powershell -NoProfile -Command "$p='C:\Program Files\Python312'; $s=\"$p\Scripts\"; $c=[Environment]::GetEnvironmentVariable('Path','Machine'); if((Test-Path $p) -and (';'+$c+';' -notlike \"*;$p;*\") -and (';'+$c+';' -notlike \"*;$s;*\")){[Environment]::SetEnvironmentVariable('Path',\"$p;$s;$c\",'Machine')}"
方法 2：インストーラーによるインストール
- Python公式サイト（https://www.python.org/downloads/）にアクセスし、「Download Python 3.x.x」ボタンからWindows用インストーラーをダウンロードする。
- ダウンロードしたインストーラーを実行する。
- 初期画面の下部に表示される「Add python.exe to PATH」にチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから
pythonコマンドを実行できない。 - 「Install Python 3.xx for all users」にチェックを入れ、「Install」をクリックする。
インストールの確認
コマンドプロンプトで以下を実行する。
python --versionバージョン番号（例：Python 3.12.x）が表示されればインストール成功である。「'python' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していない。
Python の開発環境 Visual Studio Code のインストールと Python 用の設定
Python の開発環境Visual Studio Code（プログラムを編集するソフトウェア。以下、VS Code）を整える。
[Windows での Visual Studio Code のインストールと Python 用の設定手順を見るには、ここをクリック]
Windows での Visual Studio Code のインストールと Python 用の設定手順
1. VS Code と拡張機能のインストール
以下のコマンドにより，既存の VS Code を削除し，全ユーザー共有の設定で再インストールしたうえで，拡張機能（VS Code に機能を追加するソフトウェア）をまとめて導入する．
【インストールコマンドの実行方法】
管理者権限でコマンドプロンプトを起動する（手順：Windows キーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして，コマンド全体をコマンドプロンプトにコピー＆ペーストする。
インストールコマンド
REM ============================================================
REM Microsoft Visual Studio Code
REM ============================================================
winget uninstall -e --id Microsoft.VisualStudioCode --silent --disable-interactivity --accept-source-agreements
rmdir /s /q C:\ProgramData\vscode-extensions 2>nul
rmdir /s /q "%APPDATA%\Code" 2>nul
rmdir /s /q "%USERPROFILE%\.vscode" 2>nul
rmdir /s /q "%LOCALAPPDATA%\Microsoft\vscode-update" 2>nul
REM VS Code をシステム領域に新規インストール
winget install --scope machine --id Microsoft.VisualStudioCode -e --silent --accept-source-agreements --accept-package-agreements
REM 全ユーザー共有の拡張機能フォルダ
mkdir C:\ProgramData\vscode-extensions 2>nul
icacls "C:\ProgramData\vscode-extensions" /grant "Everyone:(OI)(CI)M" /T
REM スタートメニューのショートカットを --extensions-dir 付きで再作成
rmdir /s /q "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code" 2>nul
del "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk" 2>nul
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); $lnk.TargetPath='C:\Program Files\Microsoft VS Code\Code.exe'; $lnk.Arguments='--extensions-dir \"C:\ProgramData\vscode-extensions\"'; $lnk.Save()"
REM ショートカットの検証
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); Write-Host 'TargetPath:' $lnk.TargetPath; Write-Host 'Arguments:' $lnk.Arguments"
REM ファイル / フォルダ右クリックの「Code で開く」を登録
reg add "HKLM\SOFTWARE\Classes\*\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\Background\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%V\"" /f
REM --extensions-dir 付きで起動する code.cmd ラッパを作成
REM （%* を echo で書くと対話的 cmd で失われるため、PowerShell で [char]37+'*' を書き出す）
powershell -NoProfile -Command "$pct=[char]37; $q=[char]34; $c='@echo off'+[char]13+[char]10+$q+'C:\Program Files\Microsoft VS Code\bin\code.cmd'+$q+' --extensions-dir '+$q+'C:\ProgramData\vscode-extensions'+$q+' '+$pct+'*'+[char]13+[char]10; [IO.File]::WriteAllText('C:\ProgramData\vscode-extensions\vscode.cmd',$c,[Text.Encoding]::ASCII)"
REM 拡張機能のインストール
set "CODE=C:\Program Files\Microsoft VS Code\bin\code.cmd"
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot-chat
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.python
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.vscode-pylance
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.debugpy
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension MS-CEINTL.vscode-language-pack-ja
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension saoudrizwan.claude-dev
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension rust-lang.rust-analyzer
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension tamasfe.even-better-toml
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension anthropic.claude-code
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension almenon.arepl
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --list-extensions --show-versions
echo === セットアップ完了 ===
2. Python インタプリタの選択
同一マシンに複数の Python がインストールされている場合，VS Code で使用する Python 本体（インタプリタ：Python プログラムを解釈・実行するソフトウェア）を選択する必要がある．
- コマンドパレット（コマンド名で機能を呼び出す VS Code の入力欄）を開く（
Ctrl+Shift+P） Python: Select Interpreterと入力する
- 表示される一覧から，使用する Python（例：
C:\Program Files\Python312\python.exe）を選択する．
Python プログラム実行手順
[Windows での Python プログラム実行手順を見るには、ここをクリック]
Windows での Python 実行手順（Visual Studio Codeを使用）
プログラムファイルの作成と保存
- 左サイドバーの「エクスプローラー」アイコン（
Ctrl+Shift+E）をクリックする
- 「NO FOLDER OPENED」（作業対象フォルダが未選択の状態）と表示される場合は，「Open Folder」をクリックし，プログラムを保存するフォルダを選択する
続いて「フォルダを信用するか」を確認する画面（フォルダ内のコードを実行してよいか確認する VS Code の仕組み）が表示されるので，チェックして Yes を選択する
- フォルダ名の右側に表示される「新しいファイル」アイコンをクリックする
- ファイル名（例：
aitask.py．ファイル名は何でも良い）を入力しEnterを押す．拡張子は.py（Python ファイルを示す拡張子）とする
- 実行したいコードを選択し，
Ctrl+Cでコピーする．VS Code のエディタ領域にCtrl+Vで貼り付ける Ctrl+Sで保存する
プログラムの実行
- エディタ右上の三角形「▷」アイコン（Run Python File：現在開いている Python ファイルを実行するボタン）をクリックする．または，エディタ上で右クリックし「ターミナルで Python ファイルを実行」を選択する
- VS Code 下部のターミナル（コマンドの入出力を表示する画面）に，実行結果（
print関数の出力等）が表示される
- tkinter（Python 標準の GUI ライブラリ）のファイル選択ダイアログを使うプログラムを実行した場合は，ダイアログが開くので対象画像を選択する
- VS Code 下部のターミナルで実行結果を確認する．OpenCV ウィンドウ（OpenCV が画像を表示するために開く専用ウィンドウ）が開いた場合はそちらも確認する．OpenCV ウィンドウは，マウスクリックでウィンドウをアクティブ（操作対象の状態）にしてからキーを押すと終了する
必要なPythonライブラリのインストール
- 管理者権限でコマンドプロンプトを起動する
（手順：Windowsキーまたはスタートメニュー →
cmdと入力 → 右クリック → 「管理者として実行」）。 - 以下のコマンドを実行し，必要なライブラリをインストールする．
pip install -U --no-user playwright - 続けて，以下のコマンドを実行し，Playwright が使用するブラウザ本体（Chromium・Firefox・WebKit）をインストールする．このコマンドは pip のコマンドではなく，playwright パッケージに同梱された専用のコマンドであるため，
--no-userは付けない．playwright install
Playwright による要素の取得・操作
Playwright は，ブラウザ本体（Chromium・Firefox・WebKit）を自身で管理する設計になっており，Selenium のように別途ブラウザ用ドライバをダウンロード・配置する作業は不要である。上記の playwright install を実行しておけば，コードの中でブラウザを起動するだけで自動操作を開始できる。
Webページ内の要素を取得する際には，ブラウザのディベロッパーツール（Webページの構造やスクリプトの動作を調べるための，ブラウザに組み込まれた検証用の機能）を使い，要素の XPath（HTML文書内で要素の位置を指定するための記法）を調べる方法が便利である。手順は次のとおりである。
- 分析したいWebページを Google Chrome で表示する。例えば
https://store.nintendo.co.jp/customize.html。 - その状態で，Google Chrome のディベロッパーツールを起動する（
Ctrl+Shift+I）。 - 左上の「Select an element in the page to inspect it」のアイコンをクリックする。
- HTML画面内で対象の要素を選ぶ。
- 右側の画面で右クリックし，メニューから「Copy XPath」を選ぶ。例：
//*[@id="custoize_toCart"]/span/button
取得した XPath を使い，対象の要素をクリックするコードの例を次に示す。Playwright の locator() は，対象の要素が画面に表示され，クリック可能な状態になるまで自動で待ってから操作を実行する（オートウェイティング）ため，Selenium のコード例にあったような，要素が現れるまで自分でループを書いて待つ処理は不要である。
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto('https://store.nintendo.co.jp/customize.html')
page.locator('xpath=//*[@id="custoize_toCart"]/span/button').click()
browser.close()
このコードは同期API（playwright.sync_api）を使っている。同期APIは，上から下へ順番に処理が進む書き方（同期処理）であり，asyncやawaitを使わずに書けるため，最初にPlaywrightを学ぶ場合に適している。この記事で扱うような，１つのブラウザで１つのページを順番に操作する用途には，同期APIで十分である。
一方，非同期API（playwright.async_api）が必要になるのは，主に次のような場合である。複数のページやブラウザを同時に並行して操作したい場合（例えば，何十件ものURLに同時にアクセスして情報を集めたい場合）、Webアプリケーションのサーバ側やAPI側がすでにasyncio（Python標準の非同期処理の仕組み）で書かれていて、その処理の中にPlaywrightの操作を組み込みたい場合、FastAPIなど非同期処理を前提としたWebフレームワークと連携させたい場合である。これらに該当しない限り，同期APIのまま学習・利用を進めて問題ない。