LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@bonny_d(takanori yoshioka)

とりあえずPlaywrightを動かしてみたい

Posted at

Playwright完全ガイド - インストールから実行まで

目次

  1. Playwrightとは
  2. 環境セットアップ
  3. ハローワールド（ブラウザ非表示）
  4. ブラウザを表示して実行
  5. トラブルシューティング
  6. 実用的な操作例

Playwrightとは

Playwrightは、WebページのGUIを自動操作するためのライブラリです。

主な特徴

  • ブラウザの自動操作（クリック、入力、スクロールなど）
  • 複数ブラウザ対応（Chrome、Firefox、Safari）
  • スクリーンショット・動画撮影
  • ネットワーク監視・モック機能
  • 高速で信頼性の高い実行

用途

  • GUI自動テスト
  • Webスクレイピング
  • 繰り返し作業の自動化
  • パフォーマンステスト

環境セットアップ

1. プロジェクト作成

# 新しいディレクトリを作成
mkdir playwright-demo
cd playwright-demo

# package.json作成
npm init -y

2. Playwrightインストール

# Playwrightをインストール
npm install playwright

# ブラウザをダウンロード（初回のみ必要）
npx playwright install

# Ubuntu/Linux用の依存関係インストール
sudo npx playwright install-deps

3. インストール確認

# ブラウザが正しくインストールされているか確認
npx playwright --version

ハローワールド（ブラウザ非表示）

hello-world.jsを作成：

const { chromium } = require('playwright');

(async () => {
  console.log('🚀 Playwright ハローワールド開始（headlessモード）');
  
  const browser = await chromium.launch({ 
    headless: true  // ブラウザを表示しない
  });
  
  const page = await browser.newPage();
  
  try {
    // シンプルなサイトを開く
    console.log('📖 example.comを開きます...');
    await page.goto('https://example.com');
    
    // ページタイトルを取得
    const title = await page.title();
    console.log(`📋 ページタイトル: ${title}`);
    
    // スクリーンショットを撮影
    console.log('📸 スクリーンショットを撮影します...');
    await page.screenshot({ path: 'hello-world-screenshot.png' });
    
    // テキストの検証
    const bodyText = await page.textContent('body');
    if (bodyText.includes('Example')) {
      console.log('🎉 ページテキストの検証も成功！');
    }
    
    console.log('✅ ハローワールド完了！');
    console.log('📁 hello-world-screenshot.png が保存されました');
    
  } catch (error) {
    console.error('❌ エラーが発生しました:', error.message);
  } finally {
    await browser.close();
  }
})();

実行

node hello-world.js

ブラウザを表示して実行

📋 重要: デスクトップ環境（Windows、Mac、Linux GUI）でのみ動作します。

デスクトップ環境用（ブラウザ表示あり）

visual-demo.jsを作成：

const { chromium } = require('playwright');

(async () => {
  console.log('🚀 Playwright 目視確認デモ開始');
  
  const browser = await chromium.launch({ 
    headless: false,  // ブラウザを表示
    slowMo: 2000,     // 操作を2秒間隔でゆっくり実行
    devtools: true    // デベロッパーツールも表示（オプション）
  });
  
  const page = await browser.newPage();
  
  try {
    // Googleを開く
    console.log('📖 Googleを開きます...');
    await page.goto('https://www.google.com');
    
    // 少し待つ（目視確認のため）
    await page.waitForTimeout(3000);
    
    // 検索ボックスを見つける
    const searchBox = page.locator('textarea[name="q"]').first();
    await searchBox.waitFor({ timeout: 10000 });
    console.log('✅ 検索ボックスを発見しました！');
    
    // 検索キーワードを入力（ゆっくり）
    console.log('✏️  検索キーワードを入力します...');
    await searchBox.fill('Playwright 自動化テスト');
    
    // Enterキーを押す
    console.log('🔍 検索を実行します...');
    await searchBox.press('Enter');
    
    // 検索結果の読み込みを待つ
    console.log('⏳ 検索結果を待っています...');
    await page.waitForTimeout(5000);
    
    // スクリーンショットを撮影
    console.log('📸 スクリーンショットを撮影します...');
    await page.screenshot({ path: 'visual-demo-screenshot.png' });
    
    console.log('🎉 デモ完了！10秒後にブラウザを閉じます');
    await page.waitForTimeout(10000);
    
  } catch (error) {
    console.error('❌ エラーが発生しました:', error.message);
    await page.waitForTimeout(5000); // エラー時も少し待つ
  } finally {
    await browser.close();
  }
})();

SSH/サーバー環境での画面表示方法

方法1: X11フォワーディング（Linux/Mac）

# SSHでX11フォワーディングを有効にして接続
ssh -X username@your-server

# または
ssh -Y username@your-server

# その後、ブラウザ表示ありのスクリプトを実行
node visual-demo.js

方法2: VNC接続

# サーバーにデスクトップ環境をインストール
sudo apt update
sudo apt install ubuntu-desktop-minimal
sudo apt install tightvncserver

# VNCサーバーを起動
vncserver :1

# ローカルからVNCクライアントで接続後、スクリプト実行

実行

# デスクトップ環境で実行
node visual-demo.js

トラブルシューティング

よくあるエラーと解決方法

1. ブラウザが見つからないエラー

Executable doesn't exist at /home/ubuntu/.cache/ms-playwright/chromium...

解決方法:

npx playwright install
sudo npx playwright install-deps

2. ディスプレイがないエラー（Linux）

Error: Could not find display

解決方法:

# headless: true に変更するか、X11フォワーディングを使用
export DISPLAY=:0

3. 要素が見つからないエラー

page.fill: Timeout 30000ms exceeded

解決方法:

// より柔軟な要素選択
const element = page.locator('input').first();
await element.waitFor({ timeout: 10000 });

// 複数の候補を試す
const selectors = ['input[name="q"]', 'textarea[name="q"]'];
for (const selector of selectors) {
  try {
    await page.locator(selector).first().waitFor({ timeout: 5000 });
    break;
  } catch (e) {
    console.log(`${selector} not found, trying next...`);
  }
}

4. 権限エラー

# 実行権限がない場合
chmod +x node_modules/.bin/playwright

# システム依存関係の問題
sudo apt-get install libnss3 libatk-bridge2.0-0 libdrm2 libxkbcommon0

実用的な操作例

フォーム入力とファイルアップロード

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 1000 });
  const page = await browser.newPage();
  
  await page.goto('https://example-form-site.com');
  
  // テキスト入力
  await page.fill('#username', 'testuser');
  await page.fill('#email', 'test@example.com');
  
  // セレクトボックス
  await page.selectOption('#country', 'Japan');
  
  // チェックボックス
  await page.check('#agree');
  
  // ラジオボタン
  await page.check('input[name="gender"][value="male"]');
  
  // ファイルアップロード
  await page.setInputFiles('#file', 'path/to/file.pdf');
  
  // ボタンクリック
  await page.click('#submit');
  
  // 結果を待つ
  await page.waitForSelector('.success-message');
  
  await browser.close();
})();

複数タブの操作

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  
  // 最初のタブ
  const page1 = await context.newPage();
  await page1.goto('https://example.com');
  
  // 新しいタブを開く
  const page2 = await context.newPage();
  await page2.goto('https://google.com');
  
  // タブを切り替えながら操作
  await page1.bringToFront();
  await page1.screenshot({ path: 'tab1.png' });
  
  await page2.bringToFront();
  await page2.screenshot({ path: 'tab2.png' });
  
  await browser.close();
})();

スクロールと要素待機

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  
  await page.goto('https://infinite-scroll-site.com');
  
  // ページの一番下までスクロール
  await page.evaluate(() => {
    window.scrollTo(0, document.body.scrollHeight);
  });
  
  // 特定要素が表示されるまで待機
  await page.waitForSelector('.load-more-content', { timeout: 10000 });
  
  // 要素が見えるまでスクロール
  await page.locator('.target-element').scrollIntoViewIfNeeded();
  
  await browser.close();
})();

まとめ

  • headless: true: サーバー環境、バックグラウンド実行
  • headless: false: デスクトップ環境、目視確認
  • slowMo: 動作をゆっくりにして確認しやすくする
  • screenshot(): 実行結果の確認に便利

デスクトップ環境があれば headless: false でブラウザを表示して動作確認できます。サーバー環境では headless: true でスクリーンショットを撮影して結果を確認しましょう。

0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?