Day 0

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 jQuery
click: 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.