时下 H5 应用很火，微信公众号，微信小程序，支付宝服务窗等，其应用跟 PC 端的 Web 应用有共同也有区别之处，但其实 H5 应用跟 pc 端的 web 应用是差不多的，其本质都是 web 应用，都是要通过浏览器或者 Webview 浏览器进行操作，只不过 H5 应用更多的是运行在手机端而不是 PC 端。由于设备端不一样，H5 应用是在手机端，没法像 PC 端的 WEB 应用那么简单，所以很多时候，可能是把 H5 划归到 APP 自动化进行管理的。既然有这么多共同之处，那么有没有办法把它封装成一种浏览器，归类到 Web 自动化测试中呢，达到跟 WEB UI 统一的操作入口？看了思寒的微信 Webview 自动化测试方法的帖子，给了我灵感，特分享出来

网上流传的 H5 自动化测试有两种方案，一种是利用 PC 端谷歌浏览器的设备 UA 模式，模拟手机浏览器，一种是利用 Appium 连接手机，进入应用切换到 Webview；一种方案是比较简单的，但是没有办法完全模拟手机浏览器的环境，所以采用第二种方法。下面说下具体的过程
一、将 apium 注册到 selenium gird
采用 Appium 的方式，Appium Driver 启动方式与 Webdriver 的启动方式略有不同，那么如何达到统一的入口呢？Selenium 有一种分布式解决方案 Selenium Grid，如果把 Appium Server 注册到 Selenium Grid hub 上就实现了统一的入口了。appium 注册到 selenium grid 的方法，网上有很多例子，但经过实验发现，有几个地方需要特别注意：
1、注册 node 节点的时候需指定 udid, 2、启动的时候要顺带启动 appium 内置的 chromedriver，3、appium 地址，grid hub 地址不能指定为 127.0.0.1，不然其他机器就没办法通过 ip 进行访问了。下面是我的 appium 注册代码：
nodeconfig 如下：

{  
    "capabilities": [  
        {  
            "browserName": "chrome",  
            "version": "5.0.1",  
            "maxInstances": 1,  
            "platform": "ANDROID",
       "udid":"127.0.0.1:62001",
       "deviceName":"127.0.0.1:62001"
        }  
    ],  
    "configuration": {  
        "cleanUpCycle": 2000,  
        "timeout":30000,  
        "proxy": "org.openqa.grid.selenium.proxy.DefaultRemoteProxy",  
    "hub":"192.168.1.103:4455/grid/register",
        "url":"http://192.168.1.103:4723/wd/hub",  
        "host": "192.168.1.103",  
        "port": 4723,  
        "maxSession": 1,  
        "register": true,  
        "registerCycle": 5000,  
        "hubPort": 4455,  
        "hubHost": "192.168.1.103"   
    }  
}  

appium 启动脚本：

appium --address 192.168.1.103 --port 4723  --bootstrap-port 4724 --chromedriver-port 8000  --session-override --nodeconfig D:\auto\appium-node\appium-node.json

二、设计 testbase(浏览器启动和关闭) 类

原理：由于微信浏览器没有像 PC 浏览器一样有网址输入口，所以需要通过文件传输助手输入自己设计的网址入口地址（类似 hao123 入口）

public class TestBaseCase {
    public static WebDriver driver;
    public static String description;
    public Log log=new Log(this.getClass().getSuperclass());
    public void  setup( String driver,String nodeURL) throws MalformedURLException {
        log.info("------------------开始执行测试---------------");
        log.info("读取xml配置：浏览器:"+driver+"；gridNodeURL:"+nodeURL);
        try {
                this.driver=setRemoteDriver(driver,nodeURL);
        } catch (Exception e) {
                log.error("没有成功浏览器环境配置错误");
        }

        this.driver.manage().window().maximize();

    }

    @AfterTest
    public void tearDown() {
        try {
            this.driver.close();
            this.driver.quit();
        }catch (Exception e) {
            log.info("android driver 退出需切换会NATIVE_APP");
            AndroidDriver androidDriver=(AndroidDriver) driver;
            androidDriver.quit();
        }
    }
    private WebDriver setRemoteDriver(String browsername,String nodeURL) throws MalformedURLException
    {
        switch (browsername)
        {

            case "FirefoxDriver" :
                DesiredCapabilities capabilities=DesiredCapabilities.firefox();
                capabilities.setBrowserName("firefox");
                capabilities.setPlatform(Platform.WINDOWS);
                driver= new RemoteWebDriver(new URL(nodeURL), capabilities);
                break;
            case "ChormeDriver":
                DesiredCapabilities dcchorme=DesiredCapabilities.chrome();
                dcchorme.setBrowserName("chrome");
                dcchorme.setVersion("46.0.2490.86 m");
                dcchorme.setPlatform(Platform.WINDOWS);
                driver=new RemoteWebDriver(new URL(nodeURL), dcchorme);
                break;
            case "WeiXIN":
                DesiredCapabilities capability = new DesiredCapabilities();
                capability.setCapability("app", "");
                capability.setCapability("appPackage", "com.tencent.mm");
                capability.setCapability("appActivity", ".ui.LauncherUI");
                capability.setCapability("deviceName", "127.0.0.1:62001");
                capability.setCapability("fastReset", "false");
                capability.setCapability("fullReset", "false");
                capability.setCapability("noReset", "true");
                capability.setCapability("unicodeKeyboard", "True");
                                capability.setCapability("resetKeyboard", "True");
                //关键是加上这段
                ChromeOptions options2 = new ChromeOptions();
                options2.setExperimentalOption("androidProcess", "com.tencent.mm:tools");
                capability.setCapability(ChromeOptions.CAPABILITY, options2);
                //启动微信浏览器
                log.info("启动微信浏览器");
                 driver= new AndroidDriver(new URL(nodeURL), capability);
                driver.manage().timeouts().implicitlyWait(500, TimeUnit.MILLISECONDS);
                sleep(5);
                                log.info("点击微信搜索菜单");
                WebElement webElement=driver.findElement(By.xpath("//*[@content-desc='搜索']"));
                webElement.click();
                log.info("输入文件字符串");
                webElement=driver.findElement(By.xpath("//*[@text='搜索']"));
                webElement.click();
                webElement.clear();
                webElement.sendKeys("文件");
                sleep(4);
                log.info("点击文件传输助手");
                webElement=driver.findElement(By.xpath("//*[@text='文件传输助手']"));
                webElement.click();
                sleep(8);
                log.info("发送跳转网站的网页URL");
                   webElement= driver.findElement(By.xpath("//*[@resource-id='com.tencent.mm:id/z4']"));//不同微信版本，定位不一样
                webElement.sendKeys("http://192.168.1.103:8080/openurl/open.html");
                log.info("点击发送按钮");
                webElement=driver.findElement(By.xpath("//*[@text='发送']"));
                webElement.click();
                sleep(3);
                log.info("点击网址");
                webElement=driver.findElement(By.xpath("//*[@text='"+"http://192.168.1.103:8080/openurl/open.html"+"']"));
                webElement.click();
                  sleep(3);
                  log.info("切换到微信webView");
                               //Webdriver转AndroidDriver
                                AndroidDriver androidDriver=(AndroidDriver) driver;
                androidDriver.context("WEBVIEW_com.tencent.mm:tools");
                                 driver=androidDriver;

            case "HtmlUnitDriver":
                this.driver=new HtmlUnitDriver();
                break;
            default:
                this.driver=new FirefoxDriver();
                break;
        }
        return driver;
    }
}

三、设计网址入口网页

<html>
<head>
 <meta charset="GBK"/>
 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body style="text-align:center">
   <div>
      <input id="url" type="text"/>
      <input id="openurl" type="button" value="打开网页"/>
   </div>
   <script>
     $("#openurl").click(function(){
     var url=$("#url").val();
         location.href=url;
      }
     )
   </script>
</body>
</html>

四、设计 open 方法

//微信浏览器操作
public void openWeiXinBrowser(String url)  {
    WebElement webElement=driver.findElement(By.id("url"));
    log.info("输入网址:"+url);
    webElement.sendKeys(url);
    try {
        Thread.sleep(1000);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
    webElement=driver.findElement(By.id("openurl"));
    log.info("点击打开网页");
    webElement.click();
}

五、设计截图方法

public class ScreenShot {
    public WebDriver driver;
    private String screenName;
    Log log =new Log(this.getClass());
    public void setscreenName(String screenName)
    {
        this.screenName=screenName;
    }
    public ScreenShot(WebDriver driver)
    {
        this.driver=driver;
    }
    private void takeScreenshot(String screenPath) {
        try{
            scrFile=((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
        }catch (Exception e)//关键就在于此
        {
            //appium 内chrome没法截图，需用原生app下进行截图
            System.out.println("进入到了webview 截图需切换回 NATIVE_APP content");
            AndroidDriver driver2=((AndroidDriver) driver);//关键就在于此
            log.info("contextName:"+driver2.getContext());
            System.out.println(driver2.getContextHandles());
//          log.info(driver2.getContextHandles().toString());
            log.info("切换到NATIVE_APP进行app截图");
            driver2.context("NATIVE_APP");
            scrFile=((TakesScreenshot) driver2).getScreenshotAs(OutputType.FILE);
            log.info("切换回微信webviw");
            driver2.context("WEBVIEW_com.tencent.mm:tools");
        }
        try {
            Files.copy(scrFile, new File(screenPath));
            log.error("错误截图："+screenPath);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public  void takeScreenshot() {
        String screenName =this.screenName+ ".jpg";
        File dir = new File("test-output\\snapshot");
        if (!dir.exists())
        {dir.mkdirs();}
        String screenPath = dir.getAbsolutePath() + "\\" + screenName;
        this.takeScreenshot(screenPath);
    }

}

到此就完成了微信浏览器入口统一，这里面的坑是 AndroidDriver 的 Contentext 方法并没有在 Webdriver 里定义，而微信截图等很多地方需要切换 Contentext 才能操作，而要达到入口统一肯定需要通过 Webdriver 接口作为浏览器的管理；这个坑在网上也没有答案，冥思苦想后终于想出了类型转换的方法，我也是佩服自己能想出接口与实现类之间类型转换的方法。