How to run Vue.js app locally & run Cypress tests against it sequentially using npm script - vue.js

I am trying to run a Vue.js app locally (localhost:3000) & then run Cypress tests against it.
Below are some npm scripts in my package.json:
"dev": "nuxt",
"cypress": "npx cypress open",
"localCypress": "npm run dev && npm run cypress"
When I run the above dev & cypress commands on their own, they work as expected.
But when I try to run them both sequentially using localCypress, only the app is starting, & the Cypress Explorer isn't opening (npm run cypress part doesn't seem to be working).
Can someone please point out why this is occurring & how I can resolve it?

The problem is that the npm run dev spins a server and that's a long running process, that won't close until you manually stop it (or if it crashes). In both cases, it will return an exit code different than 0, so the second command after && won't run.
Take a look to this question to see how to run two npm process in parallel:
How can I run multiple npm scripts in parallel?

Related

Not Found Error on localhost:3400 on Github Actions

So I want to build and run my svelte application on Github Actions (and the fastapi backend) and then do cypress tests on them. Running fastapi backend works so far.
The Problem is even when npm logs
Your application is ready~! 🚀
- Local: http://localhost:3400
cypress get's a not found error on cy.visit(). I also tried just waiting on localhost:3400 (for 120 seconds) but this doesn't work either.
In my main.yml looks like this:
- name: Build and run Svelte app
run: |
npm install cypress
cd frontend/app
npm install
npm run build
npm run start &
sleep 120
cd ..
cd ..
npx cypress run
Does anyone has a clue why this happens? Has been very frustrating.
Later I want to auto dockerize and deploy. Should I already go on with this, so maybe it gets easier once it's dockerized?

yarn serve in background

I'm trying to configure gitlab CI/CD for cypress e2e testing on my vue app which uses yarn for package management. cypress documents are all written for npm cypress gitlab ci/cd configuration tutorial
# start the server in the background
- npm run start:ci &
# run Cypress tests
- npx cypress run --browser firefox
is there a way to start server in background for yarn? like running yarn serve but in background.
There is an issue with the command yarn serve&. It will still give you this screen when done compiling:
I found a way to work around this through pm2 and this command
pm2 start yarn --interpreter bash --name api -- start

When I run cypress as npm run cypress run build fails

I have installed cypress using npm as npm install cypress --save-dev .
I used the same command in .gitlab-ci.yml file
When i run the command npm run cypress run locally , IDE opens and when i double click the spec.js file , then the tests run.
But I i use the same command on the gitlab pipeline , it says
cypress open "run"
It looks like this is your first time using Cypress: 4.1.0
[07:45:16] Verifying Cypress can run /osmc/ux/framework-acceptance-tests/cache/Cypress/4.1.0/Cypress [started]
[07:45:18] Verifying Cypress can run /osmc/ux/framework-acceptance-tests/cache/Cypress/4.1.0/Cypress [completed]
Opening Cypress...
and build fails .
Am i missing anything here ?
It's because it's opening the test runner, which is used locally via npx cypress open.
From that output it looks like you're running npx cypress open run, which isn't a real command and will open the runner
In CI you need to use npx cypress run, which will run tests without user interaction. https://docs.cypress.io/guides/guides/command-line.html#How-to-run-commands
Your gitlab.yml file should accomodate for the npm installations.
One example is as below. Meanwhile also please check the test/run command for your specs under package.json file. use the same command to trigger the test in pipeline.
stages:
- test
test:
image: cypress/browsers:node12.14.1-chrome85
stage: test
script:
npm i
npm run start:ci &
npx cypress run
You should have your .gitlab-ci.yml with:
stages:
- test
cypress-test:
image: cypress/browsers:node16.14.0-slim-chrome99-ff97
stage: test
script:
- npm ci
- npx cypress run

How to run `nuxt generate` in the foreground

In my package.json, I have:
...
"scripts": {
"generate": "nuxt generate & npm run css",
...
And run the command via npm run generate, with only one issue -- it seems to run in the background, so if I run it in a bash script with additional commands following the generation, they actually run during the generation. Is there an option to make nuxt generate run in the foreground?
That‘s because you only have one & in script which means the command before will be sent to the background. Try using && between the commands.

IntelliJ stuck after running npm scripts

I have created a Scala, Play project. I am trying to add Angular2 in it. I added two npm commands through edit configuration. They are suppose to install the required packages and use webpack to bundle final JS. I notice that nothing happens after 2nd script is executed (I do not know if that script is hung or there is some other issue (see pic). It seems that the 2nd npm script is stuck because on stopping the run command, I see exit code 1 - Process finished with exit code 1
Is there a way to find out if Intelli build/run process is still running?
The issue was with the 2nd script (npm start). I had to remove --profile --watch flag from the webpack command. This works - "scripts": {
"start": "webpack --config webpack.config.dev.js --progress"
}