こんにちは、朝野です。
皆さんはGithub Actions使ってますか?
シタテルではCI/CDはCircleCIを使っているのですが、せっかくなのでActionsも何かに使いたいなあと思って、簡単なサイト監視のようなものを作ってみたのでそのことを書いてみます。
監視に使うのは、E2EテストフレームワークのCypressです。
ブラウザの自動化やテスト用に使っている方も多いのではないかと思います。
サクッと動かすなら
たとえば https://sitateru.com/ のページが表示されることをチェックするコードをCypressで書くとこのようになります。
また、ログイン操作であればこんなふうになります。
GitHub Actionsは
ざっと作ってみたのがこちら。
実行時の環境変数は
yaml内に直接書きたくないパスワードなどは、https://github.com/USERNAME/REPOSITORY/settings/secrets で登録しておけば、
このyamlでは、ソースコードをチェックアウトしてcypressをインストール&実行した後、失敗した場合のスクリーンショットを見られるようにupload-artifact、結果をslackに送るslatifyを使ってみました。
また、Actionsでテストを実行すると、何もしなければブラウザのデフォルト言語が英語になるようです。今回は日本語表示を監視したかったので、環境変数LANGで日本語を設定しています。
というわけで、1時間に一度サイトをチェックすることができるようになりました。
slackに監視OKのメッセージが来るのがちょっとした安心感がありますね。
ここで紹介したコードはだいぶ基本的な部分で現在はもう少しいろいろ入れて運用していますが、さらに高度なレベルに持っていきたいですね💪🏻!
皆さんは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のメッセージが来るのがちょっとした安心感がありますね。
ここで紹介したコードはだいぶ基本的な部分で現在はもう少しいろいろ入れて運用していますが、さらに高度なレベルに持っていきたいですね💪🏻!