"Testing your first application" instructions inaccurate (inconsistent)?

[gilzow]

I'm following the tutorial at https://learn.cypress.io/testing-your-first-application

However, the instructions for some sections seem to be disconnected from previous lessons/pages.

I've completed the page App Installation & Overview. At the end of this page, the following is true: dev server is running at http://localhost:3000/

I continue to the next lesson: Installing Cypress and writing your first test. I am attempting to complete the step Breaking down the home spec file. Users are instructed to change the cypress/e2e/home.cy.ts file to:

describe("home page", () => {
  it("the h1 contains the correct text", () => {
    cy.visit("http://localhost:3000")
  })
})

However, the screenshot right below that shows it set to https://localhost:3000 and not http://localhost:3000.

The rest of the screenshots reference the https variant of localhost, but the tutorial doesn't include steps, or make mention of configuring node to run the dev server with a certificate in place. In the next lesson (How to test forms & custom Cypress commands) it goes back to referencing http://localhost.

---

It's after this spot that things "break down". The cypress app is still in the run tests mode from the end of Installing Cypress step. Users are not instructed to end that test. There's an info note that to launch cypress they need to run npx cypress open but that appears to be an informational message and not a distinct step.

The last section before the Debugging our first error step indicates the test failed. As we continue into the Debugging step, the user is informed the test failed because the dev server is not running. HOWEVER, if a user is following from lesson-to-lesson, the dev server is still running from the first lesson. There seems to be a step missing between the first lesson and the second lesson instructing the user to stop the dev server.

If a user then attempts to start a second instance of Cypress, they'll be unable to as Chrome from the first instance is still running in the first tab, and a second instance of Cypress opens a second Chrome tab. I'm assuming this goes back to Cypress being unable to control multiple browsers at the same time? Since it does not appear that users should be running two instances of Cypress, a step is missing to inform the user that only if they've Close(d) the test and exited Cypress should they reopen Cypress. For everyone else, a step should be added instructing users to close the running test before continuing?

---

Possibly unrelated (and if so, let me know and I'll start a second issue): when viewing the test, and clicking each step on the left, i do NOT see cypress highlighting what it did ("time travel debugging"), but instead get a blank page of output. This was the same when testing in chrome v125, firefox v125, and Edge v125. Previous experiences with Cypress and testing my own apps worked as expected (showing the steps). It's only in this tutorial app where it does not work. My tests show a "hidden" icon for each of these steps

It's similar in behavior to this github issue, with the difference being I'm following the tutorial verbatim and haven't changed anything in this example app. The "this element is not visible" icon continues (so far) with the other lessons.

[DonPatus]

An issue has been reported in the : cypress-realworld-testing-course-app repository
Please find the solution:
cypress-io/cypress-realworld-testing-course-app#33