Search⌘ K
Home
Courses
Modern Front-end Development for Rails

Writing Our First Test

Explore how to write an effective Cypress test for a Rails front-end application. Understand the use of commands like cy.visit and cy.get for DOM interaction, test setup using beforeEach, and assertions with should to verify UI states. This lesson equips you to write reliable end-to-end tests to validate your application's behavior step by step.

We'll cover the following...

Now that we are familiar with Cypress, we’re ready to write a test.

Delete the cypress/integration/examples directory with all the existing Cypress tests. Then, restart Cypress with rake cypress:open. This gives us the Cypress window with a message saying we have no tests. Let’s write the first line of a new test. Create a file named cypress/schedule/schedule_tests.ts. As soon as you save it, the Cypress window changes to show that file. If you start to “Run all specs,” you get the test runner with a message that no tests are found in the file.

Let’s start writing the test:

TypeScript 3.3.4
/***
 * Excerpted from "Modern Front-End Development for Rails",
 * published by The Pragmatic Bookshelf.
 * Copyrights apply to this code. It may not be used to create training material,
 * courses, books, articles, and the like. Contact us if you are in doubt.
 * We make no guarantees that this code is fit for any purpose.
 * Visit http://www.pragmaticprogrammer.com/titles/nrclient for more book information.
***/
describe("On the schedule page", function () {
  beforeEach(function () {
    cy.request("/cypress_rails_reset_state")
  })
  it("Visits our schedule page ", function () {
    cy.visit("/")
  })
})

Note: This is in JavaScript, not in TypeScript because
a) It’s going to make very little difference in writing tests.
b) The TypeScript setup for Cypress is a bit of a pain.

All this test does is visit our schedule page in the browser, using the command cy.visit. We’re able to just write the url as / because we’ve already specified the base URL of the test server in the cypress.json configuration file, so Cypress will combine the two and visit http://localhost:5678/. If you run this test in the Cypress test runner, you ...