ホーム > カテゴリ > Windows >

WindowsでSafariブラウザを使用してWebサイトのデザイン、レイアウトを手動で確認する[iPhone/iPad/Mac/Playwright]

今回はWindowsでSafariブラウザを使用してWebサイトのデザイン、レイアウトを手動で確認する方法となります。iPhone、iPad、Macでのテストを行えます。

現在、テストできるSafariのバージョンは14,15,16,17,18,26です。
※これ以降の最新のバージョンは順次、追加されていきます。
※26はmacOS Tahoe26、iOS 26など2025年秋予定

目次

1. Safariブラウザのテストについて
2. Playwrightのインストール/アンインストール
3. Playwrightの使い方
4. Playwrightの設定とプログラム
5. Playwrightの実行

1. Safariブラウザのテストについて

パターン1 Mac/iPhone/iPadを購入する

費用がかかります。例えば、最新版のSafari18は廉価版iPhoneである「iPhone SE2 (第二世代)」中古のA～Cランクで15000円前後。「iPhone SE3 (第三世代)」はSランクで28000円前後。この辺りを購入したとしてもiPhone(iOS)のサポート期限を考える必要があります。

iOSとSafariのバージョンは同じです。

iPhone(iOS)の一覧はhttps://www.genz.jp/useful_information/iphone_size_quickreferencematrix/、Safariはhttps://ja.wikipedia.org/wiki/Safariを参照して下さい。

パターン2 VMwareなどを使用してmacOSを起動する

これはライセンス違反の可能性が高いので却下。

パターン3 無料のPlaywright(プレイライト)を使用する

Microsoftが開発したPlaywrightを使用する。PlaywrightはオープンソースのWeb UIのテスト自動化ライブラリです。今回はこれを手動で使用します。

PlaywrightはデフォルトでChromium、Firefox、WebKitのブラウザエンジンに対応しています。順にChrome、Firefox、Safariとなっています。基本的にSafariとWebKitは同じです。Playwrightの公式リリースノートに記載されているWebKitのバージョンはSafariと同じとなっています。

まとめると、iOS、Safari、WebKitのバージョンは同一である。

次はSafari15(iPhone13 miniの実機)とPlaywright(Webkit15)の同一性の確認です。Safari15は2022年製。Webkit18(Safari18)は2025年製。

同一のHTML/CSSですが、Safari18が正しく、Safari15はバグです。

2. Playwrightのインストール/アンインストール

1. Node.jsのインストール

Windows Installer(.msi)をダウンロードしてインストールします。

https://nodejs.org/en/download

※全てデフォルト設定のままインストールを進めてください。

次はコマンドプロンプトでバージョンを確認してみましょう。

// 各バージョン確認
node --version
npm --version
npx --version

2. Playwrightのインストール

PlaywrightのバージョンによってWebKitのバージョンが連動されますので、指定バージョンのPlaywrightをインストールします。WebKitのバージョンは公式リリースノートで確認できます。

(例)
Version 1.55 // Playwrightのバージョン
WebKit 26.0

Version 1.54
WebKit 26.0

Version 1.53
WebKit 18.5

Version 1.52
WebKit 18.4

Version 1.38
WebKit 17.0

[初心者用インストール] ※Playwright公式

// これは実行しなくて良いです
npm init playwright@latest

全ての最新版がインストールされる。デフォルトのChromium、Firefox、WebKitのWebレンダリングエンジンが含まれます。

[バージョンを指定してインストール]

// バージョン指定
npm install playwright@1.53

// webkitブラウザエンジンのみインストール
npx playwright install webkit

// Playwrightのアップデート
npm i -D @playwright/test@1.53

1.53の部分がPlaywrightのバージョンです。Playwright1.53はSafari(WebKit)18.5となります。

// ブラウザエンジンの場所
C:\Users\ユーザー名\AppData\Local\ms-playwright

// 次の実行ファイルを起動するとそのままブラウザテスト可能です。
// ※webkit-2182の数値はバージョンによって異なります。 
C:\Users\ユーザー名\AppData\Local\ms-playwright\webkit-2182\Playwright.exe

// カレントディレクト(./)に次のファイルが生成されています。
C:\Users\ユーザー名\package.json
C:\Users\ユーザー名\package-lock.json

3. Playwrightのアンインストール

先にPlaywrightのアンインストールのご案内。

npx playwright uninstall
npm uninstall playwright

// バージョンによってうまくいかない場合は、
// 次のファイルを手動で削除してから実行
./package.json
./package-lock.json

// 次は自動生成されるごみフォルダ
./test-results/
./playwright-report/

Playwrightのバージョンを変更する場合は必ずpackage.json、package-lock.jsonを削除する必要があります。

3. Playwrightの使い方

まず、最初にPlaywrightはWeb UIの自動テスト機能がメインとなっています。もちろん、ブラウザをマウスで操作する手動方式でも可能です。

Playwrightの使い方は3種類となっています。

1. [自動]UIを起動して確認する

