GitHub Actions の matrix と cache 使ってe2eワークフローを作る

動いてるリポジトリはここ https://github.com/mizchi/frontend-gh-action-playground

やったこと

発想は https://qiita.com/mizchi/items/9c03df347748ba5f5a11 の続き

• job 間の依存を明示して build => {各種e2e} というステップでタスクを流す
• 新たに導入された actions/cache を使って node_modules と dist (webpack 出力ディレクトリ) を cache して次のジョブに渡す
  • node_modules は package.json の ハッシュ値をキーに、 dist は GITHUB_SHA(コミットハッシュ)をキーにした
• safaridriver が仕様変更で動かなくなったので一旦止めた(サポートにこれ先月動いてたのに今動かないの？って連絡だけした)
• matrix を使って e2e をスッキリ書けるようにした
• IE で動かすのと cache の関係で、全部 Windows 上でビルドとテストを行うようにした
  • それとは別に Ubuntu 上での単体テストは流している
• matrix を参照して if で分岐

結果として 現時点の GitHub Action が備える機能が全部入りみたいな構造になっている。

name: xbrowser

on: [push]

jobs:
  build:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: cache node_modules
        uses: actions/cache@v1
        with:
          path: node_modules
          key: xbrowser-yarn-${{ hashFiles('**\yarn.lock') }}
          restore-keys: |
            xbrowser-yarn-
      - name: cache dist
        uses: actions/cache@v1
        with:
          path: dist
          key: dist-${GITHUB_SHA}
          restore-keys: |
            dist-${GITHUB_SHA}
      - run: yarn install
      - run: yarn build
  e2e-win-matrix:
    needs: [build]
    runs-on: windows-latest
    strategy:
      matrix:
        browser: [ie, firefox, chrome]
    steps:
      - uses: actions/checkout@v1
      - uses: actions/setup-node@v1
        with:
          node-version: 12
      - name: Use node_modules cache
        uses: actions/cache@v1
        with:
          path: node_modules
          key: xbrowser-yarn-${{ hashFiles('**\yarn.lock') }}
          restore-keys: |
            xbrowser-yarn-
      - name: Use dist cache
        uses: actions/cache@v1
        with:
          path: dist
          key: dist-${GITHUB_SHA}
          restore-keys: |
            dist-${GITHUB_SHA}
      # For IE Webdriver
      - name: Cache IEDriver
        uses: actions/cache@v1
        id: iedriver-cache
        with:
          path: Selenium.WebDriver.IEDriver.3.150.0
          key: IEDriver.3.150.0
      - if: matrix.browser == 'ie'
        uses: warrenbuckley/Setup-Nuget@v1
      - if: matrix.browser == 'ie' && steps.iedriver-cache.outputs.cache-hit != 'true'
        run: nuget install Selenium.WebDriver.IEDriver -Version 3.150.0
      # Run
      - run: yarn test:karma:${{ matrix.browser }}
      - run: yarn test:e2e:${{ matrix.browser }}

  # does not work: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver
  # e2e-safari:
  #   runs-on: macos-latest
  #   needs: [build]
  #   steps:
  #     - uses: actions/checkout@v1
  #     - uses: actions/setup-node@v1
  #       with:
  #         node-version: 12
  #     - uses: actions/cache@v1
  #       with:
  #         path: ~/.cache/yarn
  #         key: xbrowser-mac-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
  #         restore-keys: |
  #           xbrowser-mac-yarn-
  #     - uses: actions/cache@v1
  #       with:
  #         path: dist
  #         key: dist-${GITHUB_SHA}
  #         restore-keys: |
  #           dist-${GITHUB_SHA}
  #     - run: yarn install
  #     - run: |
  #         defaults write com.apple.Safari IncludeDevelopMenu YES
  #         defaults write com.apple.Safari AllowRemoteAutomation 1
  #         sudo safaridriver --enable
  #         safaridriver -p 0 &
  #     # - run: yarn test:karma:safari
  #     - run: yarn test:e2e:safari

課題

• ファイル値の hashFiles 関数を windows で使う場合にデリミター周りにバグがあるらしく key: xbrowser-mac-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }} みたいなスラッシュ使ったディレクトリパス指定だと、コードが動かない。代わりに key: xbrowser-mac-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '**\yarn.lock')) }} とする必要があった
  • https://github.com/actions/cache/issues/39
• 先月動いてた safaridriver が動かなくなった
• job間のファイル引き継ぎに GITHUB_SHA による引き継ぎを行ったが、正直そういう用途ではないと思う。引き継いだ先の readonly な用途の場合でも、 post process での永続化を行おうとして、node_modules が大きいのでそのせいで15sぐらい掛かったりする
• 現在 1キャッシュ 200M までなので、 ちょっと大きいリポジトリだと node_modules をキャッシュできないと思われる
  • 手元だと 480M の node_modules がキャッシュできてるようにみえるが、たぶん tar みたいな結合 + gzip 後のキャッシュサイズだから？

追記: .tgz で 400MBだった模様

Safaridriver が動かなくなってしまった

バグ、というかサポート範囲と明示されてない機能を使っていたのだが、先月から safari のオートメーションが動かなくなった

https://qiita.com/mizchi/items/9c03df347748ba5f5a11 では safaridriver が動いていたのが、たぶん先月あたりから急に動かなくなった。たぶんコンテナの仕様変更があったんだと思う。

https://github.com/microsoft/azure-pipelines-tasks/issues/8406 このへん？

とりあえず手元でテストできるんだけど、 win と linux はともかく、 mac 周りは GitHub 社の立場的に難しそう。