GUIテストチュートリアル:完全なユーザーインターフェイス(UI)テストガイド

GUIテストの完全なガイド:ユーザーインターフェイステストチュートリアル

GUIテストとは

GUIテストは、アプリケーションのグラフィカルユーザーインターフェイスをテストして、仕様に従って適切な機能を確保するプロセスです。 これは、ボタン、アイコン、チェックボックス、色、メニュー、windowsなどのようなアプリケーションコンポーネ

webアプリケーションの視覚的ダイナミクスは、アプリケーションをユーザーに受け入れる上で重要な役割を果たします。

その結果、この受け入れは、クライアントのアプリケーションで顧客の長い時間の束縛をもたらすことになります。 デジタル化のこの時代には、ユーザーインターフェイスは急速に変化しており、可能な顧客の新しい群衆を引き付ける上で重要な要塞を保持しています。

ユーザーインターフェイステスト

webアプリケーションの視覚的な美しさが十分に受け入れられるようにするために、UIとユーザビリティテ URLを介してアクセスできるアプリケーションは、Webベースのアプリケーションです。 このようなアプリケーションでは、主にエンドユーザーが使用するアプリケーションのフロントエンドをテストします。

各ブラウザはウェブページを異なって表示するので、異なるブラウザでページを同じにすることが重要です。 ウェブページが歪んで管理されていないと表示されると、閲覧者はウェブページを終了するようになります。 したがって、ウェブサイトはより良い結果を得るためにUIテストを受ける必要があります。

ブラウザテストは、以下の二つのタイプで構成されています。

機能テスト

アプリケーション全体のさまざまな機能のテスト。 これには、すべての正のシナリオと負のシナリオを使用して、フロントエンドページに存在するすべてのフィールド値と同様に、すべてのナビゲーションを検証することが含まれます。

UIテスト

webページのルックアンドフィール要素のテスト。 ルックアンドフィールの要因は表示タイプ、壷、直線、ラジオボタン、チェックボックス等を含んでいます。

• UIテストでカバーされている領域は、使いやすさ、外観&感触、ナビゲーションコントロール/ナビゲーションバー、指示、および技術情報スタイル、画像、表、アクセシビリティ
• アクセシビリティのテストについては、W3C-Web content accessibility guidelinesで確認する必要があります。

W3Cガイドラインを取得するにはここをクリックしてください。

UIテストのためのアプローチ

アプリケーションのすべての機能をカバーする機能テストケースからテストケースのサブセットを選択します。

第二のステップは、UIテスト要件に従ってこれらのテストケースを変更することです。

次のステップは、これらのテストケースを実行することです;結果を期待される結果と比較し、違いがある場合は同じ問題を提起します。 すべてのブラウザでテストすることは現実的ではありません。 通常、クライアントは、どのブラウザでテストする必要があるかを決定します。

各ブラウザがウェブページを異なって表示することを知っているので、すべてのブラウザがウェブページを正確に類似して表示することは期待で

たとえば、windows-firefoxのドロップダウンはmac-firefoxとは異なります。 このような問題は、これらがオペレーティングシステムユーティリティであり、我々はそのようにそれらを受け入れる必要があるように、許容されます。

基本ブラウザ: 通常、アプリケーションは、主にエンドユーザーによって使用されることが期待されるブラウザをターゲットに開発され、ベースブラウザと呼ばれます。

一般的に発生するUIの欠陥

