はじめに

こちらの記事は「Selenium/Appium Advent Calendar 2019」13日分の投稿です。
@kazurasaka がお届けします。

あらすじ

それは数ヶ月前のことだった。転職した先で与えられたのはQAエンジニアの肩書。自社アプリのテスト自動化研究の始まりが訪れ、QA界隈に突如飛び込んだ私は色々と勉強することになる。

課せられた制約は２個

実際に動いているsourceをテストのために変更することはできない
複数タイトルに流用できるテストを構築しなくてはならない

IDで検索する方法は使えない……そんななか一つの記事が目に留まる。

画像による要素検索
http://www.selenium.jp/translation/huaxiangniyoruyaosujiansuopart1

こ、これだーーーー！！

本題

では見ていきましょう。

おもむろにgithubでappium縛りで「findElementByImage」と検索をかけます。
https://github.com/search?q=org%3Aappium+findElementByImage&type=Code

なんとなく関係ありそうなコードってjavaかよってなりながら読みます（javaまともにやったことないからフィーリングで切り抜けます）
https://github.com/appium/java-client/blob/14786471f4abb85a01dfe79879d7a617cd2fc669/src/main/java/io/appium/java_client/FindsByImage.java

default T findElementByImage(String b64Template) {
    return findElement(MobileSelector.IMAGE.toString(), b64Template);
}

次は findElement ね。ふむふむ。

これは探すとjsの実装を見つけられました。
https://github.com/appium/appium-base-driver/blob/master/lib/basedriver/commands/find.js

commands.findElement = async function findElement (strategy, selector) {
  if (strategy === IMAGE_STRATEGY) {
    return await this.findByImage(selector, {multiple: false});
  } else if (strategy === CUSTOM_STRATEGY) {
    return await this.findByCustom(selector, false);
  }

  return await this.findElOrElsWithProcessing(strategy, selector, false);
};

custom も気になりましたが findByImage のほうがそれっぽいので追いかけます。

長いので一部抜粋
https://github.com/appium/appium-base-driver/blob/master/lib/basedriver/commands/find.js#L204

const comparedImage = await this.compareImages(MATCH_TEMPLATE_MODE, b64Screenshot, b64Template, {threshold, visualize});

なんでこの行に目をつけたかって？引数の内容からです。

screenshot
template
threshold

がありますね？

screenshot：ベースの画像。探す対象。
template：テンプレート画像。この画像をscreenshotから探す。
threshold：閾値

です。
ここらへんは読む前にopenCVの画像認識を触っていたのでなんとなくわかりました。

次、 comparedImage を探します。
https://github.com/appium/appium-base-driver/blob/5b12eebcf011cf7676a2987b646a6394ddafb639/lib/basedriver/commands/images.js#L34

case MATCH_TEMPLATE_MODE.toLowerCase():
      // firstImage/img1 is the full image and secondImage/img2 is the partial one
      result = await imageUtil.getImageOccurrence(img1, img2, options);
      break;

TEMPLATE_MODEが引数なのでこの行ですね。
getImageOccurrence を探します。

const matched = await fullImg.matchTemplateAsync(partialImg, cv.TM_CCOEFF_NORMED);

たどり着いたーーーー！ここの実装が肝！なぜなら matchTemplate って openCV のやつだから。
このまま matchTemplateAsync も辿ってみるのもありですが、それは opencv4node.js さんの領分なので今回はここまでです。

ざっと読んでみたところ、 matchTemplate つまりはテンプレートマッチングで対象から検索していますね。なるほど。

なるほど？

オチ

appium + webdriverio + mocha でやってるんですけどfindElementByImageがwebdriverioになかったね！！！！
普通にopencv4node.js直接使って構築しましたとさ。

更に小ネタ

テンプレートマッチングだとやりたい画像ではmatch率イマイチだったので特徴点抽出つかって識別しました。