2020|sitateru tech blog

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

2020年2月5日水曜日

GitHub ActionsとCypressでサイト監視してみる

こんにちは、朝野です。

皆さんはGithub Actions使ってますか?
シタテルではCI/CDはCircleCIを使っているのですが、せっかくなのでActionsも何かに使いたいなあと思って、簡単なサイト監視のようなものを作ってみたのでそのことを書いてみます。

監視に使うのは、E2EテストフレームワークのCypressです。
ブラウザの自動化やテスト用に使っている方も多いのではないかと思います。
サクッと動かすなら
  • テストコードを書いて cypress/integration/ ディレクトリに入れておく
  • npmでcypressをインストール
  • $ npx cypress run で実行
と、なかなかお手軽です。

たとえば https://sitateru.com/ のページが表示されることをチェックするコードをCypressで書くとこのようになります。
describe('Check page', function() {
  it('top', function() {
    // URLを開く
    cy.visit('https://sitateru.com/')
    // ページタイトルをチェック
    cy.title().should('eq', 'sitateru - シタテル - | その服は、つくれる。')
    // ページ内に特定の文字列があることを確認する
    cy.contains('かんたん無料登録')
    // CSSセレクタを使って、要素が存在することを確認する
    cy.get('.top-main-visual').should('exist')
  })
})

また、ログイン操作であればこんなふうになります。
describe('Login', function() {
  it('login', function() {
    cy.visit('https://atelier.sitateru.com/login')
    // フォームに入力
    cy.get('#email').type(Cypress.env('LOGIN_EMAIL'))
    cy.get('#password').type(Cypress.env('LOGIN_PASSWORD'))
    // ログインボタンをクリック
    cy.get('input[type="submit"]').click()

    // 遷移先のURLパスをチェック
    cy.location('pathname').should('eq', '/topics')
  })
})
パスワードなどの情報は環境変数に入れておくのがいいですね。
CYPRESS_SOMEENV のように CYPRESS_ プレフィックスをつけた環境変数を定義しておくと、コード内で Cypress.env('SOMEENV') と書いて呼び出すことができます。


GitHub Actionsは .github/workflows/ にやりたいことを書いたyamlファイルを置けば実行されるので簡単ですね。
ざっと作ってみたのがこちら。
name: e2e test
on:
  # 毎時0分に実行
  schedule:
    - cron: '0 * * * *'

jobs:
  build:
    name: monitoring
    runs-on: ubuntu-latest
    # cypress公式のDockerイメージを使う
    container:
      image: cypress/browsers:node12.14.0-chrome79-ff71
    steps:
      - name: checkout
        uses: actions/checkout@master
        with:
          ref: 'master'
      - name: install
        run: npm install
      - name: run test
        env:
          LANG: "ja_JP.UTF-8"
          CYPRESS_LOGIN_EMAIL: ${{ secrets.CYPRESS_LOGIN_EMAIL }}
          CYPRESS_LOGIN_PASSWORD: ${{ secrets.CYPRESS_LOGIN_PASSWORD }}
        run: npx cypress run --browser chrome
      # 失敗したときはスクリーンショットをダウンロードできるように
      - name: gather artifact on failure
        uses: actions/upload-artifact@v1
        if: failure()
        with:
          name: cypress-screenshots
          path: cypress/screenshots
      # 結果をslackに通知 (失敗したときはメンション)
      - name: post to slack
        uses: homoluctus/slatify@master
        if: always()
        with:
          type: ${{ job.status }}
          job_name: 'e2e test'
          mention: 'here'
          mention_if: 'failure'
          channel: '#notification-actions'
          icon_emoji: ':github:'
          url: ${{ secrets.SLACK_WEBHOOK_URL }}

実行時の環境変数は env: で定義できます。
yaml内に直接書きたくないパスワードなどは、https://github.com/USERNAME/REPOSITORY/settings/secrets で登録しておけば、
${{ secrets.SECRET_NAME }} で参照することができます。

このyamlでは、ソースコードをチェックアウトしてcypressをインストール&実行した後、失敗した場合のスクリーンショットを見られるようにupload-artifact、結果をslackに送るslatifyを使ってみました。

また、Actionsでテストを実行すると、何もしなければブラウザのデフォルト言語が英語になるようです。今回は日本語表示を監視したかったので、環境変数LANGで日本語を設定しています。


というわけで、1時間に一度サイトをチェックすることができるようになりました。
slackに監視OKのメッセージが来るのがちょっとした安心感がありますね。

ここで紹介したコードはだいぶ基本的な部分で現在はもう少しいろいろ入れて運用していますが、さらに高度なレベルに持っていきたいですね💪🏻!