UI自動化測試截圖中標記被點擊元素的方法

在UI自動化測試中，我們經常做的是在執行腳本出錯時，會在出錯的時候進行截圖，然後通過截圖對比腳本來分析出錯原因，如果點擊了某個元素後，頁面跳轉錯誤，點擊元素之前在截圖中標記被點擊的元素，就可以提高分析原因的效率，基於這樣的考慮，開發了一個在截圖中標記被點擊元素的方法。

1、截圖基本方法
使用的時候，傳入的參數可以去掉，根據自己的框架設定參數。

package **.utils;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

import org.aspectj.util.FileUtil;
import org.openqa.selenium.OutputType;

public class GetScreenShot extends IDriver {

    public static String getScreenShot(String taskId, String deviceId) {

    SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
    String date = df.format(new Date()).toString();
    String fileName = date + ".png";
    try {
        IDriver.wait(1);
        driver.getScreenshotAs(OutputType.BYTES);
        File screen = driver.getScreenshotAs(OutputType.FILE);
        String filePath = "/Users/autotest/mtp_workspace/business/pic/" + taskId + "/" + deviceId;
        fileName = filePath + "/" + fileName;
        File screenFile = new File(fileName);
        FileUtil.copyFile(screen, screenFile);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return fileName;
    }

}

2、在截圖中標記被點擊的元素
傳入的參數filePath是上面截圖方法返回的截圖路徑，被點擊元素的x、y座標以及寬度和高度，這裏把元素屬性x、y以及寬度高度乘以3，是因爲默認的截圖的分辨率擴大了3倍，這個值根據自己的截圖方法進行修改。
ImageIO.write(bufferedImage, “png”, new FileOutputStream(filePath));這個方法是覆蓋了之前filePath的截圖，如果想生成新的截圖，傳入新的路徑即可。

package *.utils;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

import javax.imageio.ImageIO;

import org.apache.log4j.Logger;

public class DealPic {

    private static Logger logger = Logger.getLogger(DealPic.class);

    public static void getImage(String filePath, int x, int y, int width, int height) {

    File file = new File(filePath);
    // 截圖中點擊的元素用紅色框標記
    try {
        BufferedImage bufferedImage = ImageIO.read(file);
        Graphics2D graphics2d = (Graphics2D) bufferedImage.getGraphics();
        graphics2d.setColor(Color.RED);
        graphics2d.setStroke(new BasicStroke(13));
        graphics2d.drawRect(x * 3, y * 3, width * 3, height * 3);
        ImageIO.write(bufferedImage, "png", new FileOutputStream(filePath));
    } catch (IOException e) {
        logger.error("Get screen shot failed!");
        e.printStackTrace();
    }
    }

}

如何獲取被點擊元素的x、y、寬度和高度呢？
其實很簡單，Selenium封裝了這樣一個方法方便獲取，在RectAngle對象中

    public static boolean tap(String locator) {

    boolean flag = false;
    try {
        WebElement element = driver.findElement(By.xpath(locator));
        Rectangle rectangle = element.getRect();
        int x = rectangle.x;
        int y = rectangle.y;
        int width = rectangle.width;
        int height = rectangle.height;
        String picName = GetScreenShot.getScreenShot(Crawler.taskId, Crawler.deviceId);
        DealPic.getImage(picName, x, y, width, height);
        NodeList.picList.add(picName);
        element.click();
        flag = true;
    } catch (Exception e) {
        logger.error(locator + " not found, ignoired");
    }
    return flag;
    }

這個方法是在點擊元素之前，獲取該元素的屬性值，然後進行截圖再標記被點擊元素，當然，如果該元素找不到或者元素定位錯誤，這個方法是不會生效的，既然找不到該元素，也就沒有截圖以及標記的必要了，後面的處理也就是常規使用的@TearDown中進行當前頁面截圖了。