フロントエンドテストの紹介

Sep 12, 2025

操作方法

ページ1/2：

フロントエンドテストの種類（そしてそれらを使用するとき）

フロントエンドテストの種類（そしてそれらを使用するとき）
試験文化を抱きしめる

フロントエンドコードのテストは、まだ多くの開発者にとって混乱している習慣です。しかし、フロントエンドの開発がより複雑になり、開発者が安定性と一貫性を担当する開発者がこれまでにないように、フロントエンドテストはあなたのコードベース内の平等な市民として受け入れなければなりません。私たちはあなたのさまざまなテストオプションを分解し、彼らが最もよく使用される状況を説明します。

フロントエンドテストは、さまざまな自動テスト戦略をカバーする毛布の用語です。これらのいくつかは、ユニットと統合テストのようなものもあります。他の戦略はより新しい、そして今のバックエンドとフロントエンドの開発の変化からの茎は今のところに使用されます。

この記事の終わりまでに、どのテスト戦略があなたのチームとコードベースに最も適しているかを評価することを快適に感じるべきです。次のコード例はJasmineフレームワークを使用して書かれますが、規則とプロセスはほとんどのテストフレームワークにわたって似ています。

ユーザーテストソフトウェアの最良の部分

01.単体テスト

テストのベテランの1つであるユニットテストは、すべてのテストタイプの最低レベルです。その目的は、必要に応じて、コード（単位と呼ばれる）機能の最小ビットを確実にすることです。

あなたが家のためにレゴのセットを持っていると想像してください。構築を開始する前に、各部分が会計処理されていることを確認したい（5つの赤い四角、3つの黄色の長方形）。ユニットテストは、入力検証や計算などのものの個々のコードセットが確実になり、より大きな機能を構築する前に意図したものとして働いています。

それは「一つのことをよくすること」マントラとの連携の単体テストについて考えるのを助けます。一回の責任を負うコードがある場合は、それのために単体テストを書いておくと思うでしょう。

以下のコードスニペットを見てみましょう。単純計算機のためのユニットテストを書いています。

（ "計算操作"、function（）{
  それ（ "2つの数字を追加する必要があります"、function（）{
    Calculator.Init（）;
    var result = calculator.addnumbers（7,3）;
    期待する（結果）.tobe（10）;
  }）;）
}）;

私たちの中で電卓アプリケーション、我々は、計算が常に私たちが期待する方法で常に機能するようにしたいと思います。この例では、私たちが常に正確に2つの数字を一緒に追加できることを確認したいと思います。

私たちが最初に行うことは、Jasmine'sを使って実行するつもりの一連のテストについて説明します。 describe describe 。これにより、テストスイートが作成されます - アプリケーションの特定の領域に関連するテストのグループ化。私たちの電卓のために、我々はそれぞれの計算テストをそれ自身のスイートでグループ化します。

スイートはコード組織だけでなく、自分でスイートを実行できるためです。アプリケーションの新機能に取り組んでいる場合は、積極的な開発中にすべてのテストを実行したくないため、非常に時間がかかります。スイートをテストすると個別にあなたがより早く発展させることができます。

次に、実際のテストを書いています。の使い方それ機能、テストしている機能または機能の一部を書きます。この例では追加機能をテストしているので、それが正しく機能していることを確認するシナリオを実行します。

その後、テストアサーションを書いてください。電卓を初期化し、私たちを走らせます addnumbers. 追加したい2つの数字を持つ関数。その数を結果として保存してから、これが私たちが期待する数と等しいと主張します（私たちの場合は10）。

もしの場合 addnumbers. 正しい数値を返却しないため、テストは失敗します。他の計算 - 減算、乗算などのために同様のテストを書くでしょう。

02.受理テスト

ユニットテストが各LEGOピースをチェックするようなものである場合は、承認テストは、建物の各段階を完了できるかどうかを確認しています。すべてのピースが考慮されているからといって、指示が正しく実行可能で、最終的なモデルを構築することを可能にするという意味ではありません。

受け入れテストは実行中のアプリケーションを通過し、指定されたアクション、ユーザー入力、およびユーザーフローが完了して機能することを確認します。

私たちのアプリケーションのためだけです addnumbers. 関数は正しい数を返し、電卓インタフェースが正しい結果を与えると期待どおりに機能することを意味しません。ボタンが無効になっているか、計算結果が表示されないのはどうなりますか？受け入れテストは私達がこれらの質問に答えるのを助けます。

説明（「登録障害状態」、function（）{
  それ（ "無効な情報で登録を許可してはいけません"、function（）{
    var page =訪問（ "/ home"）;
    page.fill_in（ "input [name = '電子メール']"、 "Eメールではありません"）。
    Page.Click（ "ボタン[Type = submic]"）;
    Page.Click（ "ボタン[Type = submic]"）;
    Page.find（ "＃subnePerror"）。HasClass（ "Hidden"））。tobefalsy（）;
  }）;）
}）;

構造体は私たちのユニットテストと非常によく似ています：私たちはスイートを定義します describe describe それから私たちのテストを書いてくださいそれ関数、次にいくつかのコードを実行してその結果を確認してください。

ただし、特定の機能と値を順番にテストするのではなく、ここでは、特定のワークフロー（サインアップフロー）がいくつかの悪い情報に記入されたときに予想どおりに動作するかどうかを確認しています。ここで発生した微妙な行動は、単体テスト済みの形式の検証、およびIDを持つ要素によって実証されたエラー状態を示すための任意の取り扱いなど、いくつかの微妙な行動があります。 SignPeRor 。

承認テストは、鍵経験の流れが常に正しく機能していることを確認するための素晴らしい方法です。エッジケースの周囲のテストを追加し、あなたのQAチームがあなたのアプリケーションでそれらを見つけるのを助けることも簡単です。

受諾テストを書くものを考慮すると、あなたのユーザーの話は始めるのに素晴らしい場所です。あなたのユーザーはあなたのウェブサイトとどのように対話していますか、そしてその対話の予想される結果は何ですか？それはユニットテストとは異なります。これは、検証済みフィールドの周囲の要件など、機能要件のようなものと同じように照合されています。

03.視覚回帰テスト

導入で述べたように、いくつかの種類のテストはフロントエンドの世界に固有のものです。これらの最初のものは視覚回帰テストです。これはあなたのコードをテストしませんが、むしろあなたのコードのレンダリングされた結果とあなたのインターフェース - あなたのアプリケーションのレンダリングされたバージョンのプロダクション、ステージング、または予め変更されたローカル環境と比較します。

これは通常、ヘッドレスブラウザ（サーバ上で実行されるブラウザ）内のスクリーンショットを比較することによって行われます。画像比較ツールは、2つのショット間の違いを検出します。

Phantomcssなどのツールを使用して、テストランナーがナビゲートする場所を指定し、スクリーンショットを取り、それらのビューに起きた違いを示しています。

 casper.start（ "/ home"）それから（function（）{

  //最初の形式の状態
  Phantomcss.Screenshot（ "＃sugnupform"、 "sugn-up form"）。

  //登録ボタンを押す（トリガーエラーが発生する必要があります）
  casper.click（ "button＃登録"）;

  // UIコンポーネントのスクリーンショットを取ります
  phantomcss.screenshot（ "＃signupform"、 "登録フォームエラー"）;

  //名前属性とampによってフォームに記入します。参加する
  casper.fill（ "＃signupform"、{
    名前： "Alicia Sedlock"、
    メール： "[email protected]"
  }、true）;

  //成功状態の2番目のスクリーンショットを取ってください
 Phantomcss.Screenshot（ "＃signupform"、 "sugn-up form success"）;
}）;

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — この視覚回帰枠組みはあなたのアプリケーションの決定木を示し、開発の外で複雑さを公開します

承認と単体のテストとは異なり、視覚回帰テストはあなたが新しいものを構築している場合に恩恵を受けにくいです。 Active Developmentのコースを通して迅速かつ劇的な変更が表示されるので、インターフェイスのピースが視覚的に完了したときにこれらのテストを保存するでしょう。したがって、視覚回帰テストはあなたが書いているべき最後のテストです。

現在、多くの視覚回帰ツールには少し手動の努力が必要です。ブランチで開発を開始する前にスクリーンショットキャプチャを実行する必要があるか、インターフェイスを変更するときにBaselineスクリーンショットを手動で更新する必要があります。

これは単に開発の性質のためです - の変化 u 意図的なかもしれませんが、テストは「はい、これは同じ」または「いいえ」と知られているだけです。ただし、視覚回帰がアプリケーション内の痛み点である場合、このアプローチは常に回帰を修正することと比較して、チームの時間と労力を全体的に保存することがあります。

04.アクセシビリティとパフォーマンステスト

フロントエンドのテストの周りの文化と意識が成長するにつれて、生態系のさまざまな側面をテストすることができます。焦点が増えたことを考えると アクセシビリティ これをテストスイートに統合する技術文化のパフォーマンスは、これらの概念が優先順位のままであることを確認するのに役立ちます。

パフォーマンス予算やアクセシビリティ基準を強制する問題が発生した場合、これは人々の心の最前線にこれらの要件を保存する方法です。

これらのチェックは両方とも、GruntやGulpなどのビルドツール、または端末内で半手動でワークフローに統合できます。パフォーマンス予算の場合、Grunt-Perfbudgetのようなツールは、指定されたタスク内で自動的にWebPageTestを通じてサイトを実行する機能を提供します。

ただし、タスクランナーを使用していない場合は、PerfbudgetをスタンドアロンのNPMモジュールとして掴み、テストを手動で実行することもできます。

これはそれが端末を通してこれを実行したいのが好きなものです：

 perfbudget --url http://www.aliicability.com --key [WebPagetest APIキー] --SpeedIndex 2000  - レンダ400

そして同様に、Gruntを通して設定します。

perfbudget：{
  デフォルト： {
    オプション：{
      URL： 'http://aliicability.com'、
      キー：「WebPagetest APIキー」、
      予算：{
        SpeedIndex： '2000'、
        レンダリング： '400'
      }
    }
  }
}

[...]

Grunt.RegisterTask（ 'default'、 'jshint'、 'perfbudget']）;

アクセシビリティテストに同じオプションがあります。そのため、PA11Yの場合は、実行することができます PA11Y この手順を自動化するために、ブラウザで出力またはタスクを設定します。ターミナルで：

 PA11Y Aliicability.com

// NPMインストール後のJavaScriptコマンドとして

VAR PA11Y =要求（ 'PA11Y'）。 // PA11Yを必要とします
var test = pa11y（）; // PA11Yを設定する準備をできてください

test.run（ 'aliicability.com'、関数（エラー、結果）{
  //あなたの結果を解析してください
}）;

これらのカテゴリのほとんどのツールはかなりプラグアンドプレイですが、テストの実行方法をカスタマイズするオプションも与えます - たとえば、特定のWCAG規格を無視するように設定できます。

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation — resemble.jsは人気のある画像比較ライブラリであり、視覚的差別化をトリガーするものをたくさんの管理をします。

次のページ：ワークフローにテストを紹介する方法

現在のページ：フロントエンドテストの種類（そしてそれらを使用するとき）

次のページ試験文化を抱きしめる

フロントエンドテストの紹介

01.単体テスト

02.受理テスト

03.視覚回帰テスト

04.アクセシビリティとパフォーマンステスト

操作方法 - 最も人気のある記事

SvelteとSapperで高速反応ブログを構築する

How to bring a 2D character to life in VR

JavaScriptで誤ったテキスト効果を作成する

CSSグリッド付きファッションフレキシブルレイアウト

ブラウザのSVGグラフィックの設計

あなたのデジタルアートに絵画のような感触を作成する

毛皮の毛皮のペットの肖像画

わずか4色で自画像を作成する

カテゴリ