How can I see element after using visit method?

[lgj9172]

In the example(https://learn.cypress.io/testing-your-first-application/installing-cypress-and-writing-your-first-test), it shows I can see a element using selector.

But I can not see element in real practice.

Is there I didn't something?

[robertguss]

@lgj9172 can you be more specific? What do you mean by "it shows I can see a element using selector?"

[ajaffary]

I am experiencing the exact same issue. Both in Chrome and Edge, when following this tutorial:

https://learn.cypress.io/testing-your-first-application/installing-cypress-and-writing-your-first-test

When I add the cy.get() instruction:

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

I refresh my testing window and see this:

but when I hover over any of the test instructions, the heading is not highlighted as shown in the tutorial. Instead, the elements disappear:

I've tried to find some solutions online, such as unchecking "Enable Javascript source maps" and "Enable CSS Source maps" in developer settings, but this does not seem to affect anything in this case.

Any suggestions?

[lgj9172]

@robertguss Sorry to late reply. I meant that when I clicked on each test phrase on the left, the DOM snapshot of the selector should be shown on the screen, but not. @ajaffary did a good job explaining.

[bradleyhop]

I'm experiencing this same issue as described by @ajaffary and @lgj9172

I've noticed that restarting npx cypress open will usually resolve this issue of noting being able to hover the tested element and see it highlighted on the app. However, refreshing will break the hover-ability of seeing the tested element. This behavior is not conducive to fluid app testing: having to restart cypress after every file write is probably not the intended behavior.

I'm running node lts, which is 18.13.0 now; I had to npm update to get npm run dev to successfully serve the app locally. No specific node version is listed in the setup docs other than "lts". Could this version of node be cause a race condition?

Edit: Restarting npx cypress open will usually make the tested elements hover-able, but not always. So, it seems that Cypress is able to test the elements before getting the (fetch) Get 200 status to draw the content. Finally, this issue is constant across all of my browsers: Chrome, Firefox Developer Edition, Electron.

[bradleyhop]

I've found a solution. When installing the app and running npm run dev, the app would fail to launch giving SWC Failed to Load error. I tried installing SWC to the project, but the app still wouldn't run. I found this article on Next.js's site: https://nextjs.org/docs/messages/failed-loading-swc

The solution for me was disabling setting swcMinify: false in the next.config.js file and creating a .babelrc file with

{
  "presets": ["next/babel"]
}

These files are in the parent directory of this repository. All elements are visible in the cypress app even after file changes.

[elylucas]

Hi all,

This is stemming from the a behavior that NextJS has, in which it sets the body of the document to be hidden until the app is fully hydrated in dev mode. Sometimes the tests can complete their execution before the body is set to be visible, which is why when they are selected they are showing as hidden. You can get around this by making sure the div tag that the next app is mounted to is visible right after doing a cy.visit like so:

cy.visit("http://localhost:3000")
cy.get("#__next").should("be.visible")

Unfortunately you can't check the body for visibility, as Cypress will always return that the body is visible (even if not). See this issue.

Right now we are not going to updated the app or lesson to reflect this as it will just cause confusion. We are looking into some other ways to get around it.

Going to close this issue, but if you have any other insights or questions let me know.