{"id":10809,"date":"2025-05-12T15:30:00","date_gmt":"2025-05-12T15:30:00","guid":{"rendered":"https:\/\/testgrid.io\/blog\/?p=10809"},"modified":"2025-10-15T15:45:03","modified_gmt":"2025-10-15T15:45:03","slug":"how-to-run-cypress-tests-in-headless-mode","status":"publish","type":"post","link":"https:\/\/testgrid.io\/blog\/how-to-run-cypress-tests-in-headless-mode\/","title":{"rendered":"How to Run Cypress Tests in Headless Mode"},"content":{"rendered":"\n

Cypress is a powerful open-source end-to-end testing framework designed for web applications. It simplifies the process of writing and executing tests, providing developers with a robust tool for ensuring the quality and reliability of their web applications.<\/p>\n\n\n\n

Running Cypress tests in headless mode means executing the tests without displaying the graphical user interface of the browser. This can be useful in certain scenarios, such as when running tests in a continuous integration (CI) environment or when you want to perform tests without the visual distraction of the browser window.<\/p>\n\n\n\n

How to Setup Cypress Headless<\/h2>\n\n\n\n

Setting up Cypress to run tests in headless mode involves a few steps. Ensure that Node.js and npm (Node Package Manager) are installed on your machine. If not, you can download and install them from the official Node.js website<\/a>. <\/p>\n\n\n\n

Below is a general guide on how to set up Cypress in headless mode:<\/p>\n\n\n\n

    \n
  1. Initiate the Project<\/strong><\/li>\n<\/ol>\n\n\n\n

    Create a folder in your system and open it using any JavaScript-enabled IDE. E.g.. VS Code, IntelliJ, Eclipse, etc. Then initiate the project by using the command below:<\/p>\n\n\n\n

    npm init command<\/strong><\/em><\/p>\n\n\n\n

    It will create a package.json file in the project directory. <\/p>\n\n\n\n

      \n
    1. Install Cypress<\/strong><\/li>\n<\/ol>\n\n\n\n

      Once you have your project folder created, navigate to your project directory in the terminal and run the following command to install Cypress:<\/p>\n\n\n\n

      npm install cypress –save-dev<\/em><\/p>\n\n\n\n

        \n
      1. Open Cypress<\/strong><\/li>\n<\/ol>\n\n\n\n

        After the installation is complete, open Cypress for the first time to set up the initial project structure. Run the following command:<\/p>\n\n\n\n

        npx cypress open<\/p>\n\n\n\n

        This command opens the Cypress Test Runner<\/p>\n\n\n\n

        \"cypress<\/figure>\n\n\n\n

        Here, we will select the Testing type. For end-to-end testing<\/a>, select the E2E testing option, and for testing individual components or units of a web application, select component testing. Here in this example, we have selected E2E testing.<\/p>\n\n\n\n

        \"cypress<\/figure>\n\n\n\n

        On pressing continue, Cypress will create a \u2018cypress\u2019 directory with default files. After selecting your preferred browser, the browser will be opened automatically.<\/p>\n\n\n\n

        4. Create your first specs<\/p>\n\n\n\n

        In the opened browser, select the option whether you want a few already created example specs or want to start with a new blank specs file.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        On selecting the Create new spec option, a new spec file will automatically be generated in the \u2018e2e\u2019 subdirectory of the \u2018cypress\u2019 directory. Now the project structure will look like this:<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        5. Configure Headless Mode<\/strong><\/p>\n\n\n\n

        By default, Cypress runs tests in headless mode during the command line execution (cypress run headless). If you want to customize headless options, you can update your npm scripts in package.json. <\/p>\n\n\n\n

        For example:<\/p>\n\n\n\n

        {\n  \"name\": \"cypress-headless\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"cypress run --headless\"\n  },\n  \"author\": \"Arjun Shrivastva\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"cypress\": \"^13.6.0\"\n  }\n}\n<\/code><\/pre>\n\n\n\n
        This script will run Cypress tests in headless mode when you execute npm run test<\/em>.<\/strong><\/p>\n\n\n\n
        6. Customize Headless Options<\/p>\n\n\n\n
        You can customize headless options by adding additional flags to the cypress run command. For example, to run tests in Cypress headless Chrome, you can use:<\/p>\n\n\n\n
        npm run test –browser chrome<\/em><\/p>\n\n\n\n
        Example for Testing with Cypress in Headless Mode<\/h2>\n\n\n\n
        For example, you will log in to a Demo Website, and after that, we will verify that the login is successful.<\/p>\n\n\n\n
        Test Steps<\/h2>\n\n\n\n
          \n
        1. Navigate to the URL.(https:\/\/demo.guru99.com\/test\/login.html<\/a>)<\/li>\n\n\n\n
        2. Fill in the \u2018Email address\u2019 field<\/li>\n\n\n\n
        3. Fill in the \u2018Password\u2019 field<\/li>\n\n\n\n
        4. Click the \u2018Sign in\u2019 Button<\/li>\n\n\n\n
        5. Verify Login is successful.<\/li>\n<\/ol>\n\n\n\n
          Test Script<\/p>\n\n\n\n
          describe('Login', () => {\n  it('Log in successful', () => {\n    cy.visit('https:\/\/demo.guru99.com\/test\/login.html')\n    cy.get('#email').click().type('test@test.com')\n    cy.get('#passwd').click().type('test')\n    cy.get('#SubmitLogin').click()\n    cy.get('.error-copy').should('be.visible')\n  })\n})\n<\/code><\/pre>\n\n\n\n
          To execute the test script, just run the command below:<\/p>\n\n\n\n
          npm run test<\/strong><\/p>\n\n\n\n
          Test Result<\/strong><\/p>\n\n\n\n
          After the execution, you can see the test result in the terminal.<\/p>\n\n\n\n
          \"cypress<\/figure>\n\n\n\n
          Advantages of Cypress Headless<\/h1>\n\n\n\n
          Cypress headless mode, where tests run without a visible browser, provides several key advantages in the realm of automated testing:<\/p>\n\n\n\n
          1. Resource Optimization<\/strong><\/p>\n\n\n\n
          Headless browsers consume far fewer computational resources than their headed counterparts. This means:<\/p>\n\n\n\n
            \n
          • Reduced memory and CPU usage on your testing machine.<\/li>\n\n\n\n
          • Potential to run more tests in parallel, further increasing efficiency.<\/li>\n<\/ul>\n\n\n\n
            2. Parallel Execution for Speed<\/strong><\/p>\n\n\n\n
            Headless mode supports parallel test execution, enabling multiple tests to run simultaneously without the overhead of managing visible browser windows. This results in significant time savings and improved overall test suite performance.<\/p>\n\n\n\n
            3. Reduced Flakiness:<\/strong> <\/p>\n\n\n\n
            Some test failures in headed mode might result from inconsistencies in browser rendering or other visual factors. Headless execution can help minimize these, focusing on functionality rather than rendering quirks.<\/p>\n\n\n\n
            4. Consistent Testing Environment<\/strong><\/p>\n\n\n\n
            Headless mode ensures a consistent testing environment by eliminating variations related to browser window sizes and visibility. This consistency enhances the reliability and predictability of test results across different runs and environments.<\/p>\n\n\n\n
            5. Seamless Integration with CI\/CD Tools:<\/strong><\/p>\n\n\n\n
            Cypress headless mode seamlessly integrates with popular CI\/CD tools such as Jenkins, Travis CI, and GitLab CI. This allows for the automatic triggering and execution of tests as an integral part of the development and deployment workflows.<\/p>\n\n\n\n
            Conclusion<\/h1>\n\n\n\n
            In conclusion, running Cypress tests in headless mode is a strategic choice for modern software development. The efficiency gains in CI\/CD pipelines, resource optimization, and seamless integration with development workflows make it a compelling approach. Headless mode not only accelerates test execution but also ensures a consistent testing environment, fostering reliability and scalability. As teams strive for faster, more automated testing practices, Cypress headless mode stands out as a valuable tool, facilitating agile development and enhancing the overall quality of software products.<\/p>\n","protected":false},"excerpt":{"rendered":"
            Cypress is a powerful open-source end-to-end testing framework designed for web applications. It simplifies the process of writing and executing tests, providing developers with a robust tool for ensuring the quality and reliability of their web applications. Running Cypress tests in headless mode means executing the tests without displaying the graphical user interface of the […]<\/p>\n","protected":false},"author":10,"featured_media":11516,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[209],"tags":[],"class_list":["post-10809","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-test-automation"],"acf":[],"images":{"medium":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/02\/How-to-Run-Cypress-Tests-in-Headless-Mode.jpg","large":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/02\/How-to-Run-Cypress-Tests-in-Headless-Mode.jpg"},"_links":{"self":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/10809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/comments?post=10809"}],"version-history":[{"count":5,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/10809\/revisions"}],"predecessor-version":[{"id":15559,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/10809\/revisions\/15559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media\/11516"}],"wp:attachment":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media?parent=10809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/categories?post=10809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/tags?post=10809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}