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
以上となります。お疲れさまでした✨
関連記事
プチモンテ ※この記事を書いた人
 | |
| 💻 ITスキル・経験 サーバー構築からWebアプリケーション開発。IoTをはじめとする電子工作、ロボット、人工知能やスマホ/OSアプリまで分野問わず経験。 画像処理/音声処理/アニメーション、3Dゲーム、会計ソフト、PDF作成/編集、逆アセンブラ、EXE/DLLファイルの書き換えなどのアプリを公開。詳しくは自己紹介へ |
| 🎵 音楽制作 BGMは楽器(音源)さえあれば、何でも制作可能。歌モノは主にロック、バラード、ポップスを制作。歌詞は抒情詩、抒情的な楽曲が多い。楽曲制作は🔰2023年12月中旬 ～ | |
