JSCover+WebDriver/Selenium獲取JS代碼覆蓋率

我們在看JSCover(http://tntim96.github.io/JSCover/manual/manual.xml)介紹及使用說明的時候，往往被圖形界面所吸引。這種方式比較適合手工操作，點擊和輸入即可。

但是這種往往界面和真實界面相差比較大，因爲真正的網頁在JSCover內部的瀏覽加載框中。這使得原有的Selenium代碼可能存在諸多問題。那麼如何能夠儘量少地改變原有的selenium代碼而又獲取到js的code coverage呢？這可以採用文件模式(File Mode)。

1. Instrument JS代碼

java -jar JSCover-all.jar -fs SOURCE-DIRECTORY DESTINATION-DIRECTORY

source-directory爲js代碼的文件夾，包含需要instrument的js代碼。destination-directory爲instrument後輸出的文件存放的文件夾。命令會創建destination-directory並且將source-directory的文件拷貝過來。對於js文件，會instrument。source-directory最後仍然會保留。最後JSCover還會生成jscoverage.html用來執行instrument的代碼。

2. 啓動Server

因爲我們最後想看到report結果，我們需要將jscoverage.js中的變量jscoverage_isReport設爲true。jscoverage.js會隨着jscoverage.html一起產生。

jscoverage_isReport = true;

然後我們可以啓動instrument的web server，再進行測試。

3. 編寫Selenium/WebDriver代碼

示例代碼可參考：https://github.com/tntim96/JSCover-samples 

我們只需要按照一般selnium/webdriver代碼寫就可以了。但是在最後有一步產生代碼覆蓋率需要加上如下代碼：

WebDriver

String json = (String)((JavascriptExecutor) webClient).executeScript("return jscoverage_serializeCoverageToJSON();");

Selenium

String json = selenium.getEval("selenium.browserbot.getUserWindow().jscoverage_serializeCoverageToJSON();");

這裏我們可以參考一個網友寫的：http://www.350351.com/qianyanjishu/ceshijishu/69429.html

import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class SeleniumTester{
	
	@Test
	public void testJsCover() {
		WebDriver driver = new FirefoxDriver();
		driver.get("http://localhost/example-fs/index.html");
		driver.findElement(By.id("radio1")).click();
		String json = (String)((JavascriptExecutor) driver).executeScript("return jscoverage_serializeCoverageToJSON();");
		driver.quit();
	}
}