Welcome everybody to the first day of the weekly workshop!
For our Hands-on, we're going to install Cypress and write our first test.
The app you'll be testing is a special fork of cypress-realworld-app
First, run these commands in your terminal (I'm using the one in VS Code):
$ cd /whatever/folder/you/want
$ git clone https://github.com/iheartjs-dev/cypress-realworld-app.git
$ cd cypress-realworld-app
$ # open this directory in your favorite code editor
$ # or optionally use this next command if you're using vs code:
$ code .
$ git checkout Day-0
$ npm install
$ npm start
$ # Note: you may need to upgrade to Node.js Version 12
If all is well, you should be directed to localhost:3000
to see the app in action:

Try logging in and play around if you'd like: Username: Allie2, Password: s3cret
With the app and editor open, I want you to imagine that you've started a new engineering role at a fintech startup and you've been tasked with writing automated tests in Cypress to give your team and stakeholders more confidence in delivering the product. This workshop is your ticket to embarking on this journey...
The first step of course is to get Cypress added to your project, so let's roll up our sleeves and get to work!
# if you're still running the app at this point, use CTRL-C to stop
$ npm install cypress --save-dev
$ npx cypress open
$ # ignore warnings like this:
$ # Missing baseUrl in compilerOptions. tsconfig-paths will be skipped
Now you should see a window that looks like this:

When you first run Cypress, if you don't have a cypress
directory in your project, you're gifted a set of example tests that run against Cypress' Kitchen Sink app. Click OK, got it!
. Then click on the first spec in the list, actions.spec.js
and watch what happens:

This is fine, but we need to test our app, not someone else's. Head back over to your code editor and feast your eyes on your newfound cypress
directory, structured just the way it oughta be:

Writing your first test
In cypress/integrations
, create a new file called login.spec.js
and open it.
We'll be using to Mocha syntax (describe
, it
, etc.) to structure our test. Inside those blocks, we'll be using Cypress commands (cy.visit
, cy.get
, etc.).
We're going to start small by just visiting the app. This is as barebones as we can get:
/// <reference types="cypress" />
describe('login', () => {
it('login with username and password', () => {
cy.visit('localhost:3000/signin')
})
})
Note: if you want to address the code errors highlighted by your editor, add /// <reference types="cypress" />
to the top of the file. You may also need to add the Prettier extension.
Let's try to run what we have. Don't forget to start the app in a separate terminal first!

Cypress has incredible documentation, so there's no point in boring you with all the commands and what they do. I'll leave that up to you. For now, here are a few common ones:
get
: get a DOM element given a selector; queries the DOM just like $()
does in jQueryclick
: click on an element; similar to jQuery's click
method
Here's how get
and click
might work together to click a button:
cy.get('button').click()
type
: type into a DOM element
Given a DOM element like an input
that has the class lastName
:
cy.get('.lastName').type('Smith')
Take-home Challenge
Finish the test by filling in the Username and Password fields and then clicking on the Sign In button. Run it and make sure it passes.
Try running all the tests without the visual runner using npx cypress run
Explore the Cypress Documentation, Kitchen Sink app and your own locally hosted Real World App.