Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Github actions too slow. #127

Closed
alessandroAmedei opened this issue Apr 26, 2020 · 7 comments
Closed

Github actions too slow. #127

alessandroAmedei opened this issue Apr 26, 2020 · 7 comments

Comments

@alessandroAmedei
Copy link

alessandroAmedei commented Apr 26, 2020 •
edited
Loading

The problem is that the action on Github is too slow, because npm ci it has to install Cypress modules which takes several minutes.
This is my configuration of the action

on: [push]
jobs:
 cypress-run:
   runs-on: windows-latest
   steps:
     - name: Checkout
       uses: actions/checkout@v1

     - name: Cypress run
       uses: cypress-io/github-action@v1
       with:
         build: npm ci
         run: npm run build --if-present
         start: npm run serve --prefix frontend
         wait-on: http://localhost:8080
         serve: npm test_cypress

Another problem that i have is that npm run serve, is running actually a vue service with vue-cli-service which it can not be found.
The project is like this structured:
-cypress
-backend
-frontend
--package.json --> here i have defined "start": "vue-cli-service serve"
-package.json

that's the frontend/package.json

    "name": "**",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "test:unit": "vue-cli-service test:unit",
        "test:e2e": "vue-cli-service test:e2e",
        "lint": "vue-cli-service lint"
    },
    "dependencies": {
        "@capacitor/android": "^2.0.1",
        "@capacitor/cli": "^2.0.1",
        "@capacitor/core": "^2.0.1",
        "@chenfengyuan/vue-qrcode": "^1.0.2",
        "axios": "^0.19.2",
        "core-js": "^3.6.4",
        "dateformat": "^3.0.3",
        "leaflet": "^1.6.0",
        "material-design-icons-iconfont": "^5.0.1",
        "register-service-worker": "^1.6.2",
        "vue": "^2.6.11",
        "vue-router": "^3.1.5",
        "vue2-leaflet": "^2.5.2",
        "vuetify": "^2.2.11",
        "vuex": "^3.1.3"
    },
    "devDependencies": {
        "@vue/cli-plugin-babel": "~4.2.0",
        "@vue/cli-plugin-e2e-cypress": "~4.2.0",
        "@vue/cli-plugin-eslint": "~4.2.0",
        "@vue/cli-plugin-pwa": "~4.2.0",
        "@vue/cli-plugin-router": "~4.2.0",
        "@vue/cli-plugin-unit-jest": "~4.2.0",
        "@vue/cli-plugin-vuex": "~4.2.0",
        "@vue/cli-service": "~4.2.0",
        "@vue/test-utils": "1.0.0-beta.31",
        "babel-eslint": "^10.0.3",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^6.1.2",
        "sass": "^1.19.0",
        "sass-loader": "^8.0.0",
        "vue-cli-plugin-vuetify": "~2.0.5",
        "vue-template-compiler": "^2.6.11",
        "vuetify-loader": "^1.3.0"
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": {},
        "overrides": [
            {
                "files": [
                    "**/__tests__/*.{j,t}s?(x)",
                    "**/tests/unit/**/*.spec.{j,t}s?(x)"
                ],
                "env": {
                    "jest": true
                }
            }
        ]
    },
    "browserslist": [
        "> 1%",
        "last 2 versions"
    ],
    "jest": {
        "preset": "@vue/cli-plugin-unit-jest"
    }
}

this is the /package.json

{
    "name": "**",
    "version": "1.0.1",
    "description": "**",
    "main": "backend/index.js",
    "scripts": {
        "start": "node backend/index.js",
        "test": "mocha backend/test --recursive --exit",
        "dev": "nodemon backend/index.js",
        "test_cypress": "cypress run --record --key 16f8412b-c1f7-4e24-926d-8fb241c059cc"
    },
    "author": "[email protected]",
    "license": "ISC",
    "dependencies": {
        "bcryptjs": "^2.4.3",
        "chai-http": "^4.3.0",
        "dateformat": "^3.0.3",
        "express": "^4.17.1",
        "express-mung": "^0.5.1",
        "jsonwebtoken": "^8.5.1",
        "leaflet": "^1.6.0",
        "mongoose": "^5.9.7",
        "nodemailer": "^6.4.6",
        "nodemon": "^2.0.3",
        "serve-static": "^1.14.1",
        "vue2-leaflet": "^2.5.2",
        "web-push": "^3.4.3"
    },
    "devDependencies": {
        "chai": "^4.2.0",
        "cypress": "^4.4.1",
        "mocha": "^7.1.1",
        "mockgoose": "^8.0.4",
        "supertest": "^4.0.2"
    }
}
@bahmutov
Copy link
Contributor

bahmutov commented Apr 26, 2020 via email

@alessandroAmedei
Copy link
Author

