How do I pass a Bitbucket repository variable into the Cypress.io test script that I am running with npm run in a pipeline?
The pipeline and tests work, but I am unable to get a Bitbucket variable into the test file iteself. I can access the respository variable from bitbucket-pipeline.yml following the instructions provided by Bitbucket on the repository variable page, but I cannot access the variable inside of cypress/integration/example.js. I want to store credentials the test scripts use as Bitbucket repository variables.
Here's my code...
bitbucket-pipeline.yml
image: cypress/included:3.2.0
pipelines:
custom:
robot:
- step:
script:
- printenv
- npm ci
- npm run e2e
uses an image provided by Cypress
I can see my repository variables via printenv
package.json
{
...
"scripts": {
"e2e": "cypress run"
},
...
"dependencies": {
"cypress": "^9.4.1"
}
}
cypress/integration/example.js
describe('A', () => {
it('should B', () => {
cy.visit('https://google.com');
});
});
I want to use the Bitbucket repository variable inside of the it('should B' ...) method.
Thanks in advance for your help.
I found the Cypress.io documentation on environment variables:
https://docs.cypress.io/guides/guides/environment-variables
bitbucket-pipeline.yml
image: cypress/included:3.2.0
pipelines:
custom:
robot:
- step:
script:
- npm ci
- export CYPRESS_example=$example
- export CYPRESS_whatever=$whatever
- npm run e2e
Where example is the name of the Bitbucket repo variable. Might be case sensitive.
Add $ to reference the Bitbucket repository variable in the bitbucket-pipeline.yml file.
Use CYPRESS_ to identify it as a Cypress environment variable.
https://docs.cypress.io/guides/guides/environment-variables#Option-3-CYPRESS_
Then you can use it in the test spec via Cypress.env("example")
I actually had to typecast because Bitbucket was providing unexpected data types...
cy.get('[name="password"]').clear().type(Cypress.env("example").toString());
You can use the plugin to have a profiles for each deployment and when run the script you can set which env to run the script for example below would work if plugin setup properly inside the pipeline.
npx cypress run --env version="qa"
npx cypress run --env version="prod"
Related
I created a new Vue project via npm init vue#latest and selected Cypress.
Currently there are no tests yet, I have a placeholder test /cypress/e2e/example.cy.ts with
describe("My First Test", () => {
it("visits the app root url", () => {
cy.visit("/");
});
});
I'm using Cypress v11.0.1 and have a script to run the cypress tests inside my Github Actions
"test:e2e:ci": "start-server-and-test preview :4173 'cypress run --e2e'",
This is my Cypress action
- name: Check if e2e tests are passing
uses: cypress-io/github-action#v4
with:
build: npm run build
start: npm run test:e2e:ci
Sometimes ( it occurs very rarely ) the Github workflow fails with
As you can see the test itself passes. I can fix the pipeline by running it again...
Does someone know why this happens and how to avoid this error?
Please let me know if you need more information ( e.g. configuration files )
I created a new Vue project via npm init vue#latest. I used the Vue CLI before and want to get into Vite now. Inside my Github action I used the Vue CLI service commands before but now I'm looking for the equivalent commands using Vite.
Check that the code style is fine (no errors, no warnings)
Inside my workflow I previously used the command
npm run lint -- --no-fix --max-warnings=0
Based on the lint script command
eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore
I added the lint:ci script command
eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --max-warnings 0 --ignore-path .gitignore
Check that unit tests are passing
Inside my workflow I previously used the command
npm run test:unit
Based on the test:unit script command
vitest --environment jsdom
I added the test:unit:ci script command
vitest --environment jsdom --run
Check that e2e tests are passing
Inside my workflow I previously used the command
npm run test:e2e -- --headless
There already is a test:e2e:ci script command and based on the Cypress docs I think I have to use it this way (which worked for me)
- name: Check if e2e tests are passing
uses: cypress-io/github-action#v2
with:
build: npm run build
start: npm run test:e2e:ci
Do you have any better solutions? I'm not sure if this is the most elegant way or if Vue/Vite already provide some commands I don't know about yet.
Thanks in advance!
I have a CI pipeline setup using Github Action/Workflows, where i would want to run Cypress Automated tests, However I am having some logical problems of how to run my dev server. let me show you my pipeline
name: Nuxt CI Pipeline
on:
push:
branches: [ CI-pipeline ]
# pull_request:
# branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [ 14.x ]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout#v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v2
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- name: Make envfile
uses: SpicyPizza/create-envfile#v1
with:
envkey_ENV: staging
file_name: .env
- run: npm ci
- run: npm run dev
- run: |
cd e2e
ls -l
npm ci
npx cypress run
Now I want to spin up the devserver and run the tests on that port usually 3000 , however the problem is when the command npm run dev is executed, the pipeline keeps on waiting there and doesnt move forward , which makes sense as devserver doesn't return a response as other commands will , so its kinda stuck there. My knowledge of devops is bare minimum , can someone point out what am i missing?
I think the way of execution is not ideal, especially since so the node server is also not killed correctly in the end. Using a helper package like start-server-and-test should do the trick for you:
npm install --save-dev start-server-and-test
While I'm not sure what exactly is behind your scripts in your package.json, it could look something like this in the end:
"scripts": {
"start:ci": "<<start your dev server>>",
"cy:run": "cypress run --browser chrome --headless",
"cy:ci": "start-server-and-test start:ci http://localhost:3000 cy:run"
},
Then you can simply run this as a single command in your pipeline with npm run cy:ci. The script will take care of starting your dev server, waiting for the URL to be available, then executing the tests and after all tests are finished, it will shut down the server.
I am using an NPM run task in Azure Devops Pipelines. I would like to pass an Azure Predefined Variable into my package.json.
eg: npm run cypresstask
So that I can then pass this as a parameter for 'cypress run --ci-build-id '
Answering my own question:
NPM Run Task command:
run cypress:ci --azbuildid=$(Build.BuildNumber)
then within package.json you can provide it as
cypress run --ci-build-id $npm_config_azbuildid
So you set params with the --. Provide predefined variables using $() and access them within package.json using $npm_config_
In your package.json file you can write your commands inside scripts:
"scripts": {
"test": "cypress run --ci-build-id"
}
And in your yml file you can just use:
npm test
I'm looking to deploy a VuePress site using a Gitlab CI pipeline. I use some plugins via the method Vue.use().
When I build manually on my machine and deploy to firebase it works fine.
When the pipeline is triggered, it passes without issue, however, in the built files there is no trace of the plugins. In the case of Buefy, no Buefy component is generated in the built files.
Here's my EnhanceApp.js file:
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
export default ({
Vue,
options,
router,
siteData
}) => {
Vue.use(Buefy)
}
And here's my .gitlab-cy.yaml
image: node:10
deploy_production:
stage: deploy
environment: Production
only:
- master
script:
- npm install -g firebase-tools
- npm i
- npm run build
- firebase deploy -m "Pipeline $CI_PIPELINE_ID, build $CI_BUILD_ID" --non-interactive --token $FIREBASE_TOKEN
I tried both Firebase and AppEngine to no avail, as well as multiple docker images.
I'm not familiar with GitLab or firebase, but I suggest that you can try to use Yarn instead of npm. Because currently npm will cause some problems in Vuepress (e.g. make plugin-google-analytics unavailable).