How to integrate cy.visit(local vs stage url) in a CI environment? - testing

Question

I have a test suite that opens a local url before making a bunch of assertions on some DOM elements.
Now I'd like to integrate Cypress in my CI/CD but I'm unsure on how to tell Cypress to visit the staging url instead of the local one.
Any idea?
it('The body of the page is in viewport', function() {
cy.visit(
'http://mylocalurltovisit.local.com.au:8666/foo'
);
let initialPosition;
const body = cy.get('body');
body.should('have.class', 'pdfView');
cy.get('.body-wrapper').should($el => {
initialPosition = $el.position();
expect(initialPosition.top).equal(0);
expect(initialPosition.left).equal(0);
});
});
I'd like for the visit url to automatically switch to say the staging one (which could be http://staging.com.au/foo) on the CI environment.

Answer 1

One way is to try creating the two different url's for local and staging sites as below in the cypress.json file.
{
"env": {
"project1_user": "admin",
"project1_password": "password",
"localSite" : {
"url" : "http://mylocalurltovisit.local.com.au:8666/foo"
},
"stagingSite" : {
"url" : "http://staging.com.au/foo"
}
}
}
Then receive the urls to const inside the test;
const localUrl = Cypress.env('localSite').url;
const stagingUrl = Cypress.env('stagingSite').url;
You can call in beforeEach or use directly inside the test. Same way you can use for staging site a well.
beforeEach( function() {
cy.visit(localUrl + '/somelogin.php' );
} );

Answer 2

Use an environment variable, but instead of putting it in the config file, pass it in the CI command that starts Cypress, e.g
cypress run --env TARGET=local
cypress run --env TARGET=staging
In the test, you can assign the correct url (once only), using a before().
describe('...', () => {
let url;
before(function() {
url = {
local: 'http://...',
staging: 'http://...'
}[Cypress.env('TARGET')];
})