Cypress入門してGithub Actionsでデプロイ時と定期実行させてみるまで
Yusuke AkiyamaTodos
- Cypressのインストール
- サンプルの実行
-
ルート（
localhost:3000）にアクセスするだけのテストを実行する - テストファイルをTypeScriptに変更
- リンクを辿ってみる
- Github Actionsでpush時に実行するように設定
Yusuke AkiyamaCypressのインストール
まず参考になりそうな記事を探します！
とりあえず以下の記事がNext.jsでルートにアクセスするテストをしているのでやってみる。
応用的にやりたいことが増えた際はいかの公式サイトから探せば良さそう
Yusuke Akiyamaサンプルの実行
yarn add -D cypress
npx cypress open
todo.spec.jsを押してみる。
動いた！
終わらせてみると
cypress.jsonとcypressフォルダーが出現し、起動時のテストファイルがcypress/integrationに入ってました ✨
Yusuke Akiyama
ルート（localhost:3000）にアクセスするだけのテストを実行する
テストをする前にNext.jsを起動しておきます。
devでもいいかもですが念の為ビルド後ちゃんと起動させます
yarn build
yarn start
そのあと以下のファイルを追加しました。
cypress/integration/mytest/main.spec.js
describe('指定したページにアクセスできるかの確認', () => {
it('トップページを正常に開ける', () => {
cy.visit('http://localhost:3000');
});
});
cypressは起動したままでもテストファイルが画面に表示されたのでクリックするとテストが実行できました！
問題なく動作し、テストはokが出ました 🎉
Yusuke AkiyamaテストファイルをTypeScriptに変更
ついでにサンプルのテストより上に表示させたかったのでフォルダ名に0-を追加
cypress/integration/0-mytest/main.spec.ts
VSCode内でエラーが出たので2点修正
"types": [], → "types": ["cypress"],
"isolatedModules": true,→"isolatedModules": false,
その後実行してみても問題なかった。
TSの方が色々記述がおかしい時に警告をくれそうな感じがありました 👏
Yusuke Akiyamaリンクを辿ってみる
以下のコードでテストが通りました。
describe('全ページ遷移できるか', () => {
it('Top page', () => {
cy.visit('/');
});
it('Members page', () => {
cy.get('section > div > a').first().click();
});
it('Member details page', () => {
cy.get('main .p-4.border.rounded-xl').first().click();
});
it('Teams page', () => {
cy.get('.hidden > [href="/teams"]').first().click();
});
it('Team details page', () => {
cy.get('[href="/teams/93f51de8-8cca-4a5d-8e80-b8d1233146dc"]').click();
});
});
リンク踏む時は、click()でいいっぽいです。
エレメントの中でaタグが二つ以上ある時first()などで選択できることがわかりました。
また、Cypressの中でエレメントを選択するとコードを生成してくれるので
それがすごく便利！！
Yusuke AkiyamaGithub Actionsでpush時に実行するように設定
参考記事を探す
とても参考になる記事が見つかったので一旦コピペしました。
動作確認してもんだいなさそうです！
"scripts": {
"cy:open": "cypress open",
"cy:run": "cypress run"
}
# cypress
cypress/screenshots
cypress/videos
name: Cypress
on: deployment_status
jobs:
cypress:
if: |
github.event.deployment_status.state == 'success' &&
github.event.deployment_status.environment == 'Preview'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 14.x
- uses: actions/cache@v2
with:
path: ~/.cache/yarn
key: ${{ runner.os }}-yarn-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
restore-keys: ${{ runner.os }}-yarn-
- name: Install dependencies
run: yarn install --frozen-lockfile --prefer-offline
- name: Run cypress
uses: cypress-io/github-action@v2
with:
install: false
config: baseUrl=${{ github.event.deployment_status.target_url }}
TypeScriptに関してもとても参考になるので後でアップデートしようと思います。
一旦やるべきことを達成したのでCloseします！