{
  "doc": {
    "id": "app/get-started/open-the-app",
    "title": "Open the Cypress app: step-by-step guide",
    "description": "Open the Cypress app to run tests interactively, watch them execute in a real browser, and debug failures visually, with guided setup that configures your project for you.",
    "section": "app",
    "source_path": "/llm/markdown/app/get-started/open-the-app.md",
    "version": "e6c8d867c21227247f14714fb5690c7c018983c5",
    "updated_at": "2026-08-08T12:39:37.868Z",
    "headings": [
      {
        "id": "app/get-started/open-the-app#open-the-app",
        "text": "Open the App",
        "level": 1
      },
      {
        "id": "app/get-started/open-the-app#cypress-open",
        "text": "cypress open",
        "level": 2
      },
      {
        "id": "app/get-started/open-the-app#add-an-npm-script",
        "text": "Add an npm script",
        "level": 3
      },
      {
        "id": "app/get-started/open-the-app#the-launchpad",
        "text": "The Launchpad",
        "level": 2
      },
      {
        "id": "app/get-started/open-the-app#step-1-choose-a-testing-type",
        "text": "Step 1: Choose a testing type",
        "level": 3
      },
      {
        "id": "app/get-started/open-the-app#step-2-review-the-generated-configuration",
        "text": "Step 2: Review the generated configuration",
        "level": 3
      },
      {
        "id": "app/get-started/open-the-app#step-3-launch-a-browser",
        "text": "Step 3: Launch a browser",
        "level": 3
      },
      {
        "id": "app/get-started/open-the-app#skip-the-setup-prompts",
        "text": "Skip the setup prompts",
        "level": 2
      },
      {
        "id": "app/get-started/open-the-app#log-in-to-the-app",
        "text": "Log in to the app",
        "level": 2
      },
      {
        "id": "app/get-started/open-the-app#troubleshooting",
        "text": "Troubleshooting",
        "level": 2
      },
      {
        "id": "app/get-started/open-the-app#next-steps",
        "text": "Next Steps",
        "level": 2
      },
      {
        "id": "app/get-started/open-the-app#see-also",
        "text": "See also",
        "level": 2
      }
    ]
  },
  "chunks": [
    {
      "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\nOpen Cypress from your **project root** using the command for your package manager (npm, Yarn, pnpm, or Bun):\n\n*   npm\n*   Yarn\n*   pnpm\n*   Bun\n\n```\nnpx cypress open\n```\n\n```\nyarn cypress open\n```\n\n```\npnpm cypress open\n```\n\n```\nbunx cypress open\n```\n\nAfter a moment, the Cypress Launchpad will open.\n\n### Add an npm script\n\nTyping the full command works fine, but adding Cypress to the `scripts` field in your `package.json` gives you a shorter command that's consistent for everyone working in the project. Teammates don't need to know how Cypress is invoked, only that `npm run cy:open` starts it.\n\npackage.json\n\n```\n{  \"scripts\": {    \"cy:open\": \"cypress open\"  }}\n```\n\nNow you can open Cypress from your project root with:\n\n*   npm\n*   yarn\n*   pnpm\n*   bun\n\n```\nnpm run cy:open\n```\n\n```\nyarn cy:open\n```\n\n```\npnpm cy:open\n```\n\n```\nbun run cy:open\n```\n\nDon't name a script `cypress`, especially if you use Yarn as your 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 a descriptive, non-ambiguous name such as `cy:open` or `cy:run`.\n",
      "section": "app",
      "anchors": [
        "cypress-open"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 276
    },
    {
      "id": "app/get-started/open-the-app#add-an-npm-script",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Add an npm script",
      "heading_level": 3,
      "content_markdown": "### Add an npm script\n\nTyping the full command works fine, but adding Cypress to the `scripts` field in your `package.json` gives you a shorter command that's consistent for everyone working in the project. Teammates don't need to know how Cypress is invoked, only that `npm run cy:open` starts it.\n\npackage.json\n\n```\n{  \"scripts\": {    \"cy:open\": \"cypress open\"  }}\n```\n\nNow you can open Cypress from your project root with:\n\n*   npm\n*   yarn\n*   pnpm\n*   bun\n\n```\nnpm run cy:open\n```\n\n```\nyarn cy:open\n```\n\n```\npnpm cy:open\n```\n\n```\nbun run cy:open\n```\n\nDon't name a script `cypress`, especially if you use Yarn as your 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 a descriptive, non-ambiguous name such as `cy:open` or `cy:run`.\n",
      "section": "app",
      "anchors": [
        "add-an-npm-script"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 200
    },
    {
      "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\nWhen Cypress opens, the Launchpad is the first thing you'll see. It walks you through the decisions and configuration a new project needs (choosing a testing type, generating configuration files, and picking a browser) so you don't have to set any of this up manually. If your project is already configured, the Launchpad gets you back to your tests in a couple of clicks.\n\nThe first time you open Cypress in a project, the Launchpad takes you through the following steps in order. You'll only see this full setup once: on later opens, the Launchpad remembers your configuration, and you can [skip the prompts entirely](#Skip-the-setup-prompts) from the command line.\n\n### Step 1: Choose a testing type\n\nThe Launchpad presents your biggest decision first: what type of testing do you want to do?\n\n*   **[E2E Testing](/llm/markdown/app/core-concepts/testing-types.md#What-is-E2E-Testing)** runs your whole application in the browser and visits pages the way a user would. It's the best way to verify complete user journeys across your entire stack, like logging in, filling out forms, and checking out.\n*   **[Component Testing](/llm/markdown/app/core-concepts/testing-types.md#What-is-Component-Testing)** mounts individual components of your app in isolation. It's a fast, focused way to test a component's behavior across many states and props without running your whole application.\n\nFor more background on this decision, read [Testing Types](/llm/markdown/app/core-concepts/testing-types.md). If you're not sure which to pick, choose **E2E Testing** for now. This isn't a permanent choice, and you can set up the other testing type at any time later.\n\n### Step 2: Review the generated configuration\n\nNext, the Launchpad generates a set of configuration files tailored to your chosen testing type and lists each change for you to review. This scaffolding saves you from writing boilerplate: you get a working `cypress.config.js`, support files, and example fixtures without needing to know Cypress's configuration format up front.\n\nYou can read about what each file does in [Project structure](/llm/markdown/app/core-concepts/writing-and-organizing-tests.md#Project-structure), or simply scroll down and click **Continue**. The defaults work well for most projects, and you can adjust the configuration whenever you need to.\n\nIf you chose Component Testing, the Launchpad shows two extra screens before generating configuration files: it auto-detects your front-end framework and bundler, then verifies that the required dependencies are installed. See the [Component Testing setup guide](/llm/markdown/app/component-testing/get-started.md) for a full walkthrough.\n\n### Step 3: Launch a browser\n\nFinally, the Launchpad shows the compatible browsers it found on your system, including the Electron browser that ships with Cypress. Running your tests in the same browsers your users rely on gives you confidence that your app works where it matters, and you can switch browsers at any time, even in the middle of a testing session.\n\nTo learn more about your options here, see the [guide on launching browsers](/llm/markdown/app/references/launching-browsers.md). Pick a browser and click **Start** to begin testing.\n",
      "section": "app",
      "anchors": [
        "the-launchpad"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 615
    },
    {
      "id": "app/get-started/open-the-app#step-1-choose-a-testing-type",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Step 1: Choose a testing type",
      "heading_level": 3,
      "content_markdown": "### Step 1: Choose a testing type\n\nThe Launchpad presents your biggest decision first: what type of testing do you want to do?\n\n*   **[E2E Testing](/llm/markdown/app/core-concepts/testing-types.md#What-is-E2E-Testing)** runs your whole application in the browser and visits pages the way a user would. It's the best way to verify complete user journeys across your entire stack, like logging in, filling out forms, and checking out.\n*   **[Component Testing](/llm/markdown/app/core-concepts/testing-types.md#What-is-Component-Testing)** mounts individual components of your app in isolation. It's a fast, focused way to test a component's behavior across many states and props without running your whole application.\n\nFor more background on this decision, read [Testing Types](/llm/markdown/app/core-concepts/testing-types.md). If you're not sure which to pick, choose **E2E Testing** for now. This isn't a permanent choice, and you can set up the other testing type at any time later.\n",
      "section": "app",
      "anchors": [
        "step-1-choose-a-testing-type"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 177
    },
    {
      "id": "app/get-started/open-the-app#step-2-review-the-generated-configuration",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Step 2: Review the generated configuration",
      "heading_level": 3,
      "content_markdown": "### Step 2: Review the generated configuration\n\nNext, the Launchpad generates a set of configuration files tailored to your chosen testing type and lists each change for you to review. This scaffolding saves you from writing boilerplate: you get a working `cypress.config.js`, support files, and example fixtures without needing to know Cypress's configuration format up front.\n\nYou can read about what each file does in [Project structure](/llm/markdown/app/core-concepts/writing-and-organizing-tests.md#Project-structure), or simply scroll down and click **Continue**. The defaults work well for most projects, and you can adjust the configuration whenever you need to.\n\nIf you chose Component Testing, the Launchpad shows two extra screens before generating configuration files: it auto-detects your front-end framework and bundler, then verifies that the required dependencies are installed. See the [Component Testing setup guide](/llm/markdown/app/component-testing/get-started.md) for a full walkthrough.\n",
      "section": "app",
      "anchors": [
        "step-2-review-the-generated-configuration"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 175
    },
    {
      "id": "app/get-started/open-the-app#step-3-launch-a-browser",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Step 3: Launch a browser",
      "heading_level": 3,
      "content_markdown": "### Step 3: Launch a browser\n\nFinally, the Launchpad shows the compatible browsers it found on your system, including the Electron browser that ships with Cypress. Running your tests in the same browsers your users rely on gives you confidence that your app works where it matters, and you can switch browsers at any time, even in the middle of a testing session.\n\nTo learn more about your options here, see the [guide on launching browsers](/llm/markdown/app/references/launching-browsers.md). Pick a browser and click **Start** to begin testing.\n",
      "section": "app",
      "anchors": [
        "step-3-launch-a-browser"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 113
    },
    {
      "id": "app/get-started/open-the-app#skip-the-setup-prompts",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Skip the setup prompts",
      "heading_level": 2,
      "content_markdown": "## Skip the setup prompts\n\nOnce your project is configured, you don't need to click through the Launchpad every time. Pass the testing type and browser directly to [`cypress open`](/llm/markdown/app/references/command-line.md#cypress-open) to land straight on your specs:\n\n*   npm\n*   yarn\n*   pnpm\n*   bun\n\n```\nnpx cypress open --e2e --browser chrome\n```\n\n```\nyarn cypress open --e2e --browser chrome\n```\n\n```\npnpm cypress open --e2e --browser chrome\n```\n\n```\nbunx cypress open --e2e --browser chrome\n```\n\nThis is a handy addition to your npm scripts for the testing type you use most.\n",
      "section": "app",
      "anchors": [
        "skip-the-setup-prompts"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 123
    },
    {
      "id": "app/get-started/open-the-app#log-in-to-the-app",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Log in to the app",
      "heading_level": 2,
      "content_markdown": "## Log in to the app\n\nYou can use the Cypress app without an account, but logging in to [Cypress Cloud](/llm/markdown/cloud/get-started/introduction.md) from the profile menu in the top right unlocks insights from your recorded runs, right inside the app:\n\n*   **See run history alongside your specs.** The Specs page shows each spec's latest run statuses, average duration, and flaky-test annotations, so you can spot slow or unreliable tests before you even run them.\n*   **Review recorded runs without leaving the app.** The Runs page shows your project's recorded runs, scoped to your current git branch.\n*   **Debug CI failures locally.** The Debug page surfaces failed tests from your latest recorded run, lets you re-run just those failures, and opens [Test Replay](/llm/markdown/cloud/features/test-replay.md) so you can see exactly what happened in CI.\n*   **Get notified when runs finish.** Cloud run notifications appear in the app, and clicking one takes you straight to the run.\n*   **Get AI assertion recommendations in Cypress Studio.** As you record interactions with [Cypress Studio](/llm/markdown/app/guides/cypress-studio.md), Studio AI watches what changes in your UI and recommends assertions for you to review and keep, so you don't have to guess what to assert after every click.\n*   **Generate tests from natural language with `cy.prompt`.** Logging in lets you use [`cy.prompt`](/llm/markdown/api/commands/prompt.md) to turn plain-language steps like `'click the login button'` into real, executable Cypress commands, with self-healing when your UI changes. Learn more in [AI Test Generation](/llm/markdown/app/guides/ai-test-generation.md).\n\nThe run insights require your project to [record runs to Cypress Cloud](/llm/markdown/cloud/get-started/setup.md), and the AI features require a linked project. Setup takes a few minutes, and Cypress Cloud has a free plan to get you started.\n",
      "section": "app",
      "anchors": [
        "log-in-to-the-app"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 363
    },
    {
      "id": "app/get-started/open-the-app#next-steps",
      "doc_id": "app/get-started/open-the-app",
      "heading": "Next Steps",
      "heading_level": 2,
      "content_markdown": "## Next Steps\n\nYou're set up and ready to write your first test:\n\n*   Chose E2E Testing? [Write your first E2E test](/llm/markdown/app/end-to-end-testing/writing-your-first-end-to-end-test.md).\n*   Chose Component Testing? [Get started with Component Testing](/llm/markdown/app/component-testing/get-started.md).\n\nTo get the most out of the app itself, including the Command Log, time-travel debugging, and Cypress Studio, read about [Open Mode](/llm/markdown/app/core-concepts/open-mode.md).\n",
      "section": "app",
      "anchors": [
        "next-steps"
      ],
      "path": "/llm/json/chunked/app/get-started/open-the-app.json",
      "token_estimate": 71
    }
  ]
}