用selenium挑战寻找蔡依林的H5小游戏

                        用selenium挑战寻找蔡依林的H5小游戏

这段时间玩了一款寻找蔡依林的H5小游戏。

游戏地址：

http://h5.gamedog.cn/games/1015459_2.html

游戏规则就是：

要从众多的凤姐图片中找到唯一的蔡依林，游戏限定时间总共为60秒。

第一关只有四张图片，比较容易，像这样：

第二关就有9张图片，第三关有16张图片……到了第六关的时候就有36张图片，如下图：

越往后的关，图片越多。。。越考验眼力！ 我看网上有人手工能玩到45关，也是牛！

本人反应较慢，一般手工仅能玩到15关左右。

不过反应慢不要紧，我们有selenium呀！

分析了下这个游戏的页面html源代码，如下图：

分析发现这些图片都是包含在一个叫“box”的div里，每个图片对应一个span标签。

结合浏览器控制台的“查看元素”功能，可以看到凤姐的图片都是1.png ，有多个；蔡依林的是2.png ，仅有一个。

那就好办了，我们可以用selenium定位到 2.png代表蔡依林的这个span标签，然后给一个click，进行点击就可以了。

 

完整脚本如下：

package com.yoyotesting.selenium3maven;
​
import java.util.List;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
​
public class GameFindCaiYilin {
​
  public static void main(String[] args) throws InterruptedException {
    
     //设定浏览器driver的路径
     System.setProperty("webdriver.chrome.driver", "D:\\browserdriver\\chromedriver.exe");
    
    //实例化driver对象，启动谷歌浏览器
    WebDriver driver = new ChromeDriver();
    
    //最大化浏览器窗口
    driver.manage().window().maximize();
    
    //打开寻找蔡依林游戏首页
    driver.get("http://h5.gamedog.cn/games/1015459_2.html");
    
    //定义一个显示等待，后面用来等待相关元素出现后再点击    
    WebDriverWait wait = new WebDriverWait(driver,10);      
    
    //图片是在一个iframe内，所以要切换进入这个iframe
    driver.switchTo().frame("mainFrame");
    
    //等待“开始游戏”按钮 到可点击状态
    wait.until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@class='btn play-btn']")));
    
    //点击“开始游戏”
    driver.findElement(By.xpath("//button[@class='btn play-btn']")).click();
    
    //定义游戏过关的初始次数
    int i = 1;
    
    //通过while循环设定游戏的过关次数
    while(i<=280) {    
      
       //等待包含所有图片的div出现    
        wait.until(ExpectedConditions.presenceOfElementLocated(By.id("box")));
        
        //找到div=box下的所有图片span 
        List  images = driver.findElements(By.xpath("//div[@id='box']/span"));
        
        //通过for循环逐一取出上一步骤中的所有图片元素，再通过if语句判断该图片是不是2.png，是的话才进行点击
        //因为每组图中仅有一个蔡依林的图片，所以找到后，使用break，结束后面的图片比对
        
        for(WebElement image:images) {             
        
        if (image.getAttribute("style").contains("2.png")) {
        
        image.click(); 
        
        break;}
        
               
        }
       
  
      System.out.println("已过：" + i+ "关");      
        
          i++;  
  
    }
  }
​
}
​

关键步骤解释：

1. 辨别的图片是嵌套在一个iframe内的，所以要先切入该iframe内才能进行元素定位等操作。

2. 在脚本中要设定显示的等待WebDriverWait，等待到“开始游戏”按钮和包含图片的“box” div出现才执行后续操作，否则会报NoSuchElement找不到网页元素的错误。

3. 在If语句中要使用break语句，作用即是：找到代表蔡依林的2.png后即结束该for循环中后面的判断。

   这样做一是为了效率，因为只有一个蔡依林的照片，找到后，后面的肯定不会再是蔡依林的了，没必要再找了；

   再者是因为找到后执行了click的操作，页面的DOM结构就刷新了，原来存在集合List中的元素相对于刷新后的DOM就过期了，再比对会报：Stale Element Reference Exception的异常。

跑下脚本，猜猜Selenium能过多少关吧？

竟是惊人的220多次！！！果真还是脚本厉害！！

大家也试一下吧！

********************************************************************************************************

近期我会在博客中系统的更新一些关于Selenium的文章，也请大家多多关注下我的视频课程：

入门：基于Java的Selenium3自动化测试完整教程

高级：Selenium Java高级架构课程

*********************************************************************************************************

阅读更多精彩文章，请大家关注我的测试公众号：火烈鸟测试