フロントエンドテストツールの紹介

js_test_framework

このツールは主にWebフロントエンドの単体テストに使用され、ブラウザ内で直接jsメソッドを呼び出すことで、インターフェース上でのオンサイトテストを実装します

git address:

プロセス

1. を記録します。 testLive によるオンサイト 必要なリクエストについて、testLive は期間中のすべてのリクエストを記録し、同時に testLive によって記録されたリクエストを出力メソッドを通じてコン​​ソールに出力し、出力データを書き込むことができます。カスタムモジュールのRequestDataデータを定義したらrequestFactoryに登録

2. requestFactoryにネットワークリクエストを呼び出してカスタムモジュールのTest.jsを書き、判定が必要なアサーションを書いて単体テストを登録します。 testManagerで各モジュールのテストを処理します

3. testManagerでテストケースを実行し、テスト実行中に結果を表示し、同時に結果を分析します

4. ファイルディレクトリ構造の例

基本:コアモジュール

testLive

requestFactory

testManager

module : 外部モジュール、例のみ

user

userRequestData

userTest

製品

製品リクエストデータ

製品テスト

...

3 つの主要なモジュール

各モジュールには独自の独立性があり、カスタマイズできます

Testlive

    前端录制现场,通过调用回调接口,记录下用户在前端界面的所有操作记录

---

外部インターフェイス

StartRCORD でビデオを開始します、名前はビデオの名前です

• S PRCORDへビデオを終了します

• すべてのビデオを出力します

runRecord 録画を実行します
shouRequest すべての録画のディレクトリ構造と詳細を表示します
callback 外部コールバック関数、メソッド内で外部関数を呼び出すことができます。このコールバックを呼び出します
拡張メソッド
ajaxOverride ajaxリクエストを書き換えて、すべてのjquery ajaxコールバックを追加します

requestFactory

•     请求工厂,主要用于收集用户的所有请求记录

外部インターフェイス

---

registerMethod 登録メソッド、このメソッドの外部呼び出しによるrequestFactory にメソッドを登録できます

register Data 登録データ。このメソッドは registerMethod と似ていますが、パラメーターの構造が異なります

• getMethod はメソッド名 {name: カスタムメソッド名、url: を通じてメソッドを取得します。ネットワークリクエストアドレス、methodType: リクエストメソッド、run: 実行メソッド}

• getMethod.run getMethod を渡した後、run 関数を直接呼び出してメソッドを実行し、結果を返すことができます {costTime: オーバーヘッド時間、requestData: リクエストパラメータ、type: requestメソッド、url: ネットワークリクエストアドレス、responseData: サーバーの戻り結果、success: this リクエストが成功したかどうか}

• showMethodsは、requestFactory内のすべてのリクエストを表示します
testManager

•     测试集成,用于管理测试,将测试模块化,以及结果的展示

  外部インターフェース

  • registerMethod登録メソッド、このメソッドの外部呼び出しを通じてメソッドをtestManagerに登録できます

  • registerData登録データ、このメソッドはregisterMethodに似ていますが、パラメータ構造が異なります

  • run実行メソッド、戻り値 この実行の結果の詳細
    ディレクトリ構造は、{assertQueue: すべてのアサーション結果のコレクション、responseQueue: すべてのリクエスト結果のコレクション、errAssertQueue: すべてのアサーション失敗のコレクション、errorResponseQueue: すべてのアサーション結果のコレクションネットワークリクエストの失敗、expendTime: リクエスト時間のオーバーヘッド、成功: 成功したかどうか oShowall すべてのモジュールのすべてのモジュールのテストを表示します

  • モジュール名に基づいてモジュールの下にあるすべてのテストメソッドを表示する ShowMethods

  • Web ページ分析ツールに基づく:

  • 1. Baidu アプリケーション パフォーマンス テスト センター

  • 3. PingDom ツール

  • 4.分析ツール:

  • 1 . Chrome にはツール F12 が付属しています

  • 2. Firefox プラグイン: YSlow (Yahoo ツール)

  • 3. ページ速度 (google)

  assertQueue アサーションキューこのクラスは、ユーザーの目標結果が実際の結果と一致しているかどうかを記録および判断し、同時に結果セットを出力するために使用されます
  • 結果関連データ

  • recordResponseは、ネットワークの結果を記録するために使用されますリクエスト

  • ユーザー設定のアサーションをアサート

以上がフロントエンドテストツールの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。