gui testing tutorial
GUIテストの完全ガイド：ユーザーインターフェイステストチュートリアル
GUIテストとは何ですか？
GUIテストは、アプリケーションのグラフィカルユーザーインターフェイスをテストして、仕様に従って適切な機能を確認するプロセスです。ボタン、アイコン、チェックボックス、色、メニュー、ウィンドウなどのアプリケーションコンポーネントをチェックする必要があります。
htmlcssインタビューの質問と回答
Webアプリケーションの視覚的なダイナミクスは、ユーザーによるアプリケーションの受け入れにおいて極めて重要な役割を果たします。
その結果、この受け入れは、クライアントのアプリケーションと顧客の長期的な束縛をもたらすことにつながります。デジタル化のこの時代において、ユーザーインターフェースは急速に変化しており、潜在的な顧客の新しい群衆を引き付けるための重要な要塞を保持しています。
学習内容：
- ユーザーインターフェイスのテスト
- UIテストのアプローチ
- 一般的に発生するUIの欠陥
- 主なUIとユーザビリティテストの要件
- いくつかの基本的なコンポーネント
- いくつかの高度なコンポーネント
- UIコンポーネントの状態
- GUIテストツール
- サンプルGUIテストケース
- 結論
- 推奨読書
ユーザーインターフェイスのテスト
Webアプリケーションの視覚的な美学が十分に受け入れられるようにするために、UIとユーザビリティテストは、QAプラクティス全体の重要な側面になります。 URLを介してアクセスできるアプリケーションはすべて、Webベースのアプリケーションです。このようなアプリケーションでは、主にエンドユーザーが使用するアプリケーションのフロントエンドをテストします。
ブラウザごとにWebページの表示が異なるため、異なるブラウザでページが同じように表示されることが重要です。 Webページが歪んで管理されていない状態で表示されると、視聴者はWebページを終了します。したがって、Webサイトは、より良い結果を得るためにUIテストを受ける必要があります。
ブラウザのテストは、次の2つのタイプで構成されています。
機能テスト
アプリケーション全体のさまざまな機能のテスト。これには、すべてのポジティブシナリオとネガティブシナリオを使用して、フロントエンドページに存在するすべてのナビゲーションとすべてのフィールド値を検証することが含まれます。
UIテスト
Webページのルックアンドフィール要素をテストします。ルックアンドフィールの要素には、表示タイプ、フォント、配置、ラジオボタン、チェックボックスなどが含まれます。
- UIテストの対象となる領域は、ユーザビリティ、ルックアンドフィール、ナビゲーションコントロール/ナビゲーションバー、手順、技術情報のスタイル、画像、表、アクセシビリティなどです。
- アクセシビリティをテストするには、W3C-Webコンテンツのアクセシビリティガイドラインを確認する必要があります。
クリック ここに W3Cガイドラインを取得します。
UIテストのアプローチ
アプリケーションのすべての機能をカバーする機能テストケースからテストケースのサブセットを選択します。
2番目のステップは、UIテスト要件に従ってこれらのテストケースを変更することです。
次のステップは、これらのテストケースを実行することです。結果を期待される結果と比較し、違いがある場合は、同じ問題を提起します。すべてのブラウザでテストすることは現実的ではありません。通常、クライアントは、テストする必要があるブラウザを決定します。
ブラウザごとにWebページの表示が異なることがわかっているため、すべてのブラウザでWebページがまったく同じように表示されるとは限りません。
例えば、 windows-firefoxのドロップダウンはmac-firefoxとは異なります。これらはオペレーティングシステムユーティリティであり、そのように受け入れる必要があるため、このような問題は許容されます。
ベースブラウザ： 通常、アプリケーションは、主にエンドユーザーが使用することが予想されるブラウザを対象に開発され、ベースブラウザと呼ばれます。
一般的に発生するUIの欠陥
- ボタンの配置の問題
- ラベルまたはテキストボックス間のスペースに一貫性がない
- 壊れたラベル、つまり1行のラベルが2行で表示される
- テキストボックス、情報アイコン、ラベル、またはドロップダウン間の不整合
- フィールドの重複
- 不完全なフィールド
- ページ上のデータがずれています。いくつかのタイムシフトは上向きまたは下向き
- どのブラウザでも、アクションを選択している間、対応するアクションは発生しません
- サイズ変更が期待どおりに機能しない
- 一部のブラウザでは、セッションの有効期限が非常に短いか非常に長い
- ブラウザ固有の問題–あるブラウザでデータを入力した後に編集できないが、別のブラウザでは編集できるフィールドはほとんどありません。
主なUIとユーザビリティテストの要件
Webアプリケーションの主要なUIテスト要件は次のとおりです。
- UIでのさまざまなコンポーネントの可用性
- UIコンポーネントのさまざまな状態
成分：
コンポーネントはビルディングブロックであり、他のいくつかのコンポーネントを組み合わせて使用してアプリケーションを形成できます。コンポーネントは、アプリケーション全体で再利用できます。
コンポーネントの例には、ボタン、テキストフィールド、自動提案、チェックボックス、ドロップダウンなどがあります。
いくつかの基本的なコンポーネント
チェックボックス： チェックボックスコンポーネントから1つ以上のオプションを選択できます
ラジオボタン： オプションを1つだけ選択する必要がある場合は、ラジオボタンが便利です
いくつかの高度なコンポーネント
1.アコーディオン： このコンポーネントを使用して、複数のアイテムを垂直に積み重ねることができます。各アイテムを展開して、その中のコンテンツを表示できます。複数のアイテムを展開することもできます。
2.パンくずリスト： これは、Webサイトのナビゲーションを支援する非常に便利なコンポーネントです。ユーザーは、このコンポーネントからWebサイト内の現在の場所を特定できます。
3.カルーセル： 複数の情報アイテムのセットをカルーセルコンポーネントに組み込むことができます。下部のウェイファインダーは、より多くのアイテムが存在することを示します。矢印は、カルーセル内のナビゲーションに役立ちます。通常、カルーセルナビゲーションは連続ループとして構成されます。
クリック ここに UIコンポーネントに関するより有用な情報を取得するには
UIコンポーネントの状態
コンポーネントの可用性は、純粋にプロジェクト要件ガイドラインに基づいています。プロジェクトごとに異なります。
基本コンポーネントのさまざまなUI状態は次のとおりです。
- 満たされていない状態
- 満たされた状態と焦点
- 通常の状態とデフォルトの状態
- ホバー状態
- 無効状態
- マスクされた状態
満たされていない状態：
コンポーネントに値を入力する前は、入力されていない状態であると言われます。 Unfilled状態では、プレースホルダーテキストが表示されます。以下はテキストフィールドコンポーネントです。
充填状態：
ユーザーが入力した値を持つコンポーネントは、塗りつぶされた状態になります。
フォーカス状態について：
ユーザーは、すでに入力されているコンポーネントに再度アクセスします。コンポーネントはカーソルを表示し、特定のコンポーネントがフォーカスされていることを示します。
通常の状態：
.jarファイルを実行する方法windows10
ユーザーが画面にすでに入力した値を持つコンポーネントの表示は、通常の状態で説明されます。
デフォルトの状態：
サーバー/バックエンドから自動入力された値を表示するコンポーネント。この値は、シナリオによってはユーザーが編集することもできます。
ホバー状態：
コンポーネントにマウスを合わせると、ホバーアクションを示すコンポーネントが強調表示されます。
ホバーする前：
ホバー時：
無効状態：
コンポーネントは無効になっており、ユーザーはフィールドを編集できません。
有効状態
無効状態
マスクされた状態：
このコンポーネントを使用すると、パスワードなどの機密データを非表示にできます。
Webアプリケーションの主なユーザビリティテスト要件は次のとおりです。
- フォントファミリー
- フォントサイズ
- 色
- 文字間隔
- 行の高さ
- バックグラウンド検証
- 塗りつぶし/不透明度
- 長さ、幅、幅などのコンポーネントの測定
- 画面内のコンポーネント間の位置/間隔
上記のユーザビリティ機能は、コードでテストするか、アプリケーションのinspect要素を使用してテストできます。もう1つの簡単な方法は、アドオンを使用することです。アドオンは、アプリケーションをテストする必要のあるブラウザによって異なる場合があります。
さまざまなブラウザアドオンの詳細
| 名前 | 使用法の詳細 | 互換性 |
|---|---|---|
| ページルーラー | このアドオンは、コンポーネントの幅と高さのテストを支援します。コンポーネントの上部、左側、右側、下部の位置も把握できます | ChromeとFirefox |
| Webインスペクター | Webインスペクターは、Webインスペクターのアイコンをクリックして、テストするセクションにカーソルを合わせるだけで、フォント、テキストの色、背景色を表示します。 | ChromeとSafari |
| ホシカメムシ | Firebugは、ウェブページのCSS、HTML、DOM、XHR、JavaScriptを監視するためのオープンソースのアドオンです。これは、Firefoxと互換性のあるinspect要素の代替です。 | Firefox |
| ColorZilla | これは、Webページの色を分析するために使用されるカラーピッカーアドオンです。 | ChromeとFirefox |
| それを測定する | これは、要素の幅、高さ、および配置をピクセル単位でテストするために使用されます。 | Chrome、Safari、Firefox |
アドオンの利点：
- 時間を節約する
- 使いやすい
- 費用対効果が高い
アドオンの制限：
- 測定使用時の視差誤差
- アプリケーション間で互換性があります
- 複数のブラウザと互換性があります
アドオンのリファレンス：
- Webインスペクター： Apple Dev Tools
- Firebug： Firebug Wiki
- ITを測定する
- Colorzilla
GUIテストツール
テクノロジーの世界では、UIテストでテスターを支援するいくつかのツールが利用可能です。
- セレン
- HP統合機能テスト
- きゅうり
- コード化されたUI
- 実は
GUIツールの詳細なリストは、softwaretestinghelp.com自体で入手できます。クリックしてください ここに 。
サンプルGUIテストケース
1） カルーセル矢印とウェイファインダーの動作を確認します
2） パスワードフィールドがマスクされた状態でのみ値を受け入れていることを確認します
3） すべての必須フィールドが入力されるまで、「保存」ボタンが非アクティブのままであることを確認します
4） ユーザーが「トップ」バーを使用してページのトップに移動できることを確認します
5） 適用されたフィルターが結果を取得しないときに適切なメッセージが表示されることを確認します
6） ヘッダーとフッターで利用可能なリンクからナビゲーションを確認します
7） ラジオボタンの配置が正確であることを確認します
8） チェックボックスの複数のオプションを一度に選択できることを確認します
9） 各セクションのタイトルが太字であることを確認します
10） クリック時のハイパーリンクの色の変化を確認する
結論
ウェブサイトは多くの企業の魂です。見栄えがよく、さまざまなブラウザやプラットフォームで同様に機能することを確認する必要があります。したがって、UIテストは非常に重要であり、大規模な顧客ベースとビジネス価値の追加を保証します。