{
  "doc": {
    "id": "app/get-started/open-the-app",
    "title": "Open the Cypress app: Step-by-Step Guide",
    "description": "Open the app in Cypress to visually see, review, and debug end-to-end and component tests.",
    "section": "app",
    "source_path": "/llm/markdown/app/get-started/open-the-app.md",
    "version": "a8fd16711bdda4c7b5645b9717e588ae99ec2470",
    "updated_at": "2026-05-18T17:21:32.047Z",
    "headings": [
      {
        "id": "app/get-started/open-the-app#open-the-app",
        "text": "Open the App",
        "level": 1
      },
      {
        "id": "app/get-started/open-the-app#what-youll-learn",
        "text": "What you'll learn",
        "level": 5
      },
      {
        "id": "app/get-started/open-the-app#cypress-open",
        "text": "cypress open",
        "level": 2
      },
      {
        "id": "app/get-started/open-the-app#adding-npm-scripts",
        "text": "Adding npm Scripts",
        "level": 3
      },
      {
        "id": "app/get-started/open-the-app#cli-tools",
        "text": "CLI tools",
        "level": 3
      },
      {
        "id": "app/get-started/open-the-app#the-launchpad",
        "text": "The Launchpad",
        "level": 2
      },
      {
        "id": "app/get-started/open-the-app#choosing-a-testing-type",
        "text": "Choosing a Testing Type",
        "level": 3
      },
      {
        "id": "app/get-started/open-the-app#quick-configuration",
        "text": "Quick Configuration",
        "level": 3
      },
      {
        "id": "app/get-started/open-the-app#launching-a-browser",
        "text": "Launching a Browser",
        "level": 3
      },
      {
        "id": "app/get-started/open-the-app#next-steps",
        "text": "Next Steps",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "id": "app/get-started/open-the-app#what-youll-learn",
      "doc_id": "app/get-started/open-the-app",
      "heading": "What you'll learn",
      "heading_level": 5,
      "content_markdown": "##### What you'll learn\n\n*   How to open the Cypress app\n*   How to add npm scripts for opening Cypress\n*   How to choose a testing type, set up configuration, and launch a browser in Cypress\n",
      "section": "app",
      "anchors": [
        "what-youll-learn"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 48
    },
    {
      "id": "app/get-started/open-the-app#cypress-open",
      "doc_id": "app/get-started/open-the-app",
      "heading": "cypress open",
      "heading_level": 2,
      "content_markdown": "## `cypress open`\n\nYou can open Cypress from your **project root** using one of the following commands, depending on the package manager (npm, Yarn or pnpm) you are using:\n\n*   npm\n*   yarn\n*   pnpm\n\n```\nnpx cypress open\n```\n\n```\nyarn cypress open\n```\n\n```\npnpm cypress open\n```\n\nAfter a moment, the Cypress Launchpad will open.\n\n### Adding npm Scripts\n\nWhile there's nothing wrong with writing out the full path to the Cypress executable each time, it's much easier and clearer to add Cypress commands to the `scripts` field in your `package.json` file.\n\n```\n{  \"scripts\": {    \"cy:open\": \"cypress open\"  }}\n```\n\nNow you can invoke the command from your project root like so:\n\n```\nnpm run cy:open\n```\n\n...and Cypress will open right up for you.\n\n**Best Practice**\n\nDon't use `cypress` as the exact name of a script, especially if you use Yarn as package manager. When running commands on the Cypress binary (e.g. `yarn cypress verify`), Yarn will reference the script of the same name instead and [Cypress CLI commands](/llm/markdown/app/references/command-line.md) may not work as expected. Use instead a descriptive and non-ambiguous script name such as `cy:open` or `cy:run`.\n\n### CLI tools\n\nBy installing Cypress through `npm` you also get access to many other CLI commands. On top of that, Cypress is also a fully baked JavaScript library you can import into your Node scripts.\n\nYou can [read more about the CLI here](/llm/markdown/app/references/command-line.md).\n",
      "section": "app",
      "anchors": [
        "cypress-open"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 315
    },
    {
      "id": "app/get-started/open-the-app#adding-npm-scripts",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Adding npm Scripts",
      "heading_level": 3,
      "content_markdown": "### Adding npm Scripts\n\nWhile there's nothing wrong with writing out the full path to the Cypress executable each time, it's much easier and clearer to add Cypress commands to the `scripts` field in your `package.json` file.\n\n```\n{  \"scripts\": {    \"cy:open\": \"cypress open\"  }}\n```\n\nNow you can invoke the command from your project root like so:\n\n```\nnpm run cy:open\n```\n\n...and Cypress will open right up for you.\n\n**Best Practice**\n\nDon't use `cypress` as the exact name of a script, especially if you use Yarn as package manager. When running commands on the Cypress binary (e.g. `yarn cypress verify`), Yarn will reference the script of the same name instead and [Cypress CLI commands](/llm/markdown/app/references/command-line.md) may not work as expected. Use instead a descriptive and non-ambiguous script name such as `cy:open` or `cy:run`.\n",
      "section": "app",
      "anchors": [
        "adding-npm-scripts"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 179
    },
    {
      "id": "app/get-started/open-the-app#cli-tools",
      "doc_id": "app/get-started/open-the-app",
      "heading": "CLI tools",
      "heading_level": 3,
      "content_markdown": "### CLI tools\n\nBy installing Cypress through `npm` you also get access to many other CLI commands. On top of that, Cypress is also a fully baked JavaScript library you can import into your Node scripts.\n\nYou can [read more about the CLI here](/llm/markdown/app/references/command-line.md).\n",
      "section": "app",
      "anchors": [
        "cli-tools"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 59
    },
    {
      "id": "app/get-started/open-the-app#the-launchpad",
      "doc_id": "app/get-started/open-the-app",
      "heading": "The Launchpad",
      "heading_level": 2,
      "content_markdown": "## The Launchpad\n\nOn opening Cypress, your testing journey begins with the Launchpad. Its job is to guide you through the decisions and configuration tasks you need to complete before you start writing your first test.\n\nIf this is your first time using Cypress it will take you through the following steps in order.\n\n### Choosing a Testing Type\n\nThe Launchpad presents you with your biggest decision first: What type of testing shall I do? [E2E Testing](/llm/markdown/app/core-concepts/testing-types.md#What-is-E2E-Testing), where I run my whole application and visit pages to test them? Or [Component Testing](/llm/markdown/app/core-concepts/testing-types.md#What-is-Component-Testing), where I mount individual components of my app and test them in isolation?\n\nFor more background on this critical decision, read [Testing Types](/llm/markdown/app/core-concepts/testing-types.md). Alternatively, if you're not sure which type you want and just want to get on with your testing journey, just choose **E2E** for now - you can always change this later!\n\n### Quick Configuration\n\nOn the next step, the Launchpad will scaffold out a set of configuration files appropriate to your chosen testing type, and the changes will be listed for you to review. For more information about the generated config check out the [Cypress configuration reference](/llm/markdown/app/references/configuration.md), or you can just scroll down and hit \"Continue\".\n\n### Launching a Browser\n\nLastly, you're presented with the list of compatible browsers Cypress found on your system. To understand more about your options here, see [our guide on launching browsers](/llm/markdown/app/references/launching-browsers.md). Again, don't sweat it, you can switch browsers whenever you want. Now **MASH THAT START BUTTON!**\n",
      "section": "app",
      "anchors": [
        "the-launchpad"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 331
    },
    {
      "id": "app/get-started/open-the-app#choosing-a-testing-type",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Choosing a Testing Type",
      "heading_level": 3,
      "content_markdown": "### Choosing a Testing Type\n\nThe Launchpad presents you with your biggest decision first: What type of testing shall I do? [E2E Testing](/llm/markdown/app/core-concepts/testing-types.md#What-is-E2E-Testing), where I run my whole application and visit pages to test them? Or [Component Testing](/llm/markdown/app/core-concepts/testing-types.md#What-is-Component-Testing), where I mount individual components of my app and test them in isolation?\n\nFor more background on this critical decision, read [Testing Types](/llm/markdown/app/core-concepts/testing-types.md). Alternatively, if you're not sure which type you want and just want to get on with your testing journey, just choose **E2E** for now - you can always change this later!\n",
      "section": "app",
      "anchors": [
        "choosing-a-testing-type"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 123
    },
    {
      "id": "app/get-started/open-the-app#quick-configuration",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Quick Configuration",
      "heading_level": 3,
      "content_markdown": "### Quick Configuration\n\nOn the next step, the Launchpad will scaffold out a set of configuration files appropriate to your chosen testing type, and the changes will be listed for you to review. For more information about the generated config check out the [Cypress configuration reference](/llm/markdown/app/references/configuration.md), or you can just scroll down and hit \"Continue\".\n",
      "section": "app",
      "anchors": [
        "quick-configuration"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 73
    },
    {
      "id": "app/get-started/open-the-app#launching-a-browser",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Launching a Browser",
      "heading_level": 3,
      "content_markdown": "### Launching a Browser\n\nLastly, you're presented with the list of compatible browsers Cypress found on your system. To understand more about your options here, see [our guide on launching browsers](/llm/markdown/app/references/launching-browsers.md). Again, don't sweat it, you can switch browsers whenever you want. Now **MASH THAT START BUTTON!**\n",
      "section": "app",
      "anchors": [
        "launching-a-browser"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 63
    }
  ]
}