Exploring the Cypress Real World App

Last Feburary, I checked out Cypress for the first time, and I was astounded! I wrote a post about just how easy it was to get started running Cypress. Cypress is so easy to set up because it runs within your native browser (or headless), so you don’t need to bother with browser drivers as you do with Selenium.

In June, the folks at Cypress announced that they had created a “Real World App”, which is an app designed to help people learn how to use Cypress automation for both API and UI testing. The instructions for getting started with the Real World App are fairly simple, but I thought I’d try to make them even simpler in this blog post.

Prerequisites: To use the Real World App, you’ll need to have Git, Node, and Yarn installed. You can check to see what you already have installed by going to your command line and typing:
git –version
node –version
yarn –version

If you get a version number in response to each of these commands, you are off to a great start! Note that you will need to have Node version 12 or above in order to run the Real World App, so if you have a version below that, you can follow the same instructions to update Node as you would to install Node.

To install Git, go to this page and follow the instructions for your operating system.
To install Node, go to this page and click on the LTS tab. Download either the Windows Installer or the MacOS Installer, open the installer, and follow the prompts.
To install Yarn, go to this page and follow the instructions for your operating system. For MacOS, I recommend using the Homebrew option. For Windows, I recommend downloading the msi installer.

Once you have followed all of the installation instructions, check one more time to make sure that the installations were successful by running these commands:
git –version
node –version
yarn –version

Cloning the App: You are now ready to copy the Cypress Real World App to your machine. First you’ll need to clone the project in Git:
* Go to this page, and at the top of the page you’ll see a button that says “Code”.
* Click on this button, and in the dropdown, click on the clipboard icon. This will copy the Git address of the Real World App code.
* Navigate in your command line to where you would like to install the app. (If you don’t know how to do this, check out this post.) Then type git clone, and paste the Git address that you copied in the previous step. Click Enter, and the app will be cloned to your directory.

Installing and Running the App: To install the application, first navigate to your new project location in the command line and then type yarn install. Yarn will look at all of the dependencies needed to run the app and install them for you. Next, type yarn dev in the command line. This script will start up the application on your machine. You’ll see a new tab open up in your browser with the app’s login page!

Get to Know the App: Take a moment to log into the app and see what you can do with it. When the application started up, it created some sample users that you can use to log in. To find a username, open a new tab in the command line window, navigate to your project location, and then type yarn list:dev:users. Choose one of the usernames, and log in with the password s3cret. Once you’re logged in, try doing things like creating a new bank account and sending money to another user.

Start Cypress: At this point, we’ve started the app, but we haven’t started Cypress! Let’s do that now. Type yarn cypress:open in the command line. You should see the Cypress window open, and the window will list several api and ui tests.

Run the Tests: In the upper right corner of the Cypress window, you’ll see a play button with the words “Run 16 integration specs”. Click on this button. A test runner window will open, and you’ll see the tests fly by! Marvel at the fact that you can run over 100 tests in just over 2 minutes. The first set of tests are the API tests, so you won’t see anything happening in the right side of the test runner window. When the UI tests begin, you’ll see everything that’s happening in the UI in the right side of the window. When the tests are done, try running just a single test script by clicking on it in the Cypress window.

Look at the Test Code: Now it’s time to look at the code that runs the tests. Open up the cypress-real-world-app folder using your favorite code editor (I’m a huge fan of Visual Studio Code, which works in both Windows and MacOS). To find the test scripts, click on the cypress folder in the file explorer of the code editor, then click on the tests folder. You should see two folders of test scripts: one for the API tests and one for the UI tests. These should match what you see in the Cypress window. Click on a UI test and on an API test to see what they look like. See how much of the code you can understand.

Make a Small Change to the Code: Let’s try making a change to the code. First, let’s run a test. In the Cypress window, click on the auth.spec.ts test. A new test window will open and run that test script. Now open up the auth.spec.ts file in your code editor. Make a simple change to the code, such as changing the last name in the userInfo (line 39). Save the change, and watch the tests automatically run again in the test window. In the test window, if you open up the test called “should allow a visitor to sign-up, login, and logout”, you can scroll over the different steps of the test and see snapshots of what was happening at each step, including adding the new last name from line 39.

Continue Your Exploration: Keep playing around with the code to see how much you can understand. When you are feeling more confident, try creating your own test script using the elements in the existing tests. Simply add a new file to the api or ui folder, and make sure it has .spec.ts at the end of the name. You should see your new test added to the Cypress window, and you can run it by clicking on it.

I hope that this exercise has shown you just how easy it is to get started with Cypress! For more information, check out Cypress’ excellent documentation.

14 thoughts on “Exploring the Cypress Real World App

  1. Naoufal

    Hi Kristin,

    Thanks for your tutorials, as usaly very strcutred.
    Hope to see your feedback on Jest, or why not an entier courses on lynda.com.

    Best regards,
    Naoufal

    1. kristinjackvony Post author

      Hi Naoufal- I’m glad you liked my post! I’ve already got one course on LinkedIn Learning (which now owns Lynda.com) on Postman, and I’d like to do more courses in the future! But in 2021 I’m focusing on publishing a book on software testing. We’ll see what happens in 2022!

      1. Naoufal

        Thanks Kristin,
        I’ve already watched your course on Postman It’s straightforward and practice oriented, hope to see more from you.

        Thanks again for sharing your knowledge

  2. Jorge

    Thanks Kristin, this is really helpful, do you know by any chance if there is a way to use npm instead of yarn? Thanks for this, will try it out and bookmark! 🙂

  3. Pingback: Testing Bits: 371 – December 13th – December 19th, 2020 | Testing Curator Blog

  4. Pingback: Five Blogs – 21 December 2020 – 5blogs

  5. Srinivas

    Thank you Kristin for your detailed kick start on the Cypress.io ‘Real World App’.
    Your intro on this has helped me to get through it quickly. Basically, I am not a programmer and trying to understand the UI tests code of this application. But, one thing where I have been stuck up and trying to figure out was the configuration of the test for ‘cy.login(user.username)’ command. I have gone through the entire application code but, unable to understand how does the find command is always picking up the first user as ‘Katharina_Bernier’ from the seeded database and where it has been configured in such a way and how can we change it if we need to log in for any other user?

    I request you to please help me in understanding this. Your answering on this would help me a lot and be appreciated.

    Thanks in advance.
    Srinivas

    1. kristinjackvony Post author

      Hi Srinivas! It’s been a while since I looked at this app, but I believe what is happening is that the user info is being set in lines 37-41 of the auth.spec.ts file. You can change the first and last name to whatever you like, and you can use any username that you got when you ran the yarn list:dev:users command. The password should remain the same, because all users are configured to have the same password. I hope this helps!

      1. Srinivas

        Thanks for your quick reply Kristin. I agree with you that, the ‘auth.spec.ts’ test allows us to change first name, last name in the test method (signup, login, logout). But, I don’t want to signup as a new user and signin. I just want to login as an existing/legitimate user without any new signup. So, where do I need to configure the user other than ‘Katharina_Bernier’?

        1. kristinjackvony Post author

          Hi Srinivas! I think what you can do is configure the user in the config.json file. You put the values for the username and password in the config.json file, then you call those variables in your login command in the test file. The login command will look something like this: cy.login(Cypress.env(‘username’), Cypress.env(‘password’))
          For an example of how this works, take a look at this StackOverflow question: https://stackoverflow.com/questions/56832494/define-variables-in-cypress-env-json

Comments are closed.