You don’t need to run “npm ci” - the GitHub action already runs it for you by default. It also caches the node modules and cypress binary folder so it should not spend more than a few seconds to restore previous cache and do npm ci
…
Sent from my iPhone
On Apr 25, 2020, at 21:22, alessandroAmedei @.> wrote:  The problem is that the action on Github is too slow, because npm ci it has to install Cypress modules which takes several minutes. This is my configuration of the action name: End-to-end tests on: [push] jobs: cypress-run: runs-on: windows-latest steps: - name: Checkout uses: ***@***.*** - name: Cypress run uses: ***@***.*** with: build: npm ci run: npm run build --if-present start: npm run serve --prefix frontend wait-on: http://localhost:8080 serve: npm test_cypress Another problem that i have is that npm run serve, is running actually a vue service with vue-cli-service which it can not be found. The project is like this structured: -cypress -backend -frontend --package.json --> here i have defined "start": "vue-cli-service serve" -package.json that's the frontend/package.json { "name": "", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", "lint": "vue-cli-service lint" }, "dependencies": { @./android": "^2.0.1", @./cli": "^2.0.1", @./core": "^2.0.1", @./vue-qrcode": "^1.0.2", "axios": "^0.19.2", "core-js": "^3.6.4", "dateformat": "^3.0.3", "leaflet": "^1.6.0", "material-design-icons-iconfont": "^5.0.1", "register-service-worker": "^1.6.2", "vue": "^2.6.11", "vue-router": "^3.1.5", "vue2-leaflet": "^2.5.2", "vuetify": "^2.2.11", "vuex": "^3.1.3" }, "devDependencies": { @./cli-plugin-babel": "~4.2.0", @./cli-plugin-e2e-cypress": "~4.2.0", @./cli-plugin-eslint": "~4.2.0", @./cli-plugin-pwa": "~4.2.0", @./cli-plugin-router": "~4.2.0", @./cli-plugin-unit-jest": "~4.2.0", @./cli-plugin-vuex": "~4.2.0", @./cli-service": "~4.2.0", @./test-utils": "1.0.0-beta.31", "babel-eslint": "^10.0.3", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.1.2", "sass": "^1.19.0", "sass-loader": "^8.0.0", "vue-cli-plugin-vuetify": "~2.0.5", "vue-template-compiler": "^2.6.11", "vuetify-loader": "^1.3.0" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {}, "overrides": [ { "files": [ "/tests/.{j,t}s?(x)", "/tests/unit//.spec.{j,t}s?(x)" ], "env": { "jest": true } } ] }, "browserslist": [ "> 1%", "last 2 versions" ], "jest": { "preset": @./cli-plugin-unit-jest" } } this is the /package.json { "name": "", "version": "1.0.1", "description": "", "main": "backend/index.js", "scripts": { "start": "node backend/index.js", "test": "mocha backend/test --recursive --exit", "dev": "nodemon backend/index.js", "test_cypress": "cypress run --record --key 16f8412b-c1f7-4e24-926d-8fb241c059cc" }, "author": @.", "license": "ISC", "dependencies": { "bcryptjs": "^2.4.3", "chai-http": "^4.3.0", "dateformat": "^3.0.3", "express": "^4.17.1", "express-mung": "^0.5.1", "jsonwebtoken": "^8.5.1", "leaflet": "^1.6.0", "mongoose": "^5.9.7", "nodemailer": "^6.4.6", "nodemon": "^2.0.3", "serve-static": "^1.14.1", "vue2-leaflet": "^2.5.2", "web-push": "^3.4.3" }, "devDependencies": { "chai": "^4.2.0", "cypress": "^4.4.1", "mocha": "^7.1.1", "mockgoose": "^8.0.4", "supertest": "^4.0.2" } } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

Thank you!
The fact is this, i am able to run cypress tests with cypress run --record --key *** on my machine, and if i do this after a commit, cypress dashbord commit the status of the test on my github dashboard. I would like to do this automaticly on the Github actions CI. So when i commit and push a change on the master branch, it starts a series of tests (also Mocha unit tests) and Cypress.
But, as i understood, to run Cypress tests on github actions you need to run a http server (and i would like to use vue serve command).
Now the problem is this, when i run on github actions vue-cli-service serve it says that is not a valid command. Does github action install everything that i have in the two package.json?

@alessandroAmedei
Copy link
Author

Or, i could use vue-cli-service test:e2e, that run the development serve and runs cypress tests, but i get the same error about vue-cli-service.

@alessandroAmedei
Copy link
Author

I know it is a really bad idea, but I tried like this, i commited also node_modules for the frontend vue app, and it works! I can run with the vue-cli-service the http dev server.
Problem: After waiting on localhost:8000 (until the server is running), it should run npm run test_cypress which should do cypress run --record --key ****-******-*****-... but it is not! Anyway it s running a normal cypress test (without the dashboard). How is this possible?

@alessandroAmedei
Copy link
Author

Sorry for the many comments, i have found a solution. I still have some doubts about it, i think the README is not explaing it really well.
Actually there is not need to run any cypress run --record --key *** command, the console is doing it self after the wait-on command.
To trigger the dashboard command, you need to pass record: true , and the key as env variable.

This is my final github actions configuration file:

name: End-to-end tests
on: [push]
jobs:
  cypress-run:
    runs-on: windows-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1

      - name: Cypress run
        uses: cypress-io/github-action@v1
        with:
          record: true
          start: npm run serve --prefix frontend/nix-app
          wait-on: http://localhost:8080
        env:
          # pass the Dashboard record key as an environment variable
          CYPRESS_RECORD_KEY: ***-*****-******

About installing cypress, github actions says Cache not found for input keys cypress_win32_x64, and it downloads it, taking some minutes.
WhatsApp Image 2020-04-26 at 16 30 30 (4)
WhatsApp Image 2020-04-26 at 16 30 30 (3)
WhatsApp Image 2020-04-26 at 16 30 30 (2)
WhatsApp Image 2020-04-26 at 16 30 30 (1)

@alessandroAmedei
Copy link
Author

Opened a new issue #128

@felippepuhle
Copy link

Is there a way we can improve yarn performance running this action on windows? It's taking more than 5mins just to download cypress, cypress-file-upload and typescript... it's much faster on linux, about 20s

I tried to cache the node_modules folder instead of using the default cache strategy, but sometimes it complains about the binary...

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@bahmutov @felippepuhle @alessandroAmedei