Playwrightの公式資料では、Chromium、WebKit、Firefoxの各ブラウザーエンジンがサポートされています(対応ブラウザーの説明)。
症状:Windowsで書いたページがSafariでも動くか分からない。 最短ルート:まずPlaywrightのWebKitで自動テストし、授業や提出物が実際のSafariを求める場合に限り、macOS上でSafariを確認します。WebKitのテスト結果をSafariでの実測として提出してはいけません。
Windowsでフロントエンドの課題に取り組み、ブラウザーを使った自動確認を始めたい学生向けです。Safariらしい表示や操作の違いに困っている場合も、どこまで追加確認すべきか判断できます。
PlaywrightのWebKitとSafariは同じブラウザーですか?
同じではありません。Playwrightが使うWebKitはWebKitの開発版を基にしていますが、ブランド版Safariそのものを操作する仕組みではないと、Playwrightのブラウザー説明に記載されています。
先に確認する提出条件
「ページが開くこと」「ボタンなどの基本操作ができること」「Safariで実際に動くこと」は、別々の確認項目です。課題の指示が前の二つならWebKitの自動テストが有効ですが、Safariでの動作証明まで求められるなら、最後にSafari上でも確認してください。
自動テストは、決めた操作を繰り返し実行して結果を確かめる、いわば自動採点です。テストの「断言」は、たとえば「見出しが表示されるはず」と期待する結果をコードに書いて、実際のページと照らし合わせる処理です。
Windows上のPlaywrightでSafariの互換性を確認できますか?
WindowsでもPlaywrightを動かし、WebKitを使った初期確認ができます。ただし、そこで確かめられるのはWebKitでの結果であり、Safari独自の挙動や実際のmacOS環境を含む保証ではありません。Windowsでの導入条件は、Playwright公式インストールガイドで確認できます。
| 確認方法 | 分かること | Safariの実機確認 | 向いている場面 |
|---|---|---|---|
| Windows上のWebKitテスト | ページ表示、指定した操作と期待結果 | できません | 課題の初期確認、基本動作の自動チェック |
| ChromiumとWebKitの比較 | 同じテストの結果がエンジン間で異なるか | できません | 不具合の切り分け |
| macOS上のSafari確認 | Safari上での表示と操作 | できます | Safariでの動作報告、提出前の確認 |
WindowsでWebKitテストを動かす
公式の導入手順を確認しながら、次の流れで進めます。コマンドやシステム要件は更新される場合があるため、実行前に公式インストール手順を参照してください。
- プロジェクトを開く:課題のフォルダーでターミナルを起動します。まだPlaywrightを入れていない場合は、公式ガイドに沿ってテスト環境を作成します。
- WebKitを用意する:Playwrightの案内に従って必要なブラウザーをインストールします。通常のプロジェクト起動だけで必要な環境まで揃うと思い込まず、エラーが出たら導入手順も確認してください。
- ページを起動する:課題の開発サーバーを起動し、ローカルのページが表示できる状態にします。テストが対象にするURLと、実際に動かしているページが一致しているか確認します。
- WebKitをテスト対象にする:設定ファイルにWebKitのプロジェクトがあることを確かめます。プロジェクト名が
webkitなら、npx playwright test --project=webkitで対象を絞れます。名前が異なる場合は、設定に合わせて指定してください(テストプロジェクトの設定)。 - 結果と失敗箇所を見る:テスト結果だけでなく、どの操作や期待結果で止まったかも確認します。失敗時はテスト実行の説明に沿って再実行し、ログや記録を手掛かりにします。
PlaywrightでWebKitテストだけを実行するには?
設定ファイルにあるWebKitプロジェクトを指定して実行します。たとえばプロジェクト名がwebkitなら、上記の--project=webkitを付けます。設定名が違うのに同じコマンドを使うと対象を選べないことがあるので、設定と自分のプロジェクト名を照合してください。
失敗をSafariの不具合と決めつけない
WebKitで失敗しても、すぐに「Safariで壊れる」と結論づけないでください。URLの間違い、ページの読み込み前の操作、ロケーターのずれ、期待結果の書き違いなど、テスト側の問題でも失敗します。
まず同じプロジェクトでテストを再実行し、どの操作で止まったか、エラーが何を示しているかを見ます。操作可能になるまでの待機方法はPlaywrightの操作と自動待機の説明も参考になります。続いて同じテストをChromiumとWebKitで実行し、結果を比較します。
同じ操作がWebKitだけで失敗しても、それだけでSafariの実機不具合が証明されたわけではありません。反対に、WebKitが通ってもSafariのフォント、レイアウト、メディア再生などが同じと確定するわけではないため、差が課題の評価に影響するなら実際のSafariで確認します。テストが失敗したら、画面の見た目だけで判断せず、URL、実行した操作、エラー、期待していた結果をひとまとめに記録してください。Trace Viewerで記録を確認する場合は、[公式の使い方](https://playwright.dev/docs/trace-viewer-intro)を参照できます。
macOSのSafariで再確認する条件
いつ実際のSafariでもう一度確認すべきですか?
提出条件にSafariでの確認が含まれる場合や、WebKitでは判断できない表示・操作の違いが問題になっている場合です。Playwrightの公式資料も、Safariに近い環境が必要な場合はmacOS上でWebKitを実行する方法を案内していますが、WebKitの自動テストをSafariそのものの結果と読み替えることはできません。
次の条件分岐で、確認方法を選びます。
- 課題がページ表示と基本操作の自動確認で完了するなら、WebKitテストで初期確認します。
- WebKitだけが失敗したなら、テストの対象ページ、ロケーター、期待結果を調べ、Chromiumの結果と照合します。
- Safariでの表示や操作が採点対象なら、macOS上のSafariで再確認し、結果を記録します。
- 手元にMacがなくても、まずWebKitで初期確認を済ませます。そのうえで、学校が認める実機や利用条件に合うmacOS環境で最終確認できるかを調整します。
学習環境を選び直す目安
WindowsのままでWebKitテストを続ける方法は、初期確認には便利です。一方、実際のSafariを使う課題ではSafari確認を代替できず、学校のPCで必要なソフトを導入できない場合は環境変更にも制約があります。Macを購入すれば手元で確認できますが、課題のためだけに購入するかは、利用期間や必要な作業を考えて判断してください。
Safariでの最終確認が必要で、手元にMacがない場合は、MACGPUのリモートMac利用案内を確認し、学校の提出ルールと接続方法が合うか照らし合わせられます。利用条件を確認したうえで、Macの注文案内も参照してください。
課題がWebKitの自動テストだけで完了するなら、レンタル環境は不要です。反対に、短期間だけ本物のSafariで提出前確認をする必要があり、購入や学校の実機利用が難しいなら、MACGPUのリモートMacを検討する選択肢があります。WebKitの合格報告とSafariでの実機確認を分けて記録することが、どの環境を選ぶ場合にも大切です。