consolidate install and open commands

jennifer-shehane · jennifer-shehane · commit 167c034f4b26 · 2024-10-17T17:09:13.000-04:00
diff --git a/docs/app/component-testing/angular/overview.mdx b/docs/app/component-testing/angular/overview.mdx
@@ -19,15 +19,11 @@ step-by-step tutorial on adding component testing to any project and how to writ
 To get up and running with Cypress Component Testing in Angular, install Cypress
 into your project:
 
-```bash
-npm install cypress --save-dev
-```
+<CypressInstallCommands />
 
 Open Cypress:
 
-```bash
-npx cypress open
-```
+<CypressOpenCommands />
 
 <DocsImage
   src="/img/app/component-testing/select-test-type.jpg"
diff --git a/docs/app/component-testing/react/overview.mdx b/docs/app/component-testing/react/overview.mdx
@@ -25,15 +25,11 @@ step-by-step tutorial on adding component testing to any project and how to writ
 To get up and running with Cypress Component Testing in React, install Cypress
 into your project:
 
-```bash
-npm install cypress --save-dev
-```
+<CypressInstallCommands />
 
 Open Cypress:
 
-```bash
-npx cypress open
-```
+<CypressOpenCommands />
 
 <DocsImage
   src="/img/app/component-testing/select-test-type.jpg"
diff --git a/docs/app/component-testing/svelte/overview.mdx b/docs/app/component-testing/svelte/overview.mdx
@@ -29,15 +29,11 @@ step-by-step tutorial on adding component testing to any project and how to writ
 To get up and running with Cypress Component Testing in Svelte, install Cypress
 into your project:
 
-```bash
-npm install cypress --save-dev
-```
+<CypressInstallCommands />
 
 Open Cypress:
 
-```bash
-npx cypress open
-```
+<CypressOpenCommands />
 
 <DocsImage
   src="/img/app/component-testing/select-test-type.jpg"
diff --git a/docs/app/component-testing/vue/overview.mdx b/docs/app/component-testing/vue/overview.mdx
@@ -24,15 +24,11 @@ step-by-step tutorial on adding component testing to any project and how to writ
 To get up and running with Cypress Component Testing in Vue, install Cypress
 into your project:
 
-```bash
-npm install cypress --save-dev
-```
+<CypressInstallCommands />
 
 Open Cypress:
 
-```bash
-npx cypress open
-```
+<CypressOpenCommands />
 
 <DocsImage
   src="/img/app/component-testing/select-test-type.jpg"
diff --git a/docs/app/continuous-integration/introduction.mdx b/docs/app/continuous-integration/introduction.mdx
@@ -22,11 +22,7 @@ locally in your terminal. You generally only need to do two things:
 
 1. **Install Cypress**
 
-<Tabs>
-  <TabItem value="npm">```shell npm install cypress --save-dev ```</TabItem>
-  <TabItem value="yarn">```shell yarn add cypress --dev ```</TabItem>
-  <TabItem value="pnpm">```shell pnpm add --save-dev cypress ```</TabItem>
-</Tabs>
+<CypressInstallCommands />
 
 2. **Run Cypress**
 
