Jak uruchomić QUnit test i uzyskać wynik testu w C# przez wywołanie zwrotne JavaScript?

Question

W moich kilku projektach używam wzoru MVC do rozdzielania kodu (obawy) na 3 poziomy. Oba poziomy modelowania i kontroli działają w języku C#, więc używam frameworków testowych takich jak MSTest lub NUnit do sprawdzania wymagań funkcjonalnych dla tych poziomów. W przypadku warstw widoku używam QUnit do testowania plików JavaScript.

Jednak nie mogę wykonać QUnit jako testu automatycznego, ponieważ MSTest nie obsługuje bezpośrednio do testowania strony internetowej. Muszę uruchomić go w MSTest, jak w poniższej logice.

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

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

Rozwiązanie musi używać funkcji zwrotnej w QUnit (not while-loop checking), aby upewnić się, że metody badawczej będzie wykonać od razu po teście zrobić.

Answer 1

Do testowania w różnych przeglądarkach najlepszym rozwiązaniem jest rozwiązanie Selenium WebDriver, ponieważ możemy łatwo przełączać się między przeglądarkami, zmieniając tylko jeden wiersz kodu.

1. Zainstaluj Selenium WebDriver package do projektu przez NuGet.

2. Download preferred driver do projektu, należy dodać do projektu i ustaw "Copy to Output Directory" równa się "Copy jeśli nowsze". W przypadku tego przykładu z użyciem przeglądarki Chrome używam sterownika Chrome do uruchamiania Selenium z Google Chrome pod numerem na moim komputerze.

3.In metoda badawcza, tworzyć sterownik i ustawić maksymalny czas wykonania przed uruchomieniem 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. Upewnij się, że już ustawiłeś autostart z QUnit na false.

QUnit.config.autostart = false; 

5. Przejdź do strony QUnit. W tym przypadku używam lokalnej strony w folderze rozwiązania.

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

metoda 6.Use ExecuteAsyncScript w obiekcie przeglądarki, aby zarejestrować wywołania zwrotnego dla QUnit.done funkcji i ręcznie rozpocząć testowanie QUnit.

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

7. Po zakończeniu testu QUnit, zwróci odpowiedź. Musimy przekształcić go jako odpowiedni typ i uzyskać wynik testu.

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. Nie zapomnij zamknąć przeglądarki za każdym razem, gdy korzystasz z testów końcowych.

browser.Close(); 

PS. Dostarczam również rozwiązanie Visual Studio 2012 (kod źródłowy) dla tej odpowiedzi.

Click here to download

Aktualizacja 1

• Fix bug, że kiedyś QUnit rozpocząć testowanie przed zarejestrowaniem System zwrotnego do funkcji wykonywanej.
• Dołącz lokalną stronę QUnit.
• Dołącz IEDriver do pobrania rozwiązania. Jednak ta wersja nie obsługuje IE10 na Windows 8. Ale działa dobrze na IE8.

Answer 2

PhantomJS jest WebKit bezgłowy z API JavaScript. Posiada szybką i natywną obsługę różnych standardów internetowych: obsługi DOM, selektora CSS, JSON, Canvas i SVG. Jest to kompletny zestaw optymalnych rozwiązań do bezgłowego testowania witryny, przechwytywania ekranu, automatyzacji strony i monitorowania sieci.

Proponuję, aby skorzystać z tej ramy, jeśli chcesz przetestować niektóre biblioteki JavaScript i nie chcą korzystać z zainstalowaną przeglądarkę na komputerze testowym.

1.Upewnij się, że już ustawiłeś autostart z QUnit na false.

QUnit.config.autostart = false; 

2. Download PhantomJS executable file dla Windows, dodać do swojego projektu i ustaw "Copy to Output Directory" równa się "Copy jeśli nowsze".

3. Utwórz proces uruchamiania PhantomJS.exe z 2 argumentami, które są plikiem JavaScript i przetestowanym adresem URL strony.

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. Rozpocznij proces i sprawdź kod zakończenia tego procesu.

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

Assert.AreEqual(process.ExitCode, 0); 

W pliku JavaScript, używam eveluateAsync dostępu do kontekstu strony do uruchomienia testu QUnit, poczekać, aż zakończy się i zaloguj ilość testów nie powiodło się.

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); 
}); 

Do obsługi rejestru używam następującego kodu do zamykania procesu z kodem wyjścia.

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. Dostarczam również pełny kod źródłowy (VS2012) do mojego SkyDrive. Możesz pobrać go pod poniższym linkiem.

PhantomJS Test project

To demo projekt, jak uruchomić PhantomJS w MSTest.

PhantomJS Form project

Ten projekt jest PhantomJS wrapper, który napisał w C# Windows Form. Używam tego do testowania plików "main.js" i "core.js" przed użyciem go w projekcie testowym.