Outdated getting started install video Cypress 0.20.3

[MikeMcC399]

Subject

Getting Started > Installing Cypress

Description

The install video

https://docs.cypress.io/img/snippets/installing-cli.mp4

located on the page

Getting Started > Installing Cypress

is very outdated.

It demonstrates executing the commands:

pwd
npm install cypress --save-dev
./node_modules/.bin/cypress open

using legacy Cypress version 0.20.3

Very little of what the video displays corresponds to how current versions of Cypress 13.x behave when being installed and run.

Edit: see #5340 (comment) below for full details of how the video diverges from current installations.

Suggestion

The video https://docs.cypress.io/img/snippets/installing-cli.mp4 should be removed from the page Getting Started > Installing Cypress or updated.

[mike-plummer]

@elylucas Ideas for who would be best to look into this or if it's in-flight already? I know there was discussion around updating this video a while back but not sure where that stands

[MikeMcC399]

@elylucas

If this video is not going to be updated, then I would suggest removing it. Leaving it in place is just confusing.

[MikeMcC399]

• The same outdated video displaying installation of legacy Cypress version 0.20.3 is also used on the main Cypress README > Installing section. The current version of Cypress is 13.6.3. See issue cypress-io/cypress#28815.

[MikeMcC399]

• The Cypress installation video on the main Cypress README > Installing section has been replaced.

See https://github.com/cypress-io/cypress/blob/develop/assets/cypress-installation.gif

[MikeMcC399]

Issue details

Current installation

For comparison with the old video https://docs.cypress.io/img/snippets/installing-cli.mp4 :

Installing Cypress 13.6.6 on Ubuntu 22.04.4 LTS using Node.js 20.11.1 LTS with the following command as specified under Getting Started > Installing Cypress > Installing:

npm install cypress --save-dev

produces the following log (when there is already a package.json initialized):

$ npm install cypress --save-dev

added 185 packages in 1m

41 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Difference between old video and current installation log

The video https://docs.cypress.io/img/snippets/installing-cli.mp4 does not take account of several changes that have taken place over the last years:

1. The video shows the legacy Cypress version 0.20.3 released on Oct 6, 2017. The current Cypress version is 13.6.6 released on Feb 22, 2024.

2. The video shows the npm postinstall phase being executed, which includes Downloading Cypress, Unzipping Cypress and Finishing Installation. npm does not show the postinstall phase unless the option foreground-scripts (introduced in npm v7.4.0) is specified. npm v7.0.0 introduced the breaking change RFC 22 whereby Lifecycle Scripts are silent. Node.js 14, using npm v6.14.8 with End-of-Life on Apr 4, 2023 was the last version to display the execution of postinstall scripts by default.

3. The video shows the log text:

   You can now open Cypress by running: node_modules/.bin/cypress open

   • This instruction does not appear, because the postinstall script is now silent by default
   • npm 5.2.0, released in July 2017, provided npx integrated into npm which allowed the long-form ./node_modules/.bin/cypress open to be replaced by the short-form npx cypress open. So this instruction has become old fashioned.

4. The video demonstrates using the command .node_modules/.bin/cypress open. This is not automatically called by executing npm install cypress --save-dev. This phase is covered in a separate following page of the documentation Getting Started > Opening the App.

5. The video shows automatic scaffolding of a full set of E2E tests. Non-legacy versions of Cypress starting with version 10 display the launchpad to choose between E2E and component testing first and they do not automatically scaffold any example specs. The option to create specs is offered for the user to decide.