diff --git a/docs/app/get-started/install-cypress.mdx b/docs/app/get-started/install-cypress.mdx
@@ -13,11 +13,7 @@ First, make sure you have all the [system requirements](#System-requirements).
 
 Install Cypress via your preferred package manager. This will install Cypress locally as a dev dependency for your project. For pnpm, make sure that you have the `pnpm` environment installed: `npm install pnpm@latest --global`.
 
-<Tabs>
-  <TabItem value="npm">```shell npm install cypress --save-dev ```</TabItem>
-  <TabItem value="yarn">```shell yarn add cypress --dev ```</TabItem>
-  <TabItem value="pnpm">```shell pnpm add --save-dev cypress ```</TabItem>
-</Tabs>
+<CypressInstallCommands />
 
 Make sure you have [Node.js installed](#Installing-Nodejs) and that you have already run
 [`npm init`](https://docs.npmjs.com/cli/init) or have a `node_modules` folder or
diff --git a/docs/app/get-started/open-the-app.mdx b/docs/app/get-started/open-the-app.mdx
@@ -12,29 +12,7 @@ description: 'Open the app effectively in Cypress. Get started with a guide on o
 You 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:
 
-<Tabs>
-  <TabItem value="npm">
-
-```shell
-npx cypress open
-```
-
-  </TabItem>
-  <TabItem value="yarn">
-
-```shell
-yarn cypress open
-```
-
-  </TabItem>
-  <TabItem value="pnpm">
-
-```shell
-pnpm cypress open
-```
-
-  </TabItem>
-</Tabs>
+<CypressOpenCommands />
 
 After a moment, the Cypress Launchpad will open.
 
diff --git a/docs/app/guides/migration/protractor-to-cypress.mdx b/docs/app/guides/migration/protractor-to-cypress.mdx
@@ -235,22 +235,7 @@ community.
 While we recommend using our official Angular schematic, you can still install
 Cypress manually.
 
-<Tabs>
-  <TabItem value="npm" active>
-
-```bash
-npm install cypress --save-dev
-```
-
-  </TabItem>
-  <TabItem value="yarn">
-
-```bash
-yarn add cypress --dev
-```
-
-  </TabItem>
-</Tabs>
+<CypressInstallCommands />
 
 Then, since Cypress can run in parallel with your application, let's install
 [concurrently](https://www.npmjs.com/package/concurrently) to simplify our npm
diff --git a/docs/app/references/troubleshooting.mdx b/docs/app/references/troubleshooting.mdx
@@ -95,9 +95,7 @@ cypress cache clear
 After running this command, you will need to run `cypress install` before
 running Cypress again.
 
-```shell
-npm install cypress --save-dev
-```
+<CypressInstallCommands />
 
 ## Launching browsers
 
diff --git a/docs/partials/_accessibility-addon.mdx b/docs/partials/_accessibility-addon.mdx
@@ -1,5 +1,5 @@
 :::tip
 
-**Cypress Accessibility** is a paid add-on. [Schedule a demo](https://www.cypress.io/ui-coverage) today and see how easy it is to enhance your accessibility testing while speeding up your development process.
+**Cypress Accessibility** is a paid add-on. [Schedule a demo](https://www.cypress.io/ui-coverage?utm_medium=website&utm_source=docs.cypress.io&utm_content=addon-tip) today and see how easy it is to enhance your accessibility testing while speeding up your development process.
 
 :::
diff --git a/docs/partials/_cypress-install-commands.mdx b/docs/partials/_cypress-install-commands.mdx
@@ -0,0 +1,25 @@
+<Tabs>
+  <TabItem value="npm">
+
+```shell
+npm install cypress --save-dev
+```
+
+  </TabItem>
+
+  <TabItem value="yarn">
+
+```shell
+yarn add cypress --dev
+```
+
+  </TabItem>
+
+  <TabItem value="pnpm">
+
+```shell
+pnpm add --save-dev cypress
+```
+
+  </TabItem>
+</Tabs>
diff --git a/docs/partials/_cypress-open-commands.mdx b/docs/partials/_cypress-open-commands.mdx
@@ -0,0 +1,23 @@
+<Tabs>
+  <TabItem value="npm">
+
+```shell
+npx cypress open
+```
+
+  </TabItem>
+  <TabItem value="yarn">
+
+```shell
+yarn cypress open
+```
+
+  </TabItem>
+  <TabItem value="pnpm">
+
+```shell
+pnpm cypress open
+```
+
+  </TabItem>
+</Tabs>
diff --git a/docs/partials/_ui-coverage-addon.mdx b/docs/partials/_ui-coverage-addon.mdx
@@ -1,5 +1,5 @@
 :::tip
 
-**UI Coverage** is a paid add-on. [Schedule a demo](https://www.cypress.io/ui-coverage) today and see how easy it is to enhance your testing while speeding up your development process.
+**UI Coverage** is a paid add-on. [Schedule a demo](https://www.cypress.io/ui-coverage?utm_medium=website&utm_source=docs.cypress.io&utm_content=addon-tip) today and see how easy it is to enhance your testing while speeding up your development process.
 
 :::
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
@@ -6,6 +6,8 @@ import Badge from "@site/src/components/badge";
 import ComponentOnlyBadge from "@site/src/components/component-only-badge";
 import TestReplayInfo from "@site/docs/partials/_test-replay-info.mdx";
 import CypressConfigFileTabs from "@site/src/components/cypress-config-file-tabs";
+import CypressInstallCommands from "@site/docs/partials/_cypress-install-commands.mdx";
+import CypressOpenCommands from "@site/docs/partials/_cypress-open-commands.mdx";
 import DefaultSelectorPriority from "@site/docs/partials/_default-selector-priority.mdx";
 import DocsImage from "@site/src/components/docs-image";
 import DocsVideo from "@site/src/components/docs-video";
@@ -122,6 +124,8 @@ export default {
   Badge,
   ComponentOnlyBadge,
   CypressConfigFileTabs,
+  CypressInstallCommands,
+  CypressOpenCommands,
   DefaultSelectorPriority,
   DocsImage,
   DocsVideo,

-Original file line number
+Diff line change
@@ @@ -1,5 +1,5 @@ @@
 :::tip
 -**Cypress Accessibility** is a paid add-on. [Schedule a demo](https://www.cypress.io/ui-coverage) today and see how easy it is to enhance your accessibility testing while speeding up your development process.
 +**Cypress Accessibility** is a paid add-on. [Schedule a demo](https://www.cypress.io/ui-coverage?utm_medium=website&utm_source=docs.cypress.io&utm_content=addon-tip) today and see how easy it is to enhance your accessibility testing while speeding up your development process.
 :::