• ボタンの配置の問題
• ラベルまたはテキストボックス間のスペースの不一致
• 壊れたラベル、すなわち単一行のラベ730>不完全なフィールド
• ページ上のデータの位置がずれています;
• 任意のブラウザで、いくつかのアクションを選択している間、対応するアクションが発生していません
• サイズ変更が期待どおりに機能していません
• セッテスト要件

  webアプリケーションの主なuiテスト要件は次のとおりです:

  1. UIでのさまざまなコンポーネントの可用性
  2. UIコンポーネントのさまざまな状態

  コンポーネント:

  コンポーネントはビルディングブロックであり、他のいくつかのコンポーネントの組み合わせでアプリケーションを形成することができる。 コンポーネントはアプリケーション全体で再利用できます。

  コンポーネントの例には、ボタン、テキストフィールド、Autosuggest、Checkbox、Dropdownなどがあります。

  いくつかの基本コンポーネント

  Checkbox:checkboxコンポーネントから一つ以上のオプションを選択できます

  

  ラジオボタン: 一つだけのオプションを選択する必要がある場合は、ラジオボタンが便利です

  

  いくつかの高度なコンポーネント

  1。 アコーディオン:このコンポーネントを使用して、複数のアイテムを垂直に積み重ねることができます。 各項目は、その中の内容を表示するために展開することができます。 複数の項目を展開することもできます。

  

  2. パンくずリスト：これは、ウェブサイトのナビゲーションに役立つ非常に便利なコンポーネ ユーザーは、このコンポーネントからウェブサイト内の彼の現在の場所を識別することができます。

  

  3. カルーセル: 複数の情報項目のセットをカルーセルコンポーネントに組み込むことができます。 下の方法ファインダーは、より多くの項目が存在することを示しています。 矢印は、カルーセル内のナビゲーションに役立ちます。 通常、カルーセルナビゲーションは連続ループとして構成されます。

  

  UIコンポーネントに関するより有用な情報を得るにはここをクリックしてください

  UIコンポーネントの状態

  コンポーネントの可用性は、純粋にプロジェ それはあるプロジェクトから別のプロジェクトに変化します。

  基本コンポーネントのさまざまなUI状態は次のとおりです:

  1. 塗りつぶされていない状態
  2. 塗りつぶされていない状態とフォーカス
  3. 通常の状態とデフォルトの状態
  4. ホバー状態
  5. 無効な状態
  6. マスクされた状態

  塗りつぶされていない状態:

  前コンポーネント内の任意の値をキー入力すると、未入力状態と呼ばれます。 入力されていない状態には、プレースホルダーテキストがある場合は表示されます。 以下はテキストフィールドコンポーネントです。

  

  塗りつぶされた状態:

  ユーザーがキー入力した値を持つコンポーネントは塗りつぶされた状態です。

  

  フォーカス状態:

  ユーザーはすでに塗りつぶされているコンポーネントを再訪します。 コンポーネントはカーソルを表示し、フォーカス状態

  

  Normal State:

  ユーザーが画面に既に入力した値を持つコンポーネントの表示は、normal stateと記述されます。

  

  デフォルトの状態:

  サーバー/バックエンドから自動入力された値を表示するコンポーネント。 この値は、シナリオによってはユーザーが編集することもできます。

  ホバー状態:

  コンポーネントの上にマウスを置くと、ホバーアクションを示すコンポーネントが強調表示されます。

  ホバー前:

  

  ホバー時:

  

  Disabled状態:

  コンポーネントは無効になっており、ユーザーはフィールドを編集できません。

  有効な状態

  

  無効な状態

  

  マスクされた状態:

  パスワードのような機密データは、このコンポーネントを使用して非表示にすることができます。

  

  webアプリケーションの主なユーザビリティテスト要件は次のとおりです:

  1. フォントファミリ
  2. フォントサイズ
  3. 色
  4. 文字間隔
  5. 行の高さ
  6. 背景の検証
  7. 塗りつぶし/不透明度
  8. 長さ、幅、幅などのコンポーネ730>画面内のコンポーネント間の位置/間隔

  上記のユーザビリティ機能は、コードまたはアプリケーションのInspect要素を使用してテストできます。 別の簡単な方法は、アドオンを使用することです。 アドオンは、アプリケーションをテストする必要があるブラウザによって異なる場合があります。

  各種ブラウザアドオンの詳細

  名前	使用法の詳細	互換性
  Page Ruler	このアドオンは、コンポーネントの幅と高さをテストするのに役立ちます。 コンポーネントの上、左、右、下の位置も	ChromeとFirefoxを理解することができます
  Web Inspector	Web inspectorは、web inspectorアイコンをクリックし、テストするセクションの上にマウスを置くだけで、フォント、テキストの色、背景色を表示します	ChromeとSafari
  Firebug	Firebugは、webページのCSS、HTML、DOM、XHR、およびJavaScriptを監視するためのオープンソースのアドオンです。 これは、Firefoxと互換性のあるinspect要素の代替品です。
  ColorZilla	これは、webページの色を分析するために使用されるカラーピッカーアドオンです	ChromeとFirefox
  それを測定する	ピクセル単位の要素の幅、高さ、配置をテストするために使用されます。	Chrome、Safari、Firefox

  アドオンの利点:

  • 時間を節約
  • 使いやすい
  • 費用対効果が高い

  アドオンの制限:

  • 測定中の視差エラー
  • アプリケーション間で互換性
  • 複数のブラウザと互換性

  アドオンの参照:

  • Web Inspector:Apple Dev Tools
  • Firebug:Firebug Wiki
  • Measure IT
  • Colorzilla

  GUIテストツール

  テスターがUIテストを行うのに役立ついくつかのツールがテクノロジーの世界で利用可能です。

  • Selenium
  • HP Unified Functional Testing
  • Cucumber
  • コード化されたUI
  • Sahi

  GUIツールの詳細なリストが利用可能ですsoftwaretestinghelp.com それ自体！ こちらをクリックしてください。

  サンプルGUIテストケース

  1)カルーセル矢印とウェイファインダーの動作を確認
  2)パスワードフィールドがマスクされた状態でのみ値を受け入れていることを確認
  3)すべての必要なフィールドが入力されるまで”保存”ボタンが非アクティブのままであることを確認
  4)ユーザーが”トップ”バーを使用してページの上部に移動できることを確認
  5)適切なメッセージが表示されていることを確認する適用されたフィルタが結果を取得しない場合
  6)ヘッダーとフッターで使用可能なリンクからのナビゲーションを確認します
  7)ラジオボタンの配置が 正確な
  8)チェックボックスの複数のオプションを一度に選択できることを確認します
  9)各セクションのタイトルが太字であることを確認します
  10)

  結論

  ウェブサイトは多くの企業の魂です。 異なるブラウザ&プラットフォームで正常に見え、同様に機能することを確認することは非常に必要です。 したがって、UIテストは非常に重要であり、大規模な顧客基盤とビジネス価値の追加を保証します。