Cypress Headless Mode Tutorial (with Best Practices)

Cypress make end-to-end test efficient and reliable, and its headless mode let tests to run without a graphical interface. This hurry up execution, simplifies CI/CD desegregation, and ensures smoother debugging. This clause explains how to run Cypress in headless mode, debug effectively, and postdate good drill for reliable results.

This clause provides a complete guidebook to lead Cypress in headless modality, include setup, execution commands, debug proficiency, CI/CD integrating, and best practices.

What is the Headless Mode in Cypress?

The headless mode in is a way of execute a test instance. When we run a exam suit in Cypress, if the test case gets executed without any UI (User Interface), then it is called headless mode. Let ’ s discuss farther setting it up and running Cypress in headless mode.

Setting up Cypress in Headless Mode:

Once you experience, you will launch it with the command “ npx cypress open ”. In that way, you will get a UI, from which you can execute one-by-one test instance. But once the script is compose, we may require to execute it instantly from the command line interface.

To accomplish the script straight away from the bidding line, we need to run the bidding below,

npx cypress run –spec & lt; path_of_script_to_be_executed & gt;

By default, Cypress executes the in headless fashion. But, we can likewise set it explicitly by mentioning “ & # 8211; headless ” like below,

npx cypress run –headless –spec & lt; path_of_script_to_be_executed & gt;

Running Cypress tests in Headless Mode

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Now let ’ s try to execute a test case in headless mode from Cypress. For this activity, we will have a handwriting that will open the BrowserStack site and do assertions in the home page heading,

describe ('template spec ', () = & gt; {it ('passes ', () = & gt; {//Visiting the browserstack website cy.visit ('https: //browserstack.com ') //Making text assertion in browserstack domicile page lead cy.get ('h1 ') .should ('have.text ', 'App & amp; Browser Testing Made Easy ')})})

• The above script is save with the name headlessMode.cy.js.
• As mentioned before, by default, when we execute the book from the command line, it will be executed in headless mode.

We can also explicitly mention the below bid.

npx cypress run –headless –spec cypress/e2e/headlessMode.cy.js

Debugging in Headless Mode

When we execute the test script in headless way, we can see the execution status over the command prompting or terminal.

Also, we can view the video of the execution under the Cypress/Video booklet.

Whenever a test example fails while executing in headless mode, Cypress will direct a screenshot and store it under the screenshots folder.

Let ’ s try to do our test script fail by modifying the averment text with some early value.

describe ('template specification ', () = & gt; {it ('passes ', () = & gt; {//Visiting the browserstack website cy.visit ('https: //browserstack.com ') //Making text assertion in browserstack home page heading cy.get ('h1 ') .should ('have.text ', 'App & amp; Browser Testing Made Very Easy ')})})

You will notice that the above script will betray during the assertion step and will occupy a screenshot of that page along with the video.

Taking Screenshots in Headless Mode

Sometimes, in a test case, we may need to guide screenshots of a exceptional screen while executing the spec file. For that, we can use thecy.screenshot() dictation to take a screenshot. This bid can be used for both the headless and headed mode.

Please advert below code to occupy screenshots while executing the test specification,

describe ('template spec ', () = & gt; {it ('passes ', () = & gt; {//Visiting the browserstack website cy.visit ('https: //browserstack.com ') //Making text assertion in browserstack home page lead cy.get ('h1 ') .should ('have.text ', 'App & amp; Browser Testing Made Easy ') //Takes screenshot after executing above pace cy.screenshot ()})})

Cypress Headless Mode and CI/CD integration

Executing Cypress in headless mode is similar to escape from the terminal. Also, you can pass the bid inside package.json file to execute the script straight.

For example, let ’ s execute our script headlessMode.cy.js. We necessitate to add the following part of block inside the package.json file as mentioned below,

`` scripts '': {'' cy: headless '': '' cypress run -- headless -- spec cypress/e2e/headlessMode.cy.js ''}

Save that package.json file and execute the below command to activate the specified playscript inside the package.json file from the terminal,

npm run cy: headless

Once you execute the above command, you will notice that Cypress will execute the specified specification file in headless way. This change can be pushed into the CI/CD surroundings, and that handwriting can be executed directly from CI/CD.

Best Practices for Cypress Headless Mode Testing

By default, Cypress deletes screenshots and videos before executing a. Sometimes we may need to view the screenshots or videos of the previously executed test event. In that case, we may need to add a parameter & # 8211;trashAssetsBeforeRunsinside thecypress.config.jsfile as below,

const {defineConfig} = require (`` cypress ''); module.exports = defineConfig ({e2e: {setupNodeEvents (on, config) {// implement node event listeners here}, trashAssetsBeforeRuns: false},});

By making trashAssetsBeforeRunsmistaken, we ask Cypress not to erase the substance of the video and screenshot folder. This will help us clearly debug the failed test cause while executing in headless mode.

Talk to an Expert

Troubleshooting Headless Mode Errors

While fulfil a test case in headless mode, Cypress will conduct a screenshot when it fails. We can determine the accurate reason for that failed spec file with that screenshot. Also, it records picture by default, giving us a clear ikon of why the tryout case neglect.

Conclusion

Using Cypress in headless mode can importantly speed up your testing process and make it more effective. However, certain best practices should be followed to ensure that your trial run swimmingly and deliver accurate results.

By properly configure your Cypress environment, leveraging custom bidding, and apply effectual examination strategies, you can assure that your trial provide worthful feedback and help improve the caliber of your web coating.

Cypress is an emerging examination framework and can test it across multiple devices. Browserstack provide you with a robust infrastructure to access:

Related Guides