Cypress Web Application

Description

A sample web application that uses Cypress a JavaScript End to End Testing, which can be used locally and on CI to test the web application. Cypress contains a number of benefits compared to other web testing frameworks like Selenium.

Contents

• Setup Steps
• How to run the project locally
• Tools
• Update Dependencies
• Releases
• Documentations
• Helpful resources

Setup Steps

To setup a Cypress project, we need to go to the terminal and add the following

mkdir cypress-web-application

Then change directory into cypress-web-application and run the following in your terminal at the root of the project to install Cypress and and keep a record saved of the dependency to the package.json file.

npm install cypress --save-dev

After that we also want to install the following ejs and Express to make a simple project we can use to test Cypress. So, run the following at the root of the project in the terminal.

npm install ejs --save
npm install express --save

Then we want to install the following start-server-and-test, see the Github repo link, as it allows to start our node project server and be able to test on this server that has started. In the past, we would have issue where we could start the server, but could not run the tests in tandem, this library allows us to do both.

npm install --save-dev start-server-and-test

To launch the Cypress dashboard and run the tests locally to make sure they work, run the following in your terminal.

npx cypress open

To see a list of example tests that Cypress provides when installing the end to end test framework, go the following directory path.

cypress/integration/examples

To create our own Cypress tests we want to do the following, let’s create a new file in the cypress/integration folder that was created for us when we installed Cypress called sample_spec.js.

In this file we want something like the following, the next time we run our tests locally or on CI, we can run these tests against our sample Express project.

describe("My First Test", () => {
  it("Does not do much!", () => {
    expect(true).to.equal(true);
  });
});

// A test that will always fail
// describe("My First Test", () => {
//   it("Does not do much!", () => {
//     expect(true).to.equal(false);
//   });
// });

// To test this locally we need to run the server in one tab and run the tests in another tab
describe("Launch the website", () => {
  it("Visits the Kitchen Sink", () => {
    cy.visit("http://localhost:8080");
  });
});

describe("My First Test", function () {
  it("Visits page", function () {
    cy.visit("https://example.cypress.io");
    cy.contains("type");
  });
});

To run our Cypress tests on CI specifically Github Actions, we want something like the following in out .yml file.

name: End-to-end tests
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    container: cypress/browsers:node12.18.3-chrome87-ff82
    steps:
      - name: Checkout
        uses: actions/checkout@v1

      - name: Cypress run
        uses: cypress-io/[email protected]
        with:
          start: npm test
          wait-on: http://localhost:8080

We want to modify the package.json to be like the following to make running certain script commands easier like the following instead of using node app.js to launch our web server, we could use npm start instead.

{
  "name": "Cypress-web-application",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "cy:run": "cypress run",
    "test": "start-server-and-test start http://localhost:8080 cy:run"
  },
  "devDependencies": {
    "cypress": "^6.8.0",
    "start-server-and-test": "^1.12.1"
  },
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.1"
  }
}

How to run the project locally

To open the Cypress Dashboard locally run, we want to type the following in our terminal at the root of the project.

npx cypress open

To launch our web server, we want to type one of the following in our terminal at the root of the project. If we want to run our tests while having Cypress dashboard open, we need to have these running in separate terminal tabs.

node app.js

or

npm start

To run our Cypress tests locally we want to use the following in our terminal at the root of the project, which calls a script from our package.json.

npm test

Tools

Linter: we use the following linter link.

Uploading Artifacts: we use the following way to upload Artifacts, they allow you to persist data like test results after a job has completed, see the following documentation link.

Creating images/icons: we use Figma to create images and icon. Figma makes it very easy to create designs in many different formats.

Creating a Mock Server: we use a mock server with Postman to quickly test apis, to see how to create a mock server, see the following video link.

Mobile Specific Tools:

Fastlane: Fastlane allows us to automate our development and release process link.

App Center: App Center is used to distribute an app, making it very easy to test on a physical device by using a fastlane plugin link.

Proxyman: we use Proxyman to view HTTP/HTTPS requests as they happen, it is easier to debug network connections on mobile on Proxyman where we can test and mock specific network responses, see the following documentation link.

Update Dependencies

Npm: How to update a npm package.

• link.

Gemfile: How to update a Gemfile package.

• link.

Documentations

Git Squash: How to Git Squash with VS Code link.

Git Worktree: How to use Git Worktree link.

Git Empty Commit: How to use Git Empty Commit link.

Common Design Patterns and App Architectures for Mobile: link and link.

Releases

How to manage releases in a repository link.

Helpful resources

The following link provides helpful information on why you would want to use Cypress as your End to End test framework for Web development compared to Selenium.

• link.

The following link provides a helpful example on how you could set up your own simple website using nodejs and Express and how to test this with Cypress.

• link.

The following link provides a real world example of Cypress being used with Github Actions

• link.

The following link provides info on how to set up Cypress over CI.

• link.

The following link provides some information on how you would run Cypress tests on Github Actions.

• link.

The following link provides some information on how you would write some real tests using Cypress.

• link.

The following link provides information how would you write a test in Cypress to visit your server.

• link.

The following links to a library start-server-and-test that allows us to run our server and tests at the same time without it our ci would get stuck running the server and not be able to run the Cypress tests.

• link.