Salesforceで画像回帰テストのGitHub Actions対応


[SalesforceでVisual Regression Testやってみる](https://qiita.com/mino0123/items/b36b028aca5415434c7d) の続きとして、GitHub Actionsに対応してみました。

と言いつつまだほとんど対応できてないのでmasterにマージしてません。
https://github.com/mino0123/salesforce-vrt-boilerplate/tree/ghactions

----

```yaml
name: xbrowser
on: [push]
jobs:
  vrt-ie:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: npm install
      - run: npm test
        env:
          SF_USERNAME: ${{ secrets.SF_USERNAME }}
          SF_PASSWORD: ${{ secrets.SF_PASSWORD }}
          BROWSER: "internet explorer"
      - uses: actions/upload-artifact@master
        if: always()
        with:
          name: test-screenshots
          path: test/screenshots
  vrt-safari:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: npm install
      - name: Run safari driver
        run: |
          sudo safaridriver --enable & safaridriver -p 0 &
      - run: npm test
        env:
          SF_USERNAME: ${{ secrets.SF_USERNAME }}
          SF_PASSWORD: ${{ secrets.SF_PASSWORD }}
          BROWSER: safari
      - uses: actions/upload-artifact@master
        if: always()
        with:
          name: test-screenshots
          path: test/screenshots
  vrt-chrome:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: npm install
      - run: npm test
        env:
          SF_USERNAME: ${{ secrets.SF_USERNAME }}
          SF_PASSWORD: ${{ secrets.SF_PASSWORD }}
          BROWSER: chrome
      - uses: actions/upload-artifact@master
        if: always()
        with:
          name: test-screenshots
          path: test/screenshots
  vrt-firefox:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - run: npm install
      - run: npm test
        env:
          SF_USERNAME: ${{ secrets.SF_USERNAME }}
          SF_PASSWORD: ${{ secrets.SF_PASSWORD }}
          BROWSER: firefox
      - uses: actions/upload-artifact@master
        if: always()
        with:
          name: test-screenshots
          path: test/screenshots
```

- ユーザー名/パスワード/実行ブラウザを環境変数として渡しています。
- ユーザー名/パスワードの定義はGitHubのシークレット経由で。
https://help.github.com/ja/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets

- DRY目指しても後で崩すことになるだろうと思ってmatrix化はあえてしてません。

- ハマったところ
テストが落ちると後続のupload-artifactが発動せず、差分が出て落ちたときの差分画像が取得できなくて困っていましたが、 `if: always()` を追加することで常に発動するようにできました。
https://stackoverflow.com/questions/58858429/how-to-run-a-github-actions-upload-artifact-step-even-if-the-previous-step-fail

## CircleCIで撮った画像と比較

CircleCIでの実行結果が残っているので、試しに画像を比較してみました。
差分が少なければいろいろな環境で同時にCIしていくのもできたりしないかな、と思っていたのですが……

CircleCIでの実行結果(Chrome)

![account-save-end_chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144/2d8f8d9e-acdf-7bf1-2d54-bca103622aa4.png)

GitHub Actionsでの実行結果(Chrome)
![account-save-end_chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144/85d4a733-f32c-aa2c-e367-a2e414f36371.png)

差分
![account-save-end_chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144/4b1eb3eb-0b71-83a3-64a6-ff11ece396ac.png)

ウィンドウに関わる設定をもとから行っていないので違いがあるのは覚悟していましたが、
ここまで違うとは...パッと見で

- ウィンドウサイズ
- 文字の太さ
- 遅延ロードされるアイコンのロード具合

が違ってます。

## 闇

クロスブラウザテストが闇というのは先達の記事でも言われていることなのである程度の覚悟はしてましたが、実際に自分でやってみて痛感しました。

### IE

Selenium情報が多くて回り道しましたが、WebdriverIOだと公式情報を参照したらでてきた `wdio-iedriver-service` パッケージだけで 起動まではできました。
http://v4.webdriver.io/guide/services/iedriver.html

しかしその先にまっていたのはChromeだと2分で終わるテストを22分かけて落ちる結果でした。
遅いのは覚悟してましたが、ここまで違うとは。
また、スクロールしつつ画面全体をキャプチャする`wdio-screenshot-v5`が非対応っぽく、うまく画像が撮れてませんでした。

![2_internet explorer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144/0cff7497-8102-74c7-4072-65f20c70b41f.png)

### Edge

<blockquote>
<p>
<code>DISM.exe /Online /Add-Capability /CapabilityName:Microsoft.WebDriver~~~~0.0.1.0</code> を実行すればよいのですが、<code>A Windows capability name was not recognized.</code>のエラーが出てダウンロードできませんでした。当方Windowsに詳しくないためv4を待つかということでここで断念しました。
</p>
<br />
<footer>
<cite>
<a href="https://moneyforward.com/engineers_blog/2019/11/06/e2e-test-automation/">GitHub Actionsのワークフローを利用してクロスブラウザのE2Eテストを自動化する | Money Forward Engineers' Blog</a>
</cite>
</footer>
</blockquote>

多少あがいてみましたが、付け焼き刃では超えることができない深淵でした。。。

### Safari

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">手元のMac(10.14.6)でbrew caskでSafari Technology Previewをいれてsafaridriver --enableするとAllow Remote Automationの設定はONになりE2Eも動作したのですが、GitHub Actionsで同じことをするとAllow Remote Automationのエラーがでてしまいました。。また別の何かでダメなのかもしれないです。</p>&mdash; Hiromi Kimura (@kimromi) <a href="https://twitter.com/kimromi/status/1192236401275756546?ref_src=twsrc%5Etfw">2019年11月7日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これも。。。

## まとめ

わりと軽い気持ちでやってみたのですが、実際にやってみると CI環境xプラットフォームxブラウザ という3次元闇構造に飲み込まれてしまいました。
~~クロスブラウザで一番やりたいSafariとEdgeが対応できてないしこれPuppeteerでいいのでは？~~

あと調べても大体Seleniumの情報で、WebDriverIOにそのまま適用していいものなのかやってみないとわからなかったのも苦労しました。

全開WebDriverIOで始めたので今回もそのまま使っていますが、ツールごとの書き方や動作の差異がどのくらいあるのか気になってるので、時間があればSeleniumやPupperteerも試してみたいです(時間があれば……)。

## 参考情報

- [GitHub Actions で Windows IE11 と Mac Safari を selenium-webdriver で動かす - Qiita](https://qiita.com/mizchi/items/9c03df347748ba5f5a11)
- [GitHub Actions の matrix と cache 使ってe2eワークフローを作る - Qiita](https://qiita.com/mizchi/items/d4b027f47d664ece5087)
- [GitHub Actionsのワークフローを利用してクロスブラウザのE2Eテストを自動化する | Money Forward Engineers' Blog](https://moneyforward.com/engineers_blog/2019/11/06/e2e-test-automation/)
- [クロスブラウザテストの闇と闇と闇](https://speakerdeck.com/tsuemura/kurosuburauzatesutofalsean-toan-toan)