Testing your first application updates

[robertguss]

The first course on https://learn.cypress.io called "Testing your first application," has been completely rewritten and updated for Cypress 10. We recognize that most of you are not going to be testing Todo apps in real life so we created a new app that is more "real world."

In addition to new content, we have created a video for each lesson. It has been our goal from the very beginning to create not only written content but video as well. We know people learn in different ways and we hope that by providing both written and video content you will be able to learn the material in the way that you learn best.

As always, we would greatly appreciate your feedback on this new content, so please file an issue, submit a PR, or create a new discussion.

Happy testing!

[4m3r]

Can you please cover oauth sign in proccess ?

[robertguss]

@4m3r I have a video that shows you how to test 3rd party logins, Auth0 specifically, using the new origin command. Hope it helps: https://youtu.be/Fohrq5GZSD8

[ArCiGo]

Could you add more real life samples? Most of the applications don't have IDs, or the classes are generated by the transpiler, etc; a lot of the applications have a lot of code in the DOM generated by the transpiler (without following the good practices of HTML; and most of these apps have enough pages. For example, the CRMs.

[robertguss]

@ArCiGo can you be more specific? I am not sure I fully understand what you are looking for.

[mmohai2021]

The course was great. Thank you for the good work. I tried automating a page but have a hard time clicking on button. This button is under a dropdown menu that you need to click before you can access the button. Is this something you can help with if I show you the code here?
Thanks. Will be checking for your answer.

[robertguss]

@mmohai2021 can you attach a screenshot or give me more specific details on which button?

[EgoCraxx]

Well technically a dropdown menu is not a button, it's a form, so tgat might be the root ot your troubles

[caym1988]

I am stuck at https://learn.cypress.io/testing-your-first-application/how-to-test-forms-and-custom-cypress-commands. I added my custom command

commands.ts
`///

Cypress.Commands.add("getByData", (selector) => {
return cy.get('[data-test=${selector}]')
})`

but i get the error message "Argument of type '"getByData"' is not assignable to parameter of type 'keyof Chainable"

what am i doing wrong?

[robertguss]

That is an error from Typescript, which you can ignore for now, by adding the following comment just above the custom command

/// <reference types="cypress" />

//@ts-ignore
Cypress.Commands.add("getByData", (selector) => {
  return cy.get(`[data-test=${selector}]`)
})

[caym1988]

thanks for that. how about the next error

it("the h1 contains the correct text", () => { cy.getByData("hero-heading").contains("Testing Next.js Applications with Cypress") })

produces Property 'getByData' does not exist on type 'cy & CyEventEmitter'. error

[robertguss]

Create a file called cypress/support/index.ts and add the following:

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    getByData(dataTestAttribute: string): Chainable<JQuery<HTMLElement>>
  }
}

[robertguss]

@caym1988 I have also updated the lesson with this code sample to hopefully help others. Thank you so much for pointing this out.

[MatthewCaseres]

Create a file called cypress/support/index.ts and add the following:

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    getByData(dataTestAttribute: string): Chainable<JQuery<HTMLElement>>
  }
}

I get an error Type 'Chainable' is not generic. Should it be

/// <reference types="cypress" />

declare namespace Cypress {
    interface Chainable<T> {
      getByData(dataTestAttribute: string): Chainable<JQuery<HTMLElement>>
    }
  }

export {}

Added the generic thing. I am having errors about isolated modules, I keep having to do export {} to deal with this. Is this what I am supposed to be doing?

And then cy.getByData give ts error Property 'getByData' does not exist on type 'cy & CyEventEmitter'.

edit: The TypeScript info from the docs says to do this and this is working for me

// cypress/support/index.ts
declare global {
    namespace Cypress {
      interface Chainable {
        /**
         * Custom command to select DOM element by data-cy attribute.
         * @example cy.dataCy('greeting')
         */
        getByData(value: string): Chainable<JQuery<HTMLElement>>
      }
    }
  }

[ghost]

Hi, I'm stuck at https://learn.cypress.io/testing-your-first-application/app-install-and-overview > Starting the application > npm run dev

Since I'm not familiar with Git I downloaded the ZIP file, followed every step and can't run the app.
Tried with same Node.js version on guidance (16.16.0 LTS) and the latest (16.17.0 LTS).

Tried to follow the instructions on help message https://nextjs.org/docs/messages/failed-loading-swc and updated 'Microsoft Visual C++ Redistributable' with no difference.

Any ideas?

[robertguss]

@vit-gvazquezc try and remove this line in the next.config.js file: https://github.com/cypress-io/cypress-realworld-testing/blob/main/next.config.js#L4

You can either set it to false or just delete the whole line entirely. Let me know if that works.

[Onnaien]

@vit-gvazquezc try and remove this line in the next.config.js file: https://github.com/cypress-io/cypress-realworld-testing/blob/main/next.config.js#L4

You can either set it to false or just delete the whole line entirely. Let me know if that works.

This solution did not work to get the application started. It just got rid of the SWC minify warn.
I then tried installing the latter of the reported missing npm packages, and then the application fired up well:

[hokrc01]

On linux I needed to add
npm install @next/swc-linux-x64-gnu
this got rid of the error and allowed me to the flag back to true

[MobSaiki]

I found that deleting package-lock.json and node_modules, then running npm install worked for me.

[AceSc35]

Hello, it's a long time but this woked for me :

https://stackoverflow.com/questions/69816589/next-failed-to-load-swc-binary

[mmohai2021]

