WebDriver 之测试失败自动截图

WebDriver 之测试失败自动截图webDriver 测试的时候最头疼的就是调试。

但也远不及运行的时候出错，再回头调试来的痛苦。

总所周知， web 自动化的代码都非常脆弱，一份代码一会运行失败，一会运行成功也是很正常的事情。

总的来说造成案例运行失败的原因大抵有两点：环境问题：比如网络不稳定啊代码变动：比如某个元素不在遇到 bug ：这就是真的发现 bug 了无论哪一种，遇到了都需要花一番时间去debug。

那如果这个时候有一张运行时候出错的截图，那就一目了然了。

(即便不一目了然，也有很多帮助)在运行出错的时候，捕获错误并截图有两种思路：自定义一个WeDdriver 的监听器，在出异常的时候截图。

利用Juint 的TestRule，自定义一个Rule 在运行失败的时候截图。

自定义监听器截图的原理截图需要用到RemoteWebDriver。

在 Selenium 官方我们可以找到：One nice feature of the remotewebdriver is that exceptions oftenhave an attached screen shot, encodedas a Base64 PNG. In order to get thisscreenshot, you need to write codesimilar to:public String extractScreenShot(WebDriverException e) {Throwable cause = e.getCause();if (cause instanceof ScreenshotException) {return ((ScreenshotException) cause).getBase64EncodedScreenshot();}return null;}意思就是说，每个异常都是ScreenshotException 的对象，转码一下就可以用了。

这是截图的本质。

import java.io.File;import java.io.FileOutputStream;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;import org.openqa.selenium.WebDriver;import org.openqa.selenium.internal.Base64Encoder;import org.openqa.selenium.remote.ScreenshotException;importorg.openqa.selenium.support.events.AbstractWebDriverEventListener;/*** This is an customized webdriver event listener.* Now it implements onException method: webdriver will take a screenshot * when it meets an exception. It's good but not so usable. And when we use * WebDriverWait to wait for an element appearing, the webdriver will throw * exception always and the onException will be excuted again and again, which* generates a lot of screenshots.* Put here for study* Usage:* WebDriver driver = new FirefoxDriver();* WebDriverEventListener listener = new CustomWebDriverEventListener();* return new EventFiringWebDriver(driver).register(listener);** @author qa**/public class CustomWebDriverEventListener extends AbstractWebDriverEventListener {@Overridepublic void onException(Throwable throwable, WebDriver driver) { Throwable cause = throwable.getCause();if (cause instanceof ScreenshotException) { SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd-hh-mm-ss");String dateString = formatter.format(new Date());File of = new File(dateString + "-exception.png"); FileOutputStream out = null;try {out = new FileOutputStream(of);out.write(new Base64Encoder().decode(((ScreenshotException) cause).getBase64EncodedScreenshot()));}catch (Exception e) {e.printStackTrace();}finally {try {out.close();}catch (IOException e) {e.printStackTrace();}}}}}主要看onException 这个方法的实现，很明显，我们捕获了这个异常，然后通过强制转换将图片提取出来，写入硬盘。

然后就是使用这个监听器，通常会在setup 方法里面将这个监听器注册到WebDriver 中去，看代码：@Testpublic void setup(){String remote_driver_url = "http://localhost:4444/wd/hub";DesiredCapabilities capability = null;capability = DesiredCapabilities.firefox();WebDriverEventListener eventListener = new CustomWebDriverEventListener ();WebDriver driver = new EventFiringWebDriver(new RemoteWebDriver(new URL(remote_driver_url), capability)).register(eventListener);}在这之后，如果运行出错，WebDriver 抛出异常就会在相应的classpath 下面生成png 的截图。

自定义TestRule和自定义WebDriver 监听器不同，自定义TestRule 只有在这个Rule 被执行的时候，才去做一些我们预设的CallBack。

所以这个截图动作，对于WebDriver 而言，是主动的。

那么，我们就需要自定义一个RemoteWebDriver 来实现截图功能。

WebDriver 自身提供了TakesScreenshot 这个接口，我们只要实现它就可以了，看代码：import .URL;import org.openqa.selenium.OutputType;import org.openqa.selenium.TakesScreenshot;import org.openqa.selenium.WebDriverException;import org.openqa.selenium.remote.CapabilityType;import org.openqa.selenium.remote.DesiredCapabilities;import org.openqa.selenium.remote.DriverCommand;import org.openqa.selenium.remote.RemoteWebDriver;public class CustomRemoteWebDriver extends RemoteWebDriver implementsTakesScreenshot {public CustomRemoteWebDriver(URL url, DesiredCapabilities dc) {super(url, dc);}@Overridepublic X getScreenshotAs(OutputType target)throws WebDriverException {if ((Boolean) getCapabilities().getCapability( CapabilityType.TAKES_SCREENSHOT)) {return target.convertFromBase64Png(execute(DriverCommand.SCREENSHOT) .getValue().toString());}return null;}}然后，我们在加一个封装类，将截图方法放进去。

WebDriverWrapper.screenShot ：/*** Function to take the screen shot and save it to the classpath dir. * Usually, you will find the png file under the project root.** @param driver* Webdriver instance* @param desc* The description of the png*/public static void screenShot(WebDriver driver, String desc) { Date currentTime = new Date();SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd-hh-mm-ss");String dateString = formatter.format(currentTime);File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);try {desc = desc.trim().equals("") ? "" : "-" + desc.trim();File screenshot = new File("screenshot" + File.separator+ dateString + desc + ".png");FileUtils.copyFile(scrFile, screenshot);} catch (IOException e) {e.printStackTrace();}}下面，就是添加Junit 的TestRule：import org.junit.rules.TestRule;import org.junit.runner.Description;import org.junit.runners.model.Statement;import org.openqa.selenium.WebDriver;public class TakeScreenshotOnFailureRule implements TestRule { private final WebDriver driver;public TakeScreenshotOnFailureRule(WebDriver driver) {this.driver = driver;}@Overridepublic Statement apply(final Statement base, Description description) { return new Statement() {@Overridepublic void evaluate() throws Throwable {try {base.evaluate();}catch (Throwable throwable) {WebDriverWrapper.screenShot(driver, "assert-fail");throw throwable;}}};}}代码很简单，在抛出evalate 方法的错误之前，截图。