Playwright調査まとめ
■■■■PlaywrightをPortable Node.jsで試してみたい
素晴らしい選択です。この方法なら、レジストリを一切汚さず、**「フォルダごとUSBメモリに入れて持ち運ぶ」**ことすら可能な自動化環境が作れます。
WindowsのPowerShellを使って、**「インストールなし（Portable）」でPlaywright環境を構築し、画像比較を行うまでの完全手順**をまとめました。
---
### 手順概略
1. **Node.js (Zip版)** をダウンロードして解凍する。
2. **PowerShell** でそのフォルダを一時的にパスに通す。
3. **Playwright** をそのフォルダ内にダウンロードする。
4. **スクリプト** を書いて実行する。
---
### 1. Node.js (Portable版) の準備
まず、Node.jsの公式サイトからインストーラー（msi）ではなく、**Zipファイル**をダウンロードします。
1. [Node.js ダウンロードページ](https://nodejs.org/en/download/prebuilt-binaries) にアクセスします。
2. 以下のように選択してダウンロードします：
* **OS:** Windows
* **Architecture:** x64
* **Format:** **Zip** (ここが重要！)
3. ダウンロードしたZipを、好きな場所に解凍します。
* 例: デスクトップに `PlaywrightPortable` というフォルダを作り、その中に解凍したフォルダ（例: `node-v22.x.x-win-x64`）を入れます。
フォルダ構成は以下のようになります：
```text
PlaywrightPortable/
└─ node-v22.x.x-win-x64/
├─ node.exe
├─ npm.cmd
└─ ...
```
### 2. PowerShellでのセットアップ (環境を汚さない魔法)
ここが最大のポイントです。Windowsの設定画面から環境変数を設定するのではなく、**開いているPowerShellの中だけで有効な設定**を行います。
1. **PowerShell** を起動します。
2. さきほどの `PlaywrightPortable` フォルダに移動します。
```powershell
cd $HOME\Desktop\PlaywrightPortable # パスは実際の場所に合わせる
```
3. **以下のコマンドを実行**して、このPowerShell画面でのみ Node.js を使えるようにします。
* ※ `node-v...` の部分は実際のフォルダ名に合わせてください（Tabキーを押すと補完されます）。
```powershell
$env:PATH = "$PWD\node-v22.12.0-win-x64;$env:PATH"
```
4. 確認のため `node -v` と打ってバージョンが出れば成功です。
### 3. Playwrightのインストール
このフォルダの中にPlaywrightをダウンロードします。
```powershell
# 1. プロジェクトの初期化 (package.jsonの作成)
npm init -y
# 2. Playwrightのダウンロード (テスト機能付き)
npm install -D @playwright/test
# 3. ブラウザ(Chromiumのみ)のダウンロード
# ※初回は数分かかります
npx playwright install chromium
```
### 4. 自動化スクリプトの作成
メモ帳などで、以下の内容をコピーして、`PlaywrightPortable` フォルダの中に `example.spec.js` という名前で保存してください。
あなたの要望である「Web操作」と「画像比較」を含めました。
```javascript
// example.spec.js
const { test, expect } = require('@playwright/test');
test('画像比較テスト', async ({ page }) => {
// 1. サイトにアクセス
await page.goto('https://google.com');
// 2. 自動操作 (例: 検索ボックスに文字入力)
// カーソル移動やクリックはPlaywrightが自動でやります
await page.fill('textarea[name="q"]', 'PowerShell Playwright');
// エンターキーを押すなどの操作も可能
// await page.press('textarea[name="q"]', 'Enter');
// 3. 画像比較 (スクリーンショット)
// 初回実行時: この名前で「正解画像」が保存されます。
// 2回目以降: 前回の画像と比較して、ズレがあればエラーになります。
await expect(page).toHaveScreenshot('landing-page.png', {
maxDiffPixels: 100 // 100ピクセルまでのズレは許容する設定(任意)
});
});
```
### 5. 実行してみる
さあ、実行です。同じPowerShell画面で以下を打ち込みます。
```powershell
npx playwright test
```
#### **実行結果の動き**
1. **1回目の実行:**
* `Error: A snapshot doesn't exist...` というエラーが出ます。
* これは失敗ではありません！「初めてだから、今の画面を正解画像として保存したよ」という意味です。
* フォルダ内に `example.spec.js-snapshots` というフォルダができ、そこに画像が保存されています。
2. **2回目の実行:**
* もう一度 `npx playwright test` を実行します。
* 今度は `Passed` (成功) と出るはずです。現在の画面と、保存された画像を比較して一致したからです。
3. **差分が出た場合:**
* もしサイトのデザインが変わっていると、テストは失敗し、自動的に `test-results` フォルダに「差分が赤く塗られた画像」が生成されます。
* 結果レポートを見るには `npx playwright show-report` と打ちます。
---
### おまけ：完全にポータブルにするための仕上げ
通常、ブラウザ本体（Chromium）はPCの `C:\Users\...\AppData` の奥深くに保存されてしまいます。
これすらも `PlaywrightPortable` フォルダの中に閉じ込めたい場合は、手順2の環境変数設定の際に、以下も追加してください。
```powershell
# ブラウザの保存先を今のフォルダ内の "browsers" にする
$env:PLAYWRIGHT_BROWSERS_PATH = "$PWD\browsers"
# その後でインストールコマンドを実行
npx playwright install chromium
```
これで、この `PlaywrightPortable` フォルダをUSBメモリに入れて別のPCに挿し、手順2のコマンドを打つだけで、どこでも同じ自動化が動くようになります。
■■■■error このシステムではスクリプトの実行が無効になっているため
これはWindowsのPowerShellにおける「セキュリティ機能（実行ポリシー）」によるエラーです。あるあるですのでご安心ください。
Node.jsのZip版には `npm` コマンドを実行するためのファイルが複数入っているのですが、PowerShellが「npm.ps1（PowerShellスクリプト）」を優先して実行しようとし、それを「許可されていないスクリプト」としてブロックしています。
以下の**2つの方法**のどちらかで解決できます。
### 方法1：一番かんたんな解決策（コマンド名を変える）
PowerShellのスクリプト（.ps1）ではなく、**コマンドプロンプト用のファイル（.cmd）** を明示的に呼び出せば、設定を変えずにそのまま動きます。
以降、`npm` の代わりに **`npm.cmd`** と入力してください。
同様に `npx` も **`npx.cmd`** と入力します。
**実行するコマンド:**
```powershell
npm.cmd init -y
```
これならエラーは出ないはずです。
---
### 方法2：設定を変える解決策（スマートな方法）
もし「毎回 .cmd と打つのが面倒」であれば、**今開いているPowerShellの画面だけ**、スクリプトの実行を許可する設定に変えることができます。
以下のコマンドを1回実行してください。
（「現在のプロセス（この画面）」だけの変更なので、PC全体の設定は変わりません。安全です）
```powershell
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process -Force
```
これを実行した後は、最初の手順通り `npm init -y` だけで動くようになります。
---
### どちらかわからない場合
迷ったら **「方法1」の `npm.cmd**` を使う方をおすすめします。会社のPCなどでセキュリティ設定が厳しい場合でも確実に動くからです。
**方法1（.cmdをつける）での続きの手順はこちらです：**
```powershell
# 1. プロジェクト初期化
npm.cmd init -y
# 2. Playwrightダウンロード
npm.cmd install -D @playwright/test
# 3. ブラウザダウンロード (ここも npx.cmd にします)
npx.cmd playwright install chromium
# 4. テスト実行
npx.cmd playwright test
```
これで進めてみてください！
■■■■■■■■■■■■■■■■■■■■■■■■■■まとめ■■■■■■■■■■■■■■■■■■■■■■■■
■インストール
Win＋R で powershell としてPowerShell起動
# このPowerShell画面でのみ Node.js を使えるようにする
$env:PATH = "$PWD\node-v24.12.0-win-x64;$env:PATH"
node -v
v24.12.0 とでれば正解
# ブラウザの保存先を今のフォルダ内の "browsers" にする
$env:PLAYWRIGHT_BROWSERS_PATH = "$PWD\browsers"
# 1. プロジェクト初期化
npm.cmd init -y
# 2. Playwrightダウンロード
npm.cmd install -D @playwright/test
# 3. ブラウザダウンロード (ここも npx.cmd にします)
npx.cmd playwright install chromium
# 4. テスト実行
npx.cmd playwright test
ファイル名の最後に .spec.js と付けた時点で、Playwrightにとっての「実行対象」として認識されているため、
example.spec.js が動く
▶テスト１
// example.spec.js
// Playwrightライブラリから読み込み test, expectを使う。定数にする。
const { test, expect } = require('@playwright/test');
//'画像比較テスト'を実行 async：待ち時間が発生する処理 { page }：新規ブラウザで1ページ立ち上げる 以下の中身はそのページへの指示。
test('画像比較テスト', async ({ page }) => {
// 1. サイトにアクセス 開くまで待つ
await page.goto('https://google.com');
// 2. 自動操作 (例: 検索ボックスに文字入力)
// textarea で名前が q の場所を探し出して一度空（fill）にしてから 'PowerShell Playwright'で埋めてる
await page.fill('textarea[name="q"]', 'PowerShell Playwright');
// 3. Googleのサジェストが出るのを「0.5秒」だけ待つ
await page.waitForTimeout(500);
// 4. エンターキーを押すなどの操作
// await page.keyboard.press('Enter'); // 要素を指定せず、キーボードのEnterを直接叩く
await page.press('textarea[name="q"]', 'Enter');
// 5. 画像比較 (スクリーンショット)
// 初回実行時: この名前で「正解画像」が保存されます。
// 2回目以降: 前回の画像と比較して、ズレがあればエラーになります。
await expect(page).toHaveScreenshot('landing-page.png', {
maxDiffPixels: 100 // 100ピクセルまでのズレは許容する設定(任意)
});
});
▶テスト２
const { test, expect } = require('@playwright/test');
test('画像比較テスト(Bing)', async ({ page }) => {
// 1. GoogleではなくBingへ
await page.goto('https://www.bing.com');
// 2. Bingの検索ボックスも name="q" です
await page.fill('[name="q"]', 'PowerShell Playwright');
// 3. 少し待ってからEnter
await page.waitForTimeout(500);
await page.keyboard.press('Enter');
// 4. 結果が出るのを待つ（3秒ほど待てば確実）
await page.waitForTimeout(3000);
// 5. 撮影
await expect(page).toHaveScreenshot('bing-results.png');
});
画面が見たい場合
npx.cmd playwright test --ui 専用の「UIモード」で起動
npx.cmd playwright test --headed 途中でとめて指示待ちにしたい場合、止めたい場面で await page.pause(); を挿入する。
■再実行用
▶start.ps1
# 1. Node.jsのパスを通す
# ($PSScriptRoot は「このファイルがあるフォルダ」という意味です)
$env:PATH = "$PSScriptRoot\node-v24.12.0-win-x64;$env:PATH"
# 2. ブラウザの保存先を指定 (ここも PSScriptRoot に統一しました)
$env:PLAYWRIGHT_BROWSERS_PATH = "$PSScriptRoot\browsers"
# 3. 準備完了メッセージ
Write-Host "Playwright環境をロードしました" -ForegroundColor Green
# 4. 特定のファイルを「ブラウザ表示あり」で実行
# (成功するとブラウザが自動で閉じるので注意)
npx.cmd playwright test example.spec.js --headed
# 5. 結果を見るために画面を残す
Pause
PowerShell をひらき
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process -Force
として
.\start.ps1
で動く。
バッチでダブルクリックで動かすには、
▶start.bat
@echo off
cd /d "%~dp0"
echo Playwrightを起動しています...
REM ポリシーを一時的に「Bypass（無視）」にしてPS1を実行する
PowerShell -NoProfile -ExecutionPolicy Bypass -File ".\start.ps1"
REM エラーがあっても画面がすぐに閉じないようにする
pause
とする。
■ボタンを押す
さて、ボタンをクリックする方法ですね。
Playwrightでは、ボタンの「特定」の仕方がいくつかあります。**おすすめ順**に紹介します。
### 1. 【おすすめ】文字で指定する（一番かんたん）
人間が見ているのと同じように、**「『ログイン』と書かれたボタンを押せ」** という指定方法です。これが一番壊れにくくて簡単です。
```javascript
// 「検索」という文字を含む要素をクリック
await page.click('text=検索');
// または「送信」という文字そのものをクリック
await page.click('text="送信"');
```
### 2. IDや名前で指定する（確実）
開発者がつけた「ID（背番号）」や「Name（名前）」がある場合は、それを使うと確実です。
```javascript
// id="submit-btn" のボタンをクリック (#はIDの意味)
await page.click('#submit-btn');
// name="save" のボタンをクリック ([name="..."] という書き方)
await page.click('[name="save"]');
```
---
### 3. 【重要】ブラウザから「正解」をコピペする方法
「IDも文字もわからない！」「ただのアイコン画像だ！」という場合、ブラウザの機能を使えば、そのボタンの住所（セレクタ）をカンニングできます。
1. ブラウザでそのボタンの上で **右クリック** します。
2. **「検証 (Inspect)」** を選びます。
3. 出てきたパネルの中で、青くハイライトされた部分を **右クリック** します。
4. **Copy** (コピー) > **Copy selector** (セレクタをコピー) を選びます。
これでクリップボードに `#tsf > div:nth-child(2) > ...` みたいな呪文が入ります。これをコードに貼ります。
```javascript
// コピーした呪文をそのまま貼り付ける
await page.click('#tsf > div:nth-child(2) > div.A8SBwf > div.FPdoLc > center > input.gNO89b');
```
---
### 4. 座標でクリックする（最終手段）
「ボタンの要素がどうしても見つからない」「Canvasなどの絵の中にボタンがある」という場合だけ、**画面の座標（X, Y）** を指定してクリックします。
※ただし、これはウィンドウサイズが変わるとズレるので、あまり推奨しません。
```javascript
// 左から100px、上から200pxの位置をクリック
await page.mouse.click(100, 200);
```
---
### 【裏ワザ】最強ツール「Codegen」を使う
実は、**自分でコードを書かずに、Playwrightに書かせる**機能があります。これが一番早いです。
`start.bat` と同じフォルダで PowerShell を開き、以下のコマンドを打ってみてください。
```powershell
npx.cmd playwright codegen wikipedia.org
```
（※URLはテストしたいサイトに変えてください）
**何が起きるか：**
1. ブラウザと「コード生成画面」の2つが立ち上がります。
2. ブラウザ上で、あなたがクリックしたり入力したりしてください。
3. すると、**その操作がリアルタイムでコードとして生成されます。**
4. あとはそのコードを `example.spec.js` にコピペするだけです。
「このボタン、どうやって指定すればいいんだ？」と悩んだら、まず `codegen` を起動してクリックしてみるのが正解への近道です。
■キャプチャーを一部分にする。
全画面キャプチャーは Bingのような「日替わり画像」や「ニュース」「広告」が出るサイトで、画面全体（Full Page）の比較を行うと、**100%失敗します**。
自動テストを安定させるためには、**「変わりやすい部分（ノイズ）」を捨てて、「重要な部分」だけを撮る**必要があります。
そのための指定方法を**4つ**、おすすめ順に紹介します。
---
### 方法1：特定の「部品」だけを撮る（一番おすすめ）
画面全体ではなく、「検索ボックス」や「メインコンテンツ」の枠（コンテナ）だけを指定して比較します。これなら背景が変わっても関係ありません。
```javascript
// 1. まず、撮りたい部品を特定する（例：Bingの検索ボックス周辺の枠）
const searchContainer = page.locator('#sb_form_q'); // IDなどはDevToolsで調べる
// 2. その部品だけをスクリーンショット比較する
// (page ではなく searchContainer に対して expect するのがコツ)
await expect(searchContainer).toHaveScreenshot('search-box-only.png');
```
* **メリット:** 背景画像、フッター、広告などが一切入り込みません。
* **デメリット:** 適切な「枠（親要素）」を見つける必要があります。
---
### 方法2：邪魔な部分に「目隠し」をする（Masking）
画面全体を撮りつつ、**「広告」や「日替わり画像」の部分だけピンク色の四角で塗りつぶして**、比較対象外にする機能です。Playwrightの強力な機能です。
```javascript
await expect(page).toHaveScreenshot('masked-page.png', {
// 邪魔な要素（広告や背景）を配列で指定して、塗りつぶす
mask: [
page.locator('.ads-container'), // 広告のクラス名
page.locator('#daily-image'), // 日替わり画像のID
page.locator('.time-display') // 時計など
],
// 目隠しの色（デフォルトはピンク）
maskColor: '#FF00FF'
});
```
* **メリット:** レイアウト崩れ（場所のズレ）は検知しつつ、中身が変わる画像だけ無視できます。
* **Bingの場合:** 背景画像を `mask` すると、真っピンクの背景になりますが、テストは安定します。
---
### 方法3：座標で切り抜く（Clip）
要素のIDがどうしてもわからない場合、**「左上から Xピクセル、Yピクセル、幅 W、高さ H」** という風に、四角形で切り抜きます。
```javascript
await expect(page).toHaveScreenshot('clipped-area.png', {
clip: {
x: 100, // 左からの位置
y: 200, // 上からの位置
width: 500, // 幅
height: 300 // 高さ
}
});
```
* **メリット:** IDがなくても強制的に指定できる。
* **デメリット:** ブラウザのサイズが変わったり、「お知らせバー」が上に出たりして位置が1ピクセルでもズレると失敗します。あまり推奨しません。
---
### 方法4：CSSで強制的に消す（力技）
スクリーンショットを撮る直前に、JavaScriptを実行して、邪魔な要素を**透明（visibility: hidden）**にしたり、**存在自体を抹消（display: none）**したりします。
```javascript
// スクショの前に、特定の要素を透明にする
await page.addStyleTag({ content: '.ads { visibility: hidden; }' });
// または完全に消す（レイアウトが詰まるので注意）
// await page.addStyleTag({ content: '.ads { display: none; }' });
// その状態で撮影
await expect(page).toHaveScreenshot('cleaned-page.png');
```
---
### Bingでの実践サンプル
Bingでテストを成功させるなら、**「方法1（検索ボックスだけ撮る）」** が最も簡単で安定的です。
`example.spec.js` をこのように書き換えてみてください。
```javascript
const { test, expect } = require('@playwright/test');
test('Bing検索ボックスのみ比較', async ({ page }) => {
await page.goto('https://www.bing.com');
// Bingの検索ボックス（入力欄）のIDは "sb_form_q" ですが、
// それを含む少し広いフォーム全体 "form#sb_form" を狙います。
const searchForm = page.locator('form#sb_form');
// フォームが見えるまで待つ
await searchForm.waitFor();
// その部分だけを比較！
// 背景の日替わり画像は写り込みません。
await expect(searchForm).toHaveScreenshot('bing-search-form.png');
});
```
これを `npx.cmd playwright test --ui` で実行してみてください。
小さな横長の画像だけが保存され、次回から安定して比較できるはずです。