08 Cypress Configuration - biswajitsundara/Cypress GitHub Wiki

We can configure cypress settings for our project using the file cypress.json

• If we want to override any configuration property then we need to define it in this file else it will consider the default settings
• If the cypress.json file is blank then we are running our tests with cypress default configuration.
• Go to test runner -> Click on the tab settings-> Expand configuration we can see all the configuration properties

We can specify the base url in cypress.json & in the spec files when we invoke cy.visit() we will pass the page to append.

cypress.json : "baseUrl":"https://google.com"
spec file :cy.visit("/images");
output :It will route to https://google.com/images

We can use environment variables to run our tests with different parameters. There are different approaches how we can define the environment variables, one common approach is to use in cypress.json file

"env": {
    "environment":"qa"
  }

• We can read the value in spec file this way const qaurl=Cypress.env("environment");
• We can change it in run time. node_modules\.bin\cypress run --env environment=qc

This is in milliseconds, cypress will wait until this time for all DOM based commands before throwing time out.

• The cypress default time out is 4 seconds i.e 4000 ms
• We can change it to apply in all our tests. (recommended not to use more than 10 seconds i.e 10000 ms

{
   "defaultCommandTimeout":10000
}

cy.go(), cy.reload() commands fire the page load events and it waits for the time mentioned before throwing time out error.

• The default time out is 60000 ms i.e 60 seconds.
• We can change it to apply in all our tests (recommended not to use more than 2 minutes i.e 120000

 {
    "pageLoadTimeout": 120000
 }

We can explicitly define which are our test files by specifying the name or file pattern.

• By default the setting is "testFiles": "**/*.*"
• Execute files in a particular order, we can specify the file names here and it will follow the sequencing.
• Test files of only specific extension (example ts files) then "testFiles": "**/*.ts"
• Test files from only specific folder (example testcases folder) then "testFiles": "testcases/*.*"

"testFiles": [
        "practice.js",
        "google.js",
        "basictests/*.js",
        "complextests/*.js"
    ] 

• The browser's viewport is the area of the window in which web content can be seen.
• This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content.
• Always make sure to set the view port in your project else you might run into issues.
• The default view port width is 1000 px & height is 660 px;

{
    "viewportWidth":1000
    "viewportHeight":660
}

• Open Test Runner: node_modules\.bin\cypress open --config pageLoadTimeout=30000,baseUrl=https://myapp.com
• Run tests from a specific folder node_modules\.bin\cypress run --config integrationFolder=tests,videoUploadOnPasses=false
• Run tests on a browser with specific height, width node_modules\.bin\cypress run --browser chrome --config viewportWidth=1280,viewportHeight=720

We can modify configurations using Cypress.config()

• Change the base url. Cypress.config('baseUrl', "https://facebook.com");
• Reset the base url. Cypress.config('baseUrl', "");
• Change the page load time out value Cypress.config('pageLoadTimeout', 100000);
• If we change anything using this method then the scope of the change is limited to only the spec file.

• port, reporter, retries
• timeouts
• folders/files
• screenshots
• videos
• browser

Check the complete list in cypress website - https://docs.cypress.io/guides/references/configuration.html#Options

Open the test runner & go to settings tab

https://docs.cypress.io/guides/references/configuration.html#Options
https://docs.cypress.io/guides/guides/environment-variables.html#Setting