2019年11月21日(木)に開催しました、エンジニア文化祭～新技術へのチャレンジ～の資料です。

1. Selenideを使って上司のよくある
勘違いを回避するお話
株式会社セレス 中川陽平

2. 自己紹介

3. 中川陽平
1児の父

4. ウェブデザインやってる会社
⇒広告配信やってる会社
⇒ポイントサイトやってる会社

5. PHP、JSとかメイン

6. 今こんなサービス担当してます

7. モッピーバイト
★ 今年の4月から担当
★ バイト探しのサイト

8. CareerGroove
★ 読み物系オウンドメディアも同時に
担当しています

9. CareerGroove
★ 「面白いバイト」で検索すると1番目
★ 「楽なバイト」で検索すると2番目

10. よくあるエピソード

11. 外出していた上司から
電話がかかってきた。

12. 上司😡
サイトのテキストが出てないよ！
すぐ直せ！今日中！ガミガミ！

13. 🤦‍♂私
すみません！対応します！

14. 私🤦‍♂💭メンバー共有

15. 私🤦‍♂ 🚽とりあえずトイレ行こ🏃

16. あるメンバー🙋が上司に
電話📞で折り返し

17. メンバー🙅
これ○○のときに
移動させましたよね？

18. 上司🙇
そうだった！ごめん！ほんとごめん！

19. 私
😵

20. 勘違いは回避できなかったんですけどね

21. 今後は回避したいね

22. 気づかない間にレイアウト崩れが
おきるかもしれないし

23. だったら

24. 変化があったら
通知すればいいじゃないか

25. とりあえず作ってみた

26. 使ったもの
★ Java
★ IntelliJ IDEA COMMUNITY
★ Selenide
★ aShot
○ ImageDiffer
★ メール(開発中はsmtp4dev)
★ Java、Selenideに詳しい社内のメンバー

27. こちらが出来上がった画像
★ 前回との差分の割合通知
★ MLに流してエビデンスを残す

28. こちらが出来上がった画像

29. UnitTestにも反映
変化があったとき 変化がなかったとき

30. 技術的な点

31. Selenide とは？

32. ブラウザーを通してUIを操作する
テスト用のフレームワーク

33. DEMO

34. CSS Selector で要素を指定できる。
@Test
public void entry6164() {
entryFormPage.init("/entry/form.php?job_id=6164")
.inputName("テスト姓", "テスト名", "テストセイ", "テストメイ")
.selectSex("M")
.inputBirthDate("1990", "01", "02")
.inputTel("09099998888")
.inputMailAddress("mpjob-dev-ml@ceres-inc.jp")
.inputJob("大学生")
.inputAnswerFree("①金曜日の17時,②掃除代行と料理代行いずれも")
.inputContactDay("いつでも連絡OKです")
.inputNote("貴社はホワイトですか？")
.clickSubmitButton()
.checkErrorNotExist();
entryConfirmPage.clickSubmitButton().closeWindow();
}
public EntryFormPage inputName(String name_sei, String
name_mei, String kana_sei, String kana_mei) {
$("input[name=name_sei]").val(name_sei);
$("input[name=name_mei]").val(name_mei);
$("input[name=kana_sei]").val(kana_sei);
$("input[name=kana_mei]").val(kana_mei);
return this;
}

35. jQueryっぽくかけるので楽ちん
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<script>
$( ".myClass" ).css( "border", "3px solid red" );
</script>

36. Java で使えます。

37. Slenideの便利な点
★ Selenium のラッパーらしいんだけどSelenideの方
が圧倒的に楽
★ Seleniumだとページのロード完了を判定する必要
があるが、Selenideはない
★ jQueryライクにコードが簡潔に書ける

38. 画像で差分をとるためにしたこと

39. 画像差分をとるためにしたこと
★ 定期的に実行
★ 観測しておきたいページのスクリーンショットを取得
★ 前回のスクリーンショットと比較
★ 異なる割合(変化率)を抽出
★ メールで送信してエビデンス（証拠）を残す