Thank you so very much. It worked. I truly appreciate your help. Best, Musa

…

On Wed, Aug 31, 2022, 7:23 AM Robert Guss ***@***.***> wrote: @vit-gvazquezc <https://github.com/vit-gvazquezc> try and remove this line in the next.config.js file: https://github.com/cypress-io/cypress-realworld-testing/blob/main/next.config.js#L4 You can either set it to false or just delete the whole line entirely. Let me know if that works. — Reply to this email directly, view it on GitHub <#153 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWBRHPBT34F6BMDYOY2TRALV35FC5ANCNFSM54IUZBCQ> . You are receiving this because you were mentioned.Message ID: <cypress-io/cypress-realworld-testing/repo-discussions/153/comments/3517421 @github.com>

[robertguss]

my pleasure

[loki-tailor]

Hi, could you please help me understand the below behavior?

home.cy.ts

export { }

describe( 'home page', () => {
  it( 'the h1 contains the correct text', () => {

    cy.visit( 'http://localhost:3000' )
    // cy.wait( 3000 ) // works well irrespective of this being commented or not

    // both 'visible' and 'not.be.visible' passes when tested one at a time
    // cy.get( "h1" ).should( 'not.be.visible' ) // passes
    cy.get( "h1" ).should( 'be.visible' ) // passes
  } )
} )

1. Assert is passing for both 'not.be.visible' and 'visible'. Ideally shouldn't it only be passing for either one?
2. Also, why does 'Element not visible' comes in the Cypress step?

[michalzbranek]

Hello, were you able to find a solution? I also have a problem with 'Element not visible' that comes in every step. App preview is also blank/white when hovering over the steps.

[Onnaien]

I have similar problems. Compared to the course screenshots I get this added event (as also seen in the screenshot above) that seems to cover the web page contents:

What is this doing, and why does it not show up in the course screenshot?

[JaronAblog]

I had the same issue. The issue was solved with this line of code:
cy.visit("http://localhost:3000")
cy.get("#__next").should("be.visible")

I found the solution here:
https://stackoverflow.com/questions/73314678/element-is-not-visible-message-when-trying-to-view-test-step-in-cypress

[salines075]

Hello, could you tell me how to access that localhost:3000, I'm not being able to do it? Do I need to do something specific or what? Please provide further details, thank you.

[robertguss]

Just type it into your web browser while the development server is running in the application. So make sure to run npm run dev and then type localhost:3000 in the address bar of your browser.

[raduliviu]

Hi @robertguss ! Quick question regarding the very first lesson. I'm using node v16.16.0 and trying to do an npm i but the installation does not end successfully. Here's the log I'm getting:

npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @zeit/next-css@1.0.1: Next.js now has built-in support for CSS: https://nextjs.org/docs/basic-features/built-in-css-support. The built-in support solves many bugs and painpoints that the next-css plugin had.
npm WARN deprecated gulp-header@1.8.12: Removed event-stream from gulp-header
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated core-js-pure@3.16.0: core-js-pure@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js-pure.
npm ERR! Cannot read properties of null (reading 'pickAlgorithm')

Any suggestions?

LATER EDIT
Leaving this post here in case anyone runs into the same error: running npm cache clear --force and then trying the npm i again seems to have fixed it.

Sorry for the notification spam 😅

[shagufta333]

After installing cypress 10 and react and installing the dependencies, some files such as tsconfig.json and nextconfig.json and some other files and folders( pages, types, utils) are not created due to which i get error running the test.
I am beginner in cypress testing. i need a tutorial to create a react app from scratch and then to install cypress.

[FitriRibbit]

Hello, I can't pass course 1 section 5, when I trying to got pathname of app install and overview. It's always stopped there. It's made me frustrated cause error message in cypress already same with my link for first course. What should I do?

[ymoretto]

I'm having the exact same problem.

My code looks like this:
describe("User Journey", () => { it("a user can find a course on the home page and complete the courses lessons", () => { cy.visit("http://localhost:3000") cy.getByData("course-0").find("a").eq(3).click() cy.location("pathname").should("eq", "/testing-your-first-application") cy.getByData("next-lesson-button").click() cy.location("pathname").should( "eq", "testing-your-first-application/app-install-and-overview" ) }) })

And the error looks like this:

It is in the right URL

[alyssa-dannielle]

I'm also having the same problem. Was anyone able to figure it out?

[itsliang]

I'm also having the same problem. It seems one of the requests took too long to respond. I solved this problem by asking cypress to wait a little bit longer than the response time.

cy.visit('http://localhost:3000')
cy.getByData('course-0').find('a').contains('Get started').click()
cy.location('pathname').should('equal', '/testing-your-first-application')
cy.getByData('next-lesson-button').click()
cy.wait(6000)
cy.location('pathname').should('eq', '/testing-your-first-application/app-install-and-overview')

[itsliang]

It seems cypress doesn't encourage the use of cy.wait() like this.

So here is another version:

cy.visit('http://localhost:3000')
cy.getByData('course-0').find('a').contains('Get started').click()
cy.location('pathname').should('equal', '/testing-your-first-application')
cy.intercept('GET', '/_next/data/development/testing-your-first-application/app-install-and-overview.json?course=testing-your-first-application&slug=app-install-and-overview').as('getOverviewData')
cy.getByData('next-lesson-button').click()
cy.wait('@getOverviewData')
cy.location('pathname').should('eq', '/testing-your-first-application/app-install-and-overview')