Cypress.io testing for a chat application that requires auth

• Use MongoDB From The Plugin File Or Call Task From DevTools Console
• Wait For jQuery slideDown Animation To Finish
• Use Docker Compose To Run Application Locally And On GitHub Actions
• Use cy.request Command To Create A User And Log in
• Connect And Send Socket Messages From Cypress Test
• Use cy.session Command To Prepare Test Data But Only When Needed
• Use cy.dataSession plugin to prepare the test data
• Use Data Alias Created Automatically By cypress-data-session
• Create User Using cypress-data-session Command
• Invalidate cy.session From cypress-data-session
• Share Data Across Specs Using cypress-data-session Plugin
• Use cy.dataSession To Create A User And Log In
• Nodemon And cypress-watch-and-reload Utilities
• Quickly Create A User And Log in Using Dependent Data Sessions
• Run Cypress On CircleCI From Your Terminal using run-cy-on-ci utility
• Stay Logged In During Tests By Preserving A Cookie
• TODO: using cy.task to create a new room
• TODO: using spec events to clear the rooms and the users

• Get Faster Feedback From Your Cypress Tests Running On GitHub Actions
• Get Faster Feedback From Your Cypress Tests Running On CircleCI
• Flexible Cypress Data Setup And Validation
• Dealing With 3rd Party Scripts In Cypress Tests
• Faster User Object Creation
• Email Cypress Test Report

• End-to-End Testing for a Real-time Chat Web Application

$ npm install

You will need a MongoDB somewhere and a Redis instance. I assume the MongoDB is running in the cloud and the Redis is running locally in a Docker container.

$ docker-compose up

Or you can run Redis and MongoDB separately

Start Redis

$ docker run -d -p 6379:6379 redis:alpine

$ MONGODB=... SESSION_SECRET=... npm start

Tip: use as-a to inject the above environment variables into a local / user profile file .as-a.init, something like this:

[chat.io]
SESSION_SECRET=MySecretVariable1234
MONGODB=mongodb://root:rootPass1234@localhost:27017/

$ as-a chat.io npm start

Open the http://localhost:3000 in your browser.

Because Cypress connects to the same MongoDB to clear the data in some tests, need to start it with the same environment variable

$ MONGODB=... npx cypress open

Read Testing Mongo with Cypress

Tip: you can use as-a to start Cypress with environment variables to connect to the MongoDB locally

$ as-a chat.io npx cypress open

Using start-server-and-test utility you can start the application and open Cypress (assuming the services have been started)

# assuming injecting ENV variables using "as-a"
$ as-a chat.io npm run dev

This mode speeds the local development

You can start the application server in watch mode. Any file change will automatically restart the server. Uses nodemon

$ npm run watch

The Cypress tests automatically re-run when the spec files change. They also re-run when any files in the public folder change thanks to the cypress-watch-and-reload plugin.

All props for this Chat app goes to the original repo OmarElGabry/chat.io. I have only cloned to show it being tested, added more features, added Cypress tests

By setting the "hosts" object in the cypress.json we can map custom domains back to the local machine and use them from Cypress tests. For example, the spec file my-chat-domain.js visits the http://my-chat.io:3000 which is mapped back to the 127.0.0.1:3000 inside the cypress.json file.

To create a local self-signed certificate on Mac I used the following commands (see Cypress Hosts Option and bahmutov/cypress-local-https)

$ brew install mkcert
$ mkcert -install
$ mkdir .cert
$ mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "my-chat.io"

To start the server with HTTPS, use

$ HTTPS=true ... start command ...

In this case, the base URL should point at https://my-chat.io with additional "hosts" mapping this custom domain back to 127.0.0.1

{
  "baseUrl": "https://my-chat.io:3000/",
  "hosts": {
    "my-chat.io": "127.0.0.1"
  }
}

Currently, the plugin file changes the base URL and sets the "hosts" object automatically when you launch Cypress with HTTPS=true environment variable.

For example, I use the following commands to test HTTPS and the custom domain

$ HTTPS=true as-a . npm start
# from another terminal open Cypress
$ HTTPS=true as-a . npx cypress open
# or using a single command via start-server-and-test
$ HTTPS=true as-a . npm run dev

The tests run automatically on pull requests, and the changed specs run first, read the blog post Get Faster Feedback From Your Cypress Tests Running On GitHub Actions. The tests run on GitHub Actions, see the workflows in .github/workflows folder. Similarly, the E2E changed tests run first on CircleCI, and if they pass, then all tests run with parallelization, see .circleci/config.yml file and read Get Faster Feedback From Your Cypress Tests Running On CircleCI

• @bahmutov
• glebbahmutov.com
• blog
• videos
• presentations
• cypress.tips