SalesforceでVisual Regression Testやってみる

Salesforce用にVRTやるときのボイラープレートのつもりで、とりあえず標準画面で作ってみた。

https://github.com/mino0123/salesforce-vrt-boilerplate
https://circleci.com/gh/mino0123/salesforce-vrt-boilerplate/

久しぶりにE2Eテスト調べたら、以前調べたときはSelemiumの新バージョン的な立ち位置だと思ってたwebdriverがW3Cで仕様が策定されていた。

WebdriverIO使ってみたけど、現行バージョンの5系と前バージョンの4系の間でプラグインの命名規則が`wdio-***`から`@wdio/***`に変わったり、設定の形式もかわってたらしく、調べるのに苦労した。

あとスクロール込みでページ全体をキャプチャするためのプラグインである`wdio-screenshot`が2年前で更新止まってて、5系で使える`wdio-screenshot-v5`の発掘とか。

## 所感

標準画面が絡むと項目固有のidやclassが指定されていないので、.slds-inputとかで要素を取得する必要があるのでセレクタ関連きびしい。
テスト環境やSalesforceの機嫌で結果画面出るタイミングかわるのキツい。関連リストのアイコンのロードが間に合わなくて落ちた。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">LEXでVRT的なのやってみようとした結果…… <a href="https://t.co/Qoe2FrRhir">pic.twitter.com/Qoe2FrRhir</a></p>&mdash; mino0123 (@mino0123) <a href="https://twitter.com/mino0123/status/1117652304553840640?ref_src=twsrc%5Etfw">2019年4月15日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

画面にあるアイコンのロードまで待機を個別に全部指定するのは現実的ではないし、標準画面を含んだ状態での確認は、十分な待機時間を固定で挟むか、諦めるか……
JavaScript側にLEXのイベントハンドリングの仕組みが露出してて表示完了みたいなイベントがあればハンドリングで行けるかも？
標準画面を挟まない、単品のコンポーネント程度の確認ならばまだいけるかもしれない。

年3回のメジャーアップデートがあるSalesforce上での回帰テストはプラットフォームであるSalesforceに対しても行いたいという欲求は当然の如く存在するものと思うので、そこができないと厳しい。待機時間を盛ればいけるかもしれないが……

Summer'19のプレリリースが始まったし、ページレイアウトを揃えてgs0環境でも動かしてみようと思う。

## 参考

- [CircleCIの公式Dockerイメージに日本語フォントを追加してE2Eテストを行ってみる](https://qiita.com/takayamag/items/b632524e7994210fd1e8)
- [Circle-CI 2.0のcron triggerを使って、定期実行をする - Qiita](https://qiita.com/terrierscript/items/55b6bbfbc064e80c1349)

## 追記(Summer'19環境で動かす)

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">【悲報】Summer&#39;19(gs0)環境で無事死亡<br><br>死因: .slds-modal__footer が .inlineFooter に変更</p>&mdash; mino0123 (@mino0123) <a href="https://twitter.com/mino0123/status/1120160666361323520?ref_src=twsrc%5Etfw">2019年4月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-conversation="none" data-cards="hidden" data-lang="ja"><p lang="ja" dir="ltr">セレクタ対応して最後のスクショ比較までいった結果 <a href="https://t.co/p4LnJhD2vW">pic.twitter.com/p4LnJhD2vW</a></p>&mdash; mino0123 (@mino0123) <a href="https://twitter.com/mino0123/status/1120261358333775875?ref_src=twsrc%5Etfw">2019年4月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

アイコン周りが小さくなったのと、関連リストにページブロック風な線が付いたことでページ全体の縦位置がずれた。
ここまで変わるとは思わなかった。

## Winter'20

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">以前作ったVRT、Winter&#39;20 での差分 <a href="https://t.co/4dTeWtwtw1">pic.twitter.com/4dTeWtwtw1</a></p>&mdash; mino0123 (@mino0123) <a href="https://twitter.com/mino0123/status/1193699450838904832?ref_src=twsrc%5Etfw">November 11, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

- セレクタが使えなくて落ちることはなかった
- 画像検証では落ちるので、実戦で使うにはやはり相応の覚悟は必要そう

## Spring'20

### 変更前
![account-save-end_chrome_expected.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144/4600f17b-f1fd-e538-9d9e-015e959f83ed.png)

### 変更後
![account-save-end_chrome_actual.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144/b99bc9cf-72a0-dbc4-a015-18639c961a6a.png)

### 差分
![account-save-end_chrome_diff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144/e6409272-18b7-4547-d789-f5184953f3f1.png)