RYO.dev

最終更新日:

クロスブラウザテストのガイドライン

  1. クロスブラウザテストとは?
  2. テストの実施方法
  3. テストの対象
  4. どのデバイスとブラウザでテストするのか
  5. 注意
  6. Q%A
  7. フィードバック

クロスブラウザテストとは?

僕はWindowsのPCかAndroidのスマホでWebページを閲覧します。スタバではMac book勢をよく見ますし、電車では画面バキバキのiPhoneを使っている人もいますね。また、僕はChromeを好んで使いますが、iOS勢はSafariを使う人が多いはずです。僕の家族はオワコンIEを使っています(#^ω^)ピキピキ

あらゆるデバイスやブラウザでレイアウト崩れや機能の欠陥がないかを確認するテストクロスブラウザテストといいます。

テストの実施方法

例えば、MacのSafariでレイアウト崩れが起きていないかを調べるときは、実際にMacのSafariでWebページを表示させて確認します。あるデバイスやブラウザで表示崩れや機能欠陥が起きていないかを実際のデバイスやブラウザを使って確認するのも、クロスブラウザテストの手段の1つです。

しかし、僕はMacを持っていません。じゃあSafariでテストできないのかというとそうではありません。Browserstackというサービスを使います。

クロスブラウザテスト用のWebサービスであるBrowserstackのスクショ

Browserstackを使うと、任意のバージョンのデバイスで任意のバージョンのブラウザを使ってWebページを表示させることができます。なので、あらゆるデバイスやブラウザのバージョンでWebページがどのように表示されるか動作するかを僕のPCからテストできます。

テストの対象

僕が作るものすべてです。思い付きで作ったものや、依頼されて作ったものまですべてです。

どのデバイスとブラウザでテストするのか

  1. PCの場合は、Windows 10とMacのChromeとFirefoxとOpera、Windows 10のEdge、MacのSafari、これらの合計5つのブラウザの最新バージョンとその1つ前のバージョン
  2. スマホの場合は、最新版AndroidのChrome、iOSの11.X以降のバージョンのChromeとSafari、これらの合計2つのブラウザの最新バージョン

注意

クロスブラウザテストを実施した時点での最新バージョン(PCブラウザであればその1つ前のバージョンも)で表示崩れや機能欠陥の有無を確認して、あれば修正します。しかし、それ以降に新しく出てきたバージョンでも同様に表示崩れや機能欠陥が生じないことは保証できません。

Q%A

フィードバック

ご意見やお聞きしたいことがございましたら、TwitterのDMメールにご連絡ください。