[FIXED] How to configure Cypress for e2e in Github Actions?

Issue

I am trying to do an e2e test on my VueJS app that uses axios for API calls. In my vue component, in the mounted, i do an API call. My idea would be to mock this call with cy.intercept and cy.wait, however i can't make it work. On my local environment when i launch my frontend and backend servers, my test passes as the API call is made. However, the call is not silenced and the cy.wait('@apiCall') does not work.

Also my test does not work in Github Actions, i have this error : AxiosError: The following error originated from your application code, not from Cypress. It was caused by an unhandled promise rejection.. I have the impression that github actions need a special ci environment file but i don't know where to tell cypress to look into those env variables when in continous integration.

Anyone had the same issue or knows about cypress X axios X github actions combined ?

Some of my code :

test.cy.js

cy.intercept('GET', '/coaches/coach-informations/30283', {
  data: {
    email: 'hello@hello.com',
  },
}).as('getCoach')

cy.visit('/hello?coach=30283')

cy.wait('@getCoach')

component.vue

async mounted() {
   await axios.get(`/coaches/coach-informations/30283/`)
}

.env

API_URL=http://127.0.0.1:8000/api

test-frontend.yml

name: GitHub Actions Demo
on: [pull_request, push]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    env:
      working-directory: front
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install node
        uses: actions/setup-node@v3
        with:
          node:version: 'node-version'

      - name: Get yarn cache directory path 🛠
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"
        working-directory: ${{env.working-directory}}

      - name: Cache node_modules 📦
        uses: actions/cache@v2.1.7
        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: yarn-${{ hashFiles('front/yarn.lock') }}
          restore-keys: |
            yarn-

      - name: Install dependencies 👨🏻‍💻
        working-directory: ${{env.working-directory}}
        run: yarn

      - name: Cypress run
        uses: cypress-io/github-action@v2
        with:
          working-directory: ${{env.working-directory}}
          build: yarn build
          start: yarn vite
          wait-on: 'http://localhost:3000'
          wait-on-timeout: 120
          config-file: cypress.config.js
          record: true
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Solution

I would say the URL used in the intercept is not catching the request from the app.

Locally you have a server running, so axios is ok but on Github the server is absent and the axios call fails.

It looks like you just need to add wildcard characters before the URL fragment

cy.intercept('GET', '**/coaches/coach-informations/30283', {
  data: {
    email: 'hello@hello.com',
  },
}).as('getCoach')

Answered By - Fody

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)