自動的にテストを行い、結果をスクリーンショットで表示するタイプです。
※マウスでリンクなどを操作できません。

2. [手動]ブラウザを起動して確認する(デバイスを指定可能)

操作するブラウザのデバイスを「Desktop Safari」「iPhone SE (3rd gen)」「iPhone SE (3rd gen) landscape」「iPhone 13 Mini」「iPhone 15」「iPhone 15 landscape」などと指定してから、起動するタイプです。

3. [手動]ブラウザを起動して確認する(デバイスを指定不可)

操作するブラウザのデバイスを「Desktop Safari」と同等で起動するタイプです。手動でブラウザのサイズが変更可能なので、スマートフォンのサイズに合わせることも可能です。

4. Playwrightの設定とプログラム

さて、ここからプログラムぽくなっていきます。

./playwright.config.jsの作成(設定ファイル)

「./」はpackage.jsonがあるフォルダ

// @ts-check
import { defineConfig, devices } from '@playwright/test';

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
 * @see https://playwright.dev/docs/test-configuration
 */
export default defineConfig({
  testDir: './tests',
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

  /* Configure projects for major browsers */
  projects: [

/*
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
*/

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },

    
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone SE (3rd gen)'],
      },
    },

    
    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: { ...devices['Pixel 5'] },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: { ...devices['iPhone 12'] },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    // },
  ],

  /* Run your local dev server before starting the tests */
  // webServer: {
  //   command: 'npm run start',
  //   url: 'http://localhost:3000',
  //   reuseExistingServer: !process.env.CI,
  // },
});

「Desktop Safari」「iPhone SE (3rd gen)」などのデバイス名は公式GitHubに一覧があります。現在、iPhone16の設定はまだないようです。

※デバイス名によってはフォントが潰れるバグがあるようです。

次はおまけです。Safari15(iPhone13 mini/Webkit15)でテストする際は、Playwright1.21を使用。バージョンが古いので次の設定を使用します。

[Playwright Version 1.21前後用]

// @ts-check
const { devices } = require('@playwright/test');

/**
 * @see https://playwright.dev/docs/test-configuration
 */
module.exports = {
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    trace: 'on-first-retry',
    // baseURL: 'http://localhost:3000',
  },

  projects: [
    /*
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    */
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone 13 Mini'],
      },
    },
  ],

  // webServer: {
  //   command: 'npm run start',
  //   url: 'http://localhost:3000',
  //   reuseExistingServer: !process.env.CI,
  // },
};

※要は古いのでdefineConfigが未定義だからです。(2022年製)

./tests/の作成

testsフォルダを作成します。

./tests/ui.spec.jsの作成(自動テストコード)

// @ts-check
import { test, expect } from '@playwright/test';

test('サイトを表示後、リンクをクリックして遷移するか確認する', async ({ page }) => {
  await page.goto('https://www.petitmonte.com/');
  await page.click('text=ロボット・電子工作・マイコン'); 
  await expect(page).toHaveURL('https://www.petitmonte.com/robot/');
});

./tests/browser.spec.jsの作成(手動テストコード)

// @ts-check
import { test, expect } from '@playwright/test';

test("ブラウザを起動して手動テストを行う", async ({ page }) => {
  await page.goto("https://www.petitmonte.com/");
  await page.pause();
});

5. Playwrightの実行

ui.spec.jsの実行(自動テスト)

次をコマンドプロンプトで実行するとUIが起動する。

npx playwright test --ui

左上にある「Projects」をクリックして「Mobile Safari」を選択後に緑色の再生ボタンを押す。次に左メニューの「ui.spec.js」の下をクリックする。

左から2番目のリストにあるActionsタブから「Navigate to "/"」「Click locator」「Expect "toHavaURL"」を順にマウスオーバーしていくと画面遷移の確認ができる。

このUI版は自動テスト結果のスクリーンショットのみですので、リンクなどクリックできません。対象URLもJavaScript側で設定する必要があります。

browser.spec.jsの実行(手動テスト)

// モバイルの起動　※今回はiPhone SE (3rd gen)
npx playwright test browser.spec.js --headed --project="Mobile Safari" 

// Desktop Safariの起動
npx playwright test browser.spec.js --headed --project="webkit"

起動するブラウザはplaywright.config.jsの設定次第で異なります。

Playwright.exeの実行(手動テスト)

前述したPlaywright.exeを実行するだけでも確認できます。

C:\Users\ユーザー名\AppData\Local\ms-playwright\webkit-2182\Playwright.exe

以上となります。お疲れさまでした✨





関連記事


前の記事：Windows11で「ブルースクリーン」を直す方法 [24H2/23H2]

公開日：2025年09月08日 最終更新日：2025年09月09日
記事NO：02925


プチモンテ ※この記事を書いた人

💻 ITスキル・経験
サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。

画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ
🎵 音楽制作
BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～

オリジナル曲を始めました✨

背徳の遊牧民 feat. オペラさん (2025/9/1 新曲)