LambdaTestを使用してクロスブラウザテストをより効率的にする方法
公開: 2022-03-10この記事は、実際のブラウザーとデバイスで無料の自動化されたライブのインタラクティブなクロスブラウザーテストを実行できるクロスブラウザー互換性テストツールであるLambdaTestの親愛なる友人によって親切にサポートされています。 ありがとう！
消費者が毎日何時間もモバイルデバイスの前に座る前は、Webデザイナーが対処しなければならないブラウザやオペレーティングシステムが数多くありました。 したがって、クロスブラウザテストの概念が新しいわけではありません。
Webブラウザーは、常にWebサイトを同じ方法でレンダリングしたり、当初の意図した方法でデータを処理したりするわけではないため、クロスブラウザーテストは長い間Webの設計と開発の重要な部分でした。 これは、舞台裏で構築されたものがWebサイトのフロントエンドに適切に実装されていることを確認する唯一の方法です。
ただし、すべてのブラウザ、OS、およびデバイスを自分で確認しようとすると、すぐに面倒な作業になる可能性があります。
幸いなことに、私たちは自動化が重要な時代に生きており、クロスブラウザーテストを実行するためのより良い方法があります（そしてより頻繁に）。 それでは、なぜこのプロセスを自動化する必要があるのか、そしてLambdaTestの助けを借りてそれを行う方法について話しましょう。
クロスブラウザテストを処理するための改善された方法
あなたがあなたのユーザーのためにウェブサイトを構築することに着手するとき、あなたは彼らが誰であるか、彼らが何を必要とするか、そして彼らが彼らの旅に沿って何に反応するかを説明します。 しかし、ブラウザの選択のおかげでユーザーが経験する可能性のあるさまざまな結果に、いつどのように対処しますか？
レスポンシブデザインはこれらの違いのいくつかを軽減するのに役立つかもしれませんが、それはブラウザとデバイスに固有の表示の問題のすべてを解決するものではありません。
Webサイト用に行ったコードとデザインの選択がユーザーに悪影響を与えないことを完全に保証するには、Webデザインプロセス全体でのブラウザー間のテストが不可欠です。
「「
また、広範なクロスブラウザーテストが収益に悪影響を及ぼさないことを確認したい場合は、それを自動化するのが最善の方法です。
自動テストをプロセスに組み込むためのヒントを次に示します。
ブラウザサポートの違いをよく理解してください
これは、市場シェア別の上位WebブラウザのStatistaからのまとめです。
さて、ここでの問題は、必ずしもすべてのブラウザがWebサイトのデータを異なる方法で処理することではありません。 本当に物事を台無しにしているのは、舞台裏でブラウザに電力を供給するエンジンです。
たとえば、これらは主要なWebブラウザが使用するエンジンです。
- ChromeはBlink + V8を使用します。
- EdgeはBlinkを使用します。
- FirefoxはQuantum / Gecko + SpiderMonkeyを使用しています。
- SafariはWebKit + Nitroを使用します。
- InternetExplorerはTrident + Chakraを使用します。
これらのエンジンの多くは、同じコードを異なる方法でレンダリングします。 たとえば、LambdaTestによって作成されたこの実験を見てください。
日付HTMLタグは、最も使用されているタグの1つですが、テスト領域の上の青いバーに示されているように、Chrome、Firefox、Operaだけが完全にサポートしています。 それでも、これらのブラウザは非常に異なるユーザーエクスペリエンスを提供します。
たとえば、上の画像は、Chromeでの日付タグの外観を示しています。 同じコードがEdgeでどのように表示されるかを次に示します。
フォントのスタイルとサイズがわずかに異なるだけでなく、日付選択ドロップダウンの表示方法も大きく異なります。
したがって、クロスブラウザーのテストについて考え、これらのブラウザーとエンジンの間の問題を解決する前に、主な違いをよく理解してください。
参考にできるツールは「使えますか…」です。
最も一般的に使用されるコンポーネントとテクノロジーの不一致を探すことができます。 たとえば、CSSグリッドレイアウトを考えてみましょう。
主要な（そしてそれほど主要ではない）ブラウザーのほとんどは、CSSグリッドレイアウト（緑色のもの）をサポートしています。 Internet Explorer（青色）は部分的なサポートを提供し、Opera Mini（紫色）はまったくサポートを提供しません。
または、パフォーマンスと解像度の点ではるかに優れているため、デザインでより多くのWebP画像を使用しようとしているとします。 これが私が使用できるものです…画像フォーマットのブラウザサポートについて教えてくれます：
Internet ExplorerおよびSafariの最新バージョン（Webおよびモバイル）は、それをサポートしていません。 したがって、WebPイメージを使用してデザインする場合は、これらのブラウザーの回避策を作成する必要があります。
結論：今すぐ時間をかけて、サポートされているコンテンツやコードの種類を理解してください。そうすれば、最初からより効果的にWebサイトを構築できます。
上級者向けのヒント：参照用のブラウザマトリックスを作成する
ブラウザのレンダリングとサポートの違いを理解することが非常に重要である理由がわかります。 それらに精通すればするほど、新しい不一致が発見されたときに行う必要のあるスクランブリングが少なくなります。
自分で簡単にできるように、これらすべての違いに対応するブラウザマトリックスを今すぐ作成することをお勧めします。
LambdaTestが設計した簡単なものは次のとおりです。
自分で作成することをお勧めします。 Can I use…のデータを活用できるだけでなく、自分のプロジェクトで発生したサポートの問題を文書化することもできます。
これは、設計時に優先順位を設定するのにも役立ちます。 たとえば、サポートされていない機能がWebサイトの目標にどのような影響を与えるかに基づいて、それらの機能を使用する価値があるかどうかを判断できます。
また、サイトが公開されたら、このスプレッドシートを手元に用意しておくと便利です。 Google Analyticsのデータを使用すると、ユーザーが主に使用するWebブラウザーに基づいてデザインの選択に優先順位を付けることができます。
すべてを実行するクロスブラウザテストツールを入手してください
構築するWebサイトのサイズは関係ありません。 すべての公開サイトは、自動化されたクロスブラウザテストツールの恩恵を受けます。
LambdaTestを使用した自動化の特に優れている点は、ユーザーにオプションを提供することです。 コードがフロントエンドにどのように影響するかをチェックする完全に自動化されたテストから、更新やバグの管理作業を容易にする半自動化されたタスクまで、プロセスを自動化および最適化する方法はたくさんあります。
知っておくべき機能のハイライトのいくつかを次に示します。
リアルタイムテスト：バグ追跡に最適
リアルタイムテストは、自分の両目で調べる必要のあるターゲットが存在する場合に役立ちます。 レビューのためにデザインをクライアントに出荷し、クライアントが何かが正しく見えないと主張する場合のように、正確な構成を使用してWebサイトをレビューできます。 また、バグを確認し、影響を受けるブラウザを推測するのにも役立ちます。
[リアルタイムテスト]パネルから、サイトのURLを入力し、表示仕様を選択します。
以下から選択して、非常に具体的にすることができます。
- MacとAndroid、
- デバイスタイプ、
- デバイスバージョン、
- オペレーティング・システム、
- ウェブブラウザ。
テストが開始されると、これが表示されます（もちろん、選択したデバイスのタイプによって異なります）。
上記では、サイドバーの最初のオプションを使用すると、デバイスのビューをすばやく切り替えることができます。 そうすれば、エラーを比較またはチェックしようとしているブラウザビューがいくつかある場合でも、後戻りする必要はありません。
他のリアルタイムテストオプションに関する限り、それらのほとんどは、実際に発生したコンテキスト内で問題を特定して報告するのに役立ちます。
上記のバグ追跡ツールでは、エラーが発生したページ上の場所を特定できます。 次に、サイドバーのいくつかのツールを使用してマークアップできます。
ユーザーは、スクリーンショットとビデオのオプションを使用して、より大きなエラー、特にサイト内を移動したりサイトを操作したりするときに発生するエラーをキャプチャすることもできます。
スクリーンショットテスト：手動テストの高速化に最適
あなたやあなたのQAがまだあなた自身であなたのウェブサイトをレビューすることができない理由はありません。 とはいえ、なぜプロセスに必要以上に時間がかかるのでしょうか。 LambdaTestのビジュアルUIテストツールでプロセスを高速化できます。
たとえば、スクリーンショットツールを使用すると、比較するすべてのデバイスとブラウザを一度に選択できます。
テストが完了すると、要求されたすべてのスクリーンショットが1か所に表示されます。
ここで表示したり、コンピューターにダウンロードしたり、他のユーザーと共有したりできます。
プロジェクトおよびバージョン/ラウンドごとにスクリーンショットを整理することもできます。 そうすれば、複数回の改訂を行っていて、前のバージョンを参照したい場合は、前のイテレーションのすべてのコピーがここに存在します。 （回帰テストでスクリーンショットを使用することもできますが、これについては後で説明します。）
レスポンシブテスト：モバイルファーストエクスペリエンスの確認に最適
静的なスクリーングラブ以上のものを見る必要がある場合は、レスポンシブテストで対応できます。 比較するOSとデバイスを選択するだけで、ツールはモバイルブラウザにサイトの完全に機能するバージョンを入力します。
考えられるすべてのブラウザでWebサイトのデザインと双方向性を確認できるだけでなく、サイトの向きを変更することもできます（横向きになったときに問題が発生した場合）。
このテストツールの優れている点は、何かが不安定に見える場合は、検出した2番目にバグにマークを付けることができることです。 インタラクティブモバイルブラウザのすぐ上にそれを行うためのボタンがあります。 これにより、コストのかかるモバイルエラーが報告され、より迅速に解決されます。
スマートテスト：回帰テストに最適
特にWebページの同じセクションを何週間も見ている場合、目はそれほど多くを検出することしかできません。
したがって、開発中、リリースの直前、さらにはその後でも、サイトに変更を実装し始めると、回帰テストは、これらの潜在的に見つけにくい問題を見つけるために重要になります。
これは、何かが変更されたときにいつでも実行する必要があります。
- デザインの一部を手動で更新します。
- コードはバックエンドで微調整されています。
- 誰かがバグを報告し、修正が実装されました。
- ソフトウェアが更新されます。
- APIが再接続されます。
どのページとそのページのどの部分が直接影響を受けるかがわかっている場合、スマートテストを使用すると、すべてが正常であることを簡単に確認できます。
影響を受けたページの元のスクリーンショットをアップロードし、変更が加えられたら比較画像を追加するだけです。 （これは、そのスクリーンショットツールが本当に役立つところです。）
注： SmashingMagazineのWebサイトには明らかに問題はありません。 しかし、上記の例で私が行ったことは、iPhoneのさまざまなバージョンにレンダリングを使用することです。 明らかに、それは回帰テストの仕組みではありませんが、何かがおかしいときにこの比較機能がどのように見えるかを示したかったのです。
さて、この機能がとても素晴らしい理由については、次のように機能します。
この1つのスクリーンショットを使用すると、ページの2つのバージョンが整列しなくなった場所を確認できます。 したがって、スクリーンショットが元々同じブラウザビューからのものであった場合、すべての要素を再配置することを計画していなかった場合、これは問題になる可能性があります。
並べて比較テストを使用して、同じことを確認することもできます。
繰り返しになりますが、スマートテストは、回帰テスト中に問題をすばやく見つけて報告するのに役立つことを目的としています。 自分に最適な方法を見つけてください。そうすれば、これらの問題をこれからできるだけ早く解決することができます。
自動テスト：大規模な問題の検出に最適
技術的には、これまで見てきたすべての機能には、20の異なるブラウザのスクリーンショットを同時に処理する場合でも、すべてのiOSおよびAndroidデバイスのモバイルテストインターフェイスを一度に表示できるようにする場合でも、何らかの自動化が組み込まれています。
そうは言っても、LambdaTestプラットフォームには「自動化」と呼ばれるツールも付属しています。 そして、これにより、2,000を超えるブラウザーのクラウドでSeleniumテストを実行できるようになります。 新しい機能である「ラムダトンネル」を使用して、ローカルホストでSeleniumテストを実行することもできます。 そうすることで、コードが公開される前でも、コードの変更がどのように表示されるかを確認できます。
LambdaTestとSeleniumテストを組み合わせることには多くの利点があります。
- これは、大量のクロスブラウザーテストを実行するための非常に効率的な方法であり、それによってブラウザーのカバレッジが向上します（手動で実行することは不可能です）。
- 並列クロスブラウザーテストを使用すると、自動化テスト全体の実行にかかる時間を短縮できます。
- Seleniumのテストは、好みのコーディング言語を特定することから始まるため、ブラウザーに表示されるエラーをよりインテリジェントに検出できます。
もちろん、LambdaTest Selenium Automation Gridを使用する最大の利点は、LambdaTestがテストの合格または不合格の評価に役立つことです。
結果を確認して、すべてのエラーが真の失敗であることを確認する必要があります。その逆も同様ですが、LambdaTestに最初の作業を行わせることで、多くの時間と頭痛の種を節約できます。
まとめ
クロスブラウザテストは、ウェブサイトがモバイル対応であることを確認するだけではありません。 私たちがここで最終的にやろうとしているのは、Webデザインから当て推量を取り除くことです。 数十を超える可能性のあるブラウザーと数百のブラウザー/デバイス構成が存在する可能性がありますが、自動化されたクロスブラウザーテストにより、これらすべての可能性のチェックとエラーの特定がはるかに簡単になります。