How can cypress be made to work with aurelia with github actions and locally?

Question

Ok, so I added cypress to aurelia during my configuration and it worked fine. When I went to set up cypress on github as just a command, I could not get it to recognize puppeteer as a browser. So instead I went and used the official github actions for cypress, and that works

      - name: test
        uses: cypress-io/github-action@v1
        with:
          start: yarn start
          browser: ${{matrix.browser}}
          record: true
        env:
          # pass the Dashboard record key as an environment variable
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

however I had to set my cypress.json as follows

{
  "baseUrl": "http://localhost:8080",
  "fixturesFolder": "test/e2e/fixtures",
  "integrationFolder": "test/e2e/integration",
  "pluginsFile": "test/e2e/plugins/index.js",
  "screenshotsFolder": "test/e2e/screenshots",
  "supportFile": "test/e2e/support/index.js",
  "videosFolder": "test/e2e/videos",
  "projectId": "..."
}

and now running yarn e2e doesn't work because there's no server stood up, as it's not doing it itself anymore via cypress.config.js

const CLIOptions =  require( 'aurelia-cli').CLIOptions;
const aureliaConfig = require('./aurelia_project/aurelia.json');
const PORT = CLIOptions.getFlagValue('port') || aureliaConfig.platform.port;
const HOST = CLIOptions.getFlagValue('host') || aureliaConfig.platform.host;

module.exports = {
  config: {
    baseUrl: `http://${HOST}:${PORT}`,
    fixturesFolder: 'test/e2e/fixtures',
    integrationFolder: 'test/e2e/integration',
    pluginsFile: 'test/e2e/plugins/index.js',
    screenshotsFolder: 'test/e2e/screenshots',
    supportFile: 'test/e2e/support/index.js',
    videosFolder: 'test/e2e/videos'
  }
};

how can I make it so that yarn e2e works as it previously did, and have it working on github?(I don't care which side of the equation is changed)

here's yarn e2e not sure what the au is doing under the hood.

    "e2e": "au cypress",

The actions connected to the "au" command are defined in the aurelia_project/tasks folder by default. Next, we run the following command to start all: `yarn cypress run` — MRoeling, Feb 18 '20 at 15:36
To finish my comment: Since we use typescript, we added the webpack-preprocessor as plugin to cypress, as described [here](https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/preprocessors__typescript-webpack) — MRoeling, Feb 18 '20 at 15:44

score 4 · Accepted Answer · answered Feb 21 '20 at 04:54

Easiest way to achieve this, create a test/e2e/cypress-config.json

{
  "baseUrl": "http://localhost:8080",
  "fixturesFolder": "test/e2e/fixtures",
  "integrationFolder": "test/e2e/integration",
  "pluginsFile": "test/e2e/plugins/index.js",
  "screenshotsFolder": "test/e2e/screenshots",
  "supportFile": "test/e2e/support/index.js",
  "videosFolder": "test/e2e/videos",
  "projectId": "1234"
}

, and then setup the github action like this.

      - name: test
        uses: cypress-io/github-action@v1
        with:
          config-file: tests/e2e/cypress-config.json
          start: yarn start
          browser: ${{matrix.browser}}
          record: true
        env:
          # pass the Dashboard record key as an environment variable
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

the path doesn't matter, just that you configure the same one. Just make sure it doesn't overlap with what aurelia wants.

How can cypress be made to work with aurelia with github actions and locally?

1 Answers1