Cypress - github actions 2편

Chatgpt를 구워 삶아 설정한 github actions의 xml 파일 

 

다시 Cypress를 쓰는 시간이 도래했다.

 

Cypress Project를 설정 하면서 원했던 생각한 플로우는 다음과 같다.

1.  Slack에서 Command 봇으로 Github Actions를 트리거한다.
2. Github Actions 에서 Chrome, Edge 최소한 2개 이상 브라우져에서 테스트를 한다.
3. 테스트 결과를 다시 Slack 으로 돌려 받는다.

물론 Cypress Cloud 쓸경우 record 하면 더 편하긴한데.. 난 가난해

 

여튼 그래서 시작한 이틀간의 대장정? github actions의 workflow를 쓰자

그리고 봇을 만들자

 

봇 그까잇거 대애충 만들어서 slack commands를 만들고, bolt.js를 쓰는데, 요 서버는 google cloud에 올려버렸당

그건 나중에 다시 정리해서 올리고...

Slack | Bolt for JavaScript

 

 

여튼 command 로 cypress-start를 하면 github actions를 트리거 하게 한다.

워크플로를 트리거하는 이벤트 - GitHub Docs

https://19880811.tistory.com/entry/github-actions-repositorydispatch

이전에도 글을 한번 올렸음...

 

여튼 그게 중요한건 아니고 

name: Cypress Tests

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  workflow_dispatch:

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        browser: [chrome, edge, firefox]

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Cache Node.js modules
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**/package.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Run Cypress tests and generate JUnit report
        uses: cypress-io/github-action@v6
        with:
          browser: ${{ matrix.browser }}

 

cypress-io/github-action@v6 을 통해 cypress 를 실행하고 report를 생성한다.

 

이후에 result에 나온 결과물을 토대로 slack message로 보내면 됨 

 

 

 

그래서 우리의 친절한 친구 헤르미온느는 열일중이다