5

私のいくつかのプロジェクトでは、(関心のある) コードを 3 つの層に分離するために MVC パターンを使用しています。モデル層とコントロール層の両方が C# で実行されるため、MSTest や NUnit などのテスト フレームワークを使用して、これらの層の機能要件を検証します。ビュー層については、QUnit を使用して JavaScript ファイルをテストします。

ただし、MSTest は Web ページのテストを直接サポートしていないため、QUnit を自動テストとして実行することはできません。次のロジックのように MSTest で実行する必要があります。

[TestMethod]
public void JavaScriptTest()
{
    var result = QUnit.Test('~/QUnit/test1.htm');

    Assert.IsTrue(result.Failed <= 0)
}

テストが完了した直後にテストメソッドが実行されるように、ソリューションはQUnitでコールバック関数を使用する必要があります（while-loopチェックではありません）。

4

2 に答える 2

5

クロス ブラウザー テストの場合、コードを 1 行変更するだけでブラウザーを簡単に切り替えることができるため、 Selenium WebDriverはこの問題を解決するための最良のオプションです。

  1. NuGet経由でSelenium WebDriver パッケージをプロジェクトにインストールします。

ここに画像の説明を入力

2.優先ドライバーをプロジェクトにダウンロードし、プロジェクトに追加して、[出力ディレクトリにコピー] を [新しい場合はコピー] に設定します。この例では、Chrome ドライバーを使用して、マシン上の Google Chrome で Selenium を実行します。

ここに画像の説明を入力

3.テストメソッドで、ドライバーを作成し、QUnit を実行する前に最大実行時間を設定します。

var browser = new ChromeDriver();
var navigator = browser.Navigate();

// Currently, max execution time is one minute.
browser.Manage().Timeouts()
       .SetScriptTimeout(new TimeSpan(0, 1, 0));

4. QUnit の autostart が false に設定されていることを確認してください。

QUnit.config.autostart = false;

5.QUnit ページに移動します。この場合、ソリューション フォルダー内のローカル Web ページを使用します。

 browser.Manage().Timeouts().SetScriptTimeout(new TimeSpan(0, 1, 0));
navigator.GoToUrl(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"../../../QUnit example/qunit-demo.htm"));

6.ブラウザー オブジェクトで ExecuteAsyncScript メソッドを使用して、QUnit.done関数のコールバックを登録し、手動で QUnit テストを開始します。

var response = browser.ExecuteAsyncScript
(
    "var callback = arguments[arguments.length - 1];" +
    "QUnit.done(callback); QUnit.start();"
);

7.QUnit テストが完了すると、応答が返されます。適切な型に変換し、テスト結果を取得する必要があります。

var testResult = response as Dictionary<string, object>;

if(testResult == null) throw new Exception("Unhandle error occur while running QUnit."); 

Console.WriteLine("Test complete in " + (long)testResult["runtime"] + " ms.");
Console.WriteLine("---------------------------");
Console.WriteLine("total: " + (long)testResult["total"]);
Console.WriteLine("passed: " + (long)testResult["passed"]);
Console.WriteLine("failed: " + (long)testResult["failed"]);

8.終了テストを使用するたびに、ブラウザを閉じることを忘れないでください。

browser.Close();

PS。この回答の Visual Studio 2012 ソリューション (ソース コード) も提供します。

ダウンロードするにはこちらをクリック

更新 1

  • システムが完了関数へのコールバックを登録する前に QUnit がテストを開始するバグを修正しました。
  • ローカル QUnit ページを含めます。
  • IEDriver を含めてソリューションをダウンロードします。ただし、このバージョンは Windows 8 の IE10 をサポートしていません。ただし、IE8 では問題なく動作します。
于 2013-01-01T08:06:03.110 に答える
2

PhantomJSは、JavaScript API を使用したヘッドレス WebKitです。DOM 処理、CSS セレクター、JSON、Canvas、SVG など、さまざまな Web 標準を高速かつネイティブにサポートしています。これは完全な Web スタックであり、ヘッドレス Web サイト テスト、スクリーン キャプチャ、ページ自動化、およびネットワーク監視に最適なソリューションです。

ここに画像の説明を入力

JavaScript ライブラリをテストしたいが、テスト マシンにインストール済みのブラウザーを使用したくない場合は、このフレームワークを使用することをお勧めします。

1. QUnit の autostart が false に設定されていることを確認してください。

QUnit.config.autostart = false;

2. Windows 用のPhantomJS 実行可能ファイルをダウンロードし、プロジェクトに追加して、[出力ディレクトリにコピー] を [新しい場合はコピー] に設定します。

3. JavaScript ファイルとテスト済みページ URL の 2 つの引数を使用して PhantomJS.exe を実行するプロセスを作成します。

var scriptPath = Path.GetFullPath(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "../../PhantomScript/main.js"));
var pageUrl = "file:///" + Path.GetFullPath(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "../../QUnitExample/qunit-demo.htm")).Replace('\\', '/');

var process = new Process
{
    StartInfo =
    {
        UseShellExecute = false,
        RedirectStandardOutput = true,
        CreateNoWindow = true,
        WindowStyle = ProcessWindowStyle.Hidden,
        FileName = "phantomjs.exe",
        Arguments = "\"" + scriptPath + "\" \"" + pageUrl + "\""
    }
};

4.プロセスを開始し、このプロセスの終了コードを確認します。

process.Start();
process.WaitForExit();

Assert.AreEqual(process.ExitCode, 0);

JavaScript ファイルでは、eveluateAsyncを使用してページのコンテキストにアクセスして QUnit テストを実行し、終了するまで待機して、失敗したテストの量をログに記録します。

page.evaluateAsync(function ()
{
    QUnit.done(function(response)
    {
        console.log('!Exit' + response.failed);
    });

    QUnit.start();

    // If QUnit finish after 2500 ms, system will exit application with code -1.
    setTimeout(function()
    {
        console.log('!Exit-1');
    }, 2500);
});

ログを処理するために、次のコードを使用して終了コードでプロセスを終了します。

var exitCodeName = '!Exit';
page.onConsoleMessage = function (msg)
{
    if (msg.indexOf(exitCodeName) == 0)
    {
        var exitCode = parseInt(msg.substring(exitCodeName.length).trim(), 10);

        phantom.exit(exitCode || 0);
    }
};

PS。また、SkyDrive に完全なソース コード (VS2012) を提供しています。以下のリンクからダウンロードできます。

PhantomJS テスト プロジェクト

このプロジェクトでは、MSTest で PhantomJS を実行する方法をデモします。

PhantomJS フォーム プロジェクト

このプロジェクトは、C# Windows フォームで記述された PhantomJS ラッパーです。テストプロジェクトで使用する前に、これを使用して「main.js」および「core.js」ファイルをテストします。

ここに画像の説明を入力

于 2013-01-09T12:42:36.743 に答える