Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SI-Toolkitにおける
画像比較の仕組み
テスト自動化勉強会 by hifive「業務アプリのテスト自
動化」
July 10 2017
Kenichiro Ota (@oota_ken)
 SI-Toolkit for Web Testingとは
 SI-Toolkitのスクリーンショット比較機能
 スクリーンショットのマスク
 画像分割による比較
アジェンダ
 特徴
 内部的にSeleniumを使用しているOSSのキーワード駆
動テストツール
 株式会社モノクレア様が作成
 画面からのロケーターやある程度のシナリオの自動
生成、DB比較、シェル実行などエンタープライズで
必要とされる機能を網...
 URL
 https://sitoolkit.org/
 GitHub
 https://github.com/sitoolkit/sit-wt-all
 ユーザーグループ
 https://sitoolkit.doorkeepe...
 機能
 http://bit.ly/2rYcD0J
 実行結果からのエビデンス生成 (確定)
 テストスクリプト側でスクリーンショットを撮っていた
ものが比較対象となる
 スクリーンショットのマスク
 広告やログイン情報など同じ領...
スクリーンショットのマスク
public File mask(File imgFile, MaskInfo maskInfo) {
File maskedImg = new File(imgFile.getParent(), EvidenceD...
画像分割による比較 10x10分割
public BufferedImage[][] splitImage(File baseImg, int rows, int columns) {
BufferedImage[][] splitImages...
画像分割による比較 要素ごとの比
較
https://github.com/sitoolkit/sit-wt-all/blob/master/sit-wt-runtime/src/main/java/org/sitoolkit/wt/app/c...
画像分割による比較 比較結果の生
成
https://github.com/sitoolkit/sit-wt-all/blob/master/sit-wt-runtime/src/main/java/org/sitoolkit/wt/app/c...
Upcoming SlideShare
Loading in …5
×

SI-Toolkitにおける 画像比較の仕組み

1,135 views

Published on

テスト自動化勉強会 by hifive「業務アプリのテスト自動化」
https://hifive.connpass.com/event/60026/

の資料です。

Published in: Software
  • Be the first to comment

SI-Toolkitにおける 画像比較の仕組み

  1. 1. SI-Toolkitにおける 画像比較の仕組み テスト自動化勉強会 by hifive「業務アプリのテスト自 動化」 July 10 2017 Kenichiro Ota (@oota_ken)
  2. 2.  SI-Toolkit for Web Testingとは  SI-Toolkitのスクリーンショット比較機能  スクリーンショットのマスク  画像分割による比較 アジェンダ
  3. 3.  特徴  内部的にSeleniumを使用しているOSSのキーワード駆 動テストツール  株式会社モノクレア様が作成  画面からのロケーターやある程度のシナリオの自動 生成、DB比較、シェル実行などエンタープライズで 必要とされる機能を網羅  スクリーンショットの比較機能が非常に便利←ここ の実装を紹介 SI-Toolkit for Web Testingとは
  4. 4.  URL  https://sitoolkit.org/  GitHub  https://github.com/sitoolkit/sit-wt-all  ユーザーグループ  https://sitoolkit.doorkeeper.jp/ SI-Toolkit for Web Testingとは
  5. 5.  機能  http://bit.ly/2rYcD0J  実行結果からのエビデンス生成 (確定)  テストスクリプト側でスクリーンショットを撮っていた ものが比較対象となる  スクリーンショットのマスク  広告やログイン情報など同じ領域に表示されるが実行時 には異なるものをマスクできる  座標指定ではなく、Web上でエビデンス画像に付箋を 這っていくことにより指定ができる SI-Toolkitのスクリーンショット比 較機能
  6. 6. スクリーンショットのマスク public File mask(File imgFile, MaskInfo maskInfo) { File maskedImg = new File(imgFile.getParent(), EvidenceDir.toMaskSsName(imgFile.getName())); try { BufferedImage bi = ImageIO.read(imgFile); Graphics2D g2d = bi.createGraphics(); g2d.setPaint(Color.BLACK); List<ElementPosition> posStyles = maskInfo.getMaskInfoAsMap().get(imgFile.getName()); for (ElementPosition elementPosition : posStyles) { int posX = elementPosition.getX(); int posY = elementPosition.getY(); int width = elementPosition.getW(); int height = elementPosition.getH(); g2d.fillRect(posX, posY, width, height); ImageIO.write(bi, "png", maskedImg); } LOG.info("マスク済み画像ファイルを生成しました {}", maskedImg.getPath()); } catch (IOException e) { LOG.error("画像ファイルのマスク処理で例外が発生しました", e); } return maskedImg; } https://github.com/sitoolkit/sit-wt-all/blob/master/sit-wt-runtime/src/main/java/org/sitoolkit/wt/app/compareevidence/MaskScreenshotGenerator.java
  7. 7. 画像分割による比較 10x10分割 public BufferedImage[][] splitImage(File baseImg, int rows, int columns) { BufferedImage[][] splitImages = new BufferedImage[rows][columns]; try { BufferedImage bufferedImage = ImageIO.read(baseImg); for (int i = 0; i < splitImages.length; i++) { for (int j = 0; j < splitImages[i].length; j++) { int posX = bufferedImage.getWidth() / columns * j; int posY = bufferedImage.getHeight() / rows * i; int width; if (j == splitImages[i].length - 1) { width = bufferedImage.getWidth() - posX; } else { width = bufferedImage.getWidth() / columns; } int height; if (i == splitImages.length - 1) { height = bufferedImage.getHeight() - posY; } else { height = bufferedImage.getHeight() / rows; } splitImages[i][j] = bufferedImage.getSubimage(posX, posY, width, height); } } } catch (IOException e) { LOG.error("スクリーンショットの分割処理で例外が発生しました", e); } return splitImages; } https://github.com/sitoolkit/sit-wt-all/blob/master/sit-wt-runtime/src/main/java/org/sitoolkit/wt/app/compareevidence/ScreenshotComparator.java
  8. 8. 画像分割による比較 要素ごとの比 較 https://github.com/sitoolkit/sit-wt-all/blob/master/sit-wt-runtime/src/main/java/org/sitoolkit/wt/app/compareevidence/ScreenshotComparator.java public boolean compareOneScreenshot(File baseImg, File targetImg, int rows, int columns) { boolean match = true; BufferedImage[][] baseBfImg = splitImage(baseImg, rows, columns); BufferedImage[][] targetBfImg = splitImage(targetImg, rows, columns); BufferedImage[][] diffImg = new BufferedImage[rows][columns]; for (int i = 0; i < rows; i++) { for (int j = 0; j < columns; j++) { byte[] baseImgBytes = toByteArray(baseBfImg[i][j]); byte[] targetImgBytes = toByteArray(targetBfImg[i][j]); if (Arrays.equals(baseImgBytes, targetImgBytes)) { diffImg[i][j] = darken(targetBfImg[i][j]); } else { match = false; diffImg[i][j] = targetBfImg[i][j]; } } } if (match) { LOG.info("スクリーンショットは基準と一致しました {}", targetImg.getName()); } else { LOG.error("スクリーンショットは基準と一致しませんでした {}", targetImg.getName()); writeDiffImg(targetImg, diffImg); } return match; }
  9. 9. 画像分割による比較 比較結果の生 成 https://github.com/sitoolkit/sit-wt-all/blob/master/sit-wt-runtime/src/main/java/org/sitoolkit/wt/app/compareevidence/ScreenshotComparator.java private void writeDiffImg(File targetImg, BufferedImage[][] bio) { try { BufferedImage img = ImageIO.read(targetImg); BufferedImage imgBase = new BufferedImage(img.getWidth(), img.getHeight(), BufferedImage.TYPE_INT_ARGB); Graphics graphics = imgBase.getGraphics(); int posX = bio[0][0].getWidth(); int posY = bio[0][0].getHeight(); for (int i = 0; i < bio.length; i++) { for (int j = 0; j < bio[i].length; j++) { graphics.drawImage(bio[i][j], posX * j, posY * i, null); } } File maskedImg = new File(targetImg.getParent(), EvidenceDir.toUnmatchSsName(targetImg.getName())); ImageIO.write(imgBase, "png", maskedImg); LOG.info("差分スクリーンショットを生成しました {}", maskedImg); } catch (IOException e) { LOG.error("差分スクリーンショット生成処理で例外が発生しました", e); } }

×