Githubワークフローであなたのサイプレステストを実行します

導入
私の以前のサイプレスの記事では、サイプレスのセットアップを取得し、ローカルに実行する方法を歩いてきました.この点まで、私はCIパイプラインでテストを実行する方法について話しませんでした.さて、すべての変更は本日!
この投稿では、GitHubアクションで簡単にテストを実行する方法を紹介します.

ワークフロー
Githubワークフローでは、特定のトリガーイベントが発生したときに実行されるワークフローを定義できます.ワークフローはYAMLで定義され、documented formatting syntax .
ときに.YML(またはYAML)ファイルは期待された場所に置かれ、REPOにマージされます.ファイルの構文が良い場合は、ワークフローが実行されます.Github UI経由でワークフロー実行の進行状況を表示できます.
基本的なワークフローは、私はあなたが開始されますを介して歩くつもりです、そして私はあなたがもっと学ぶのに役立つリンクを提供します.
それで、これをしましょう!

セットアップ
このポストのために、私はあなたがサイプレスとの親密さが少しあると仮定しています.私にはもっと詳細があるprevious Cypress post , それで、あなたがその詳細を望むならば、見てください.
最初のサイプレス設定でテストを使用して、私たちを開始します.家についていく

プロジェクトの新しいフォルダを作成する

ランnpm init

ランnpm install cypress --save-dev

ランnpx cypress open

すべてを確認するには、サイプレスランナーを介してテストのいずれかを実行するローカル良い

ワークフロー
では、このワークフローをどうしますか?当社のワークフローはかなり基本的になるだろう.すべてのプッシュmain ブランチ、ワークフローは、コードをプルし、Firefoxのサイプレステストを実行します.テストが失敗すると、ワークフローが失敗します.また、手動でgithub UIからワークフローをトリガーすることができます.
を見てみましょう.このワークフローのためのYMLファイル

name: run my vanilla Cypress tests
on: 
  push:
    branches:
      - 'main'
  workflow_dispatch:

jobs:
  checkout-and-test:
    runs-on: ubuntu-latest
    steps:
      - run: echo "🎉 The job was automatically triggered by a ${{ github.event_name }} event."

      - name: Check out repository code
        uses: actions/checkout@v2

      - name: run cypress tests with firefox
        uses: cypress-io/github-action@v2
        timeout-minutes: 10
        with:
          browser: firefox

うまくいけば、このワークフローの流れはかなり自明です.キーセクションは以下の通りです.

トリガーイベントを定義するon . 我々は、我々のワークフローをプッシュmain または手動でgithubのUIまたはAPIを介してトリガ(workflow_dispatch) :

on: 
  push:
    branches:
      - 'main'
  workflow_dispatch:

コードをチェックアウトします

- name: Check out repository code
  uses: actions/checkout@v2

Firefoxのテストを実行します.

- name: run cypress tests with firefox
  uses: cypress-io/github-action@v2
  timeout-minutes: 10
  with:
    browser: firefox

cypress githubアクションについての詳細情報については、チェックアウトdetailed documentation . 私は、ちょうどほとんどここでその能力の表面をひっかいています.
Githubがワークフローファイルを見つけるのを許すために、ファイルは./.github/workflows フォルダ.私のファイルに名前を付けるCI.yml , しかし、名前は重要でありません.ファイル拡張子のみ.yml or .yaml ) とファイルの場所の問題.

でのワークフローの表示
あなたのブランチがGithubにプッシュされると、Githubはファイルを解析し、それが構文仕様に準拠することを確認します.プッシュする前に構文を検証したい場合は、Github Actions for VS Code plugin .
ワークフロー実行を表示するには、Github UIのrepoに進み、Actions タブ.リストの一番上にある最新のワークフローが表示されます.

ファイル構文が有効でない場合、ジョブは失敗し、エラーが表示されます.構文が有効であるならば、あなたは仕事をクリックすることができて、それが走るのを見ることができます.ローカルで実行しているときに表示されるメッセージと非常に似ているはずです.

UIを介してワークフローをトリガーするには、左のNAVでワークフローをクリックしてRun workflow ボタン


包む
そこで我々が行くので、我々は現在、Gitthubレポへの各々のプッシュで実行している我々のテストをします.デモはGiThubに焦点を当てていたが、任意の主要なCIプロバイダと同じを達成することができます.
私はあなたがこのポストで何かを学んだことを望みます、そして、あなたのテストが彼らが属するCIパイプラインに移されることがどれくらい簡単であるかについて見ることができます.
いつものように、コメントや質問があれば教えてください.お気軽に購読してくださいblog site より多くのテストオートメーションコンテンツ.ありがとう