40. 定期的に実行
★ Jenkinsにお任せ（任せた）

41. スクリーンショットの取得
★ Selenideのスクリーンショット機能
■ ブラウザの表示領域しか残せない
★ aShotを利用
○ 自動的に画面をスクロールしてキャプチャしてく
れる
○ キャプチャしたくないものを隠すこともできる(らし
い、今のところうまくいってない)

42. スクリーンショット用のコード
String testName = "表画面PC都道府県ｘ市区町村ページ";
String FileNamePrefix = "pc_pref_city_";
ResultPage resultPage = open("/tokyo/city_setagayaku/", ResultPage.class);
File currentImage = new File(pathToResources + FileNamePrefix + "ss_result_current.png");
File afterImage = new File(pathToResources + FileNamePrefix + "ss_result_after.png");
String diffFileName = pathToResources + FileNamePrefix + "ss_result_diff.png";
WebDriver driver = WebDriverRunner.getWebDriver();
WebElement headerArea = $("#headerarea");
JavascriptExecutor jsExec = (JavascriptExecutor) driver;
// ヘッダー画像取得
BufferedImage headerImage = new AShot()
.coordsProvider(new WebDriverCoordsProvider())
.takeScreenshot(driver, headerArea)
.getImage();
// ヘッダー非表示
jsExec.executeScript("arguments[0].style.visibility='hidden'", headerArea);
// スクロールしながら全体のスクリーンショットを取得
// https://jitpack.io/p/yandex-qatools/ashot
// http://naruoga.hatenablog.com/entry/2019/02/09/012608
Screenshot ssImage = new AShot()
.coordsProvider(new WebDriverCoordsProvider())
.shootingStrategy(ShootingStrategies.viewportPasting(1000))
.takeScreenshot(driver);
// ヘッダーを戻す
jsExec.executeScript("arguments[0].style.visibility=''", headerArea);
// ヘッダー画像を全体のスクリーンショットに張り付け
Graphics2D graphics = ssImage.getImage().createGraphics();
graphics.drawImage(headerImage, 0, 0, null);
graphics.dispose();
double diffRate = diff(ssImage, currentImage, afterImage, diffFileName, testName);
// 結果
Assert.assertTrue(0.0 == diffRate);

43. 前回分のスクリーンショットと比較

44. 前回分のスクリーンショットと比較
★ aShotに ImageDiffer というクラ
スがあるのでそれを利用
○ 画像の差分をとる機能
○ 変化があった部分は赤く表
示

45. 差分取得用のコード
// diff 画像の作成
BufferedImage bufferCurrentImage = ImageIO.read(currentImage);
BufferedImage bufferAfterImage = ImageIO.read(afterImage);
ImageDiffer imageDiffer = new ImageDiffer();
ImageDiff imageDiff = imageDiffer.makeDiff(bufferCurrentImage, bufferAfterImage);
BufferedImage diffImage = imageDiff.getMarkedImage();
ImageIO.write(diffImage, "PNG", new File(diffFileName));

46. 前回との変化の割合を算出
★ aShot の ImageDiffer は何ピクセル分の変化が
あったのかが取得できる
★ 画像のサイズのうち何ピクセル変わったのかわか
れば変化の割合がわかる
if (imageDiff.hasDiff()) {
diffRate = (double) imageDiff.getDiffSize() / (
imageDiff.getMarkedImage().getWidth() * imageDiff.getMarkedImage().getHeight());
}

47. メール送信
★ HTML メールを Java で作って送信
★ Windows で開発中は smtp4dev を利用
○ メールサーバー不要
○ 実際にメールが送信されることもない
○ 受け取ったメールの内容を確認できる

48. メール送信
★ マルチパートを使ってメール本文内に差分を表示し
たスクリーンショットを表示
★ 一目で何が変わったかを把握できるように。
★ 変化の割合もメールの件名、本文に含めて注意喚
起

49. 最後に

50. 結構簡単に差分付きエビデンスが残せるの
でおすすめです！