Skip to main content

​
Running Your First Test

This quickstart guide will have you running tests in under 5 minutes.
1

Start with UI Tests

Open the Cypress Test Runner for UI tests:
npm run cy:open:ui
This launches Cypress with the UI configuration (cypress.config.ui.ts).
2

Select a Test

In the Cypress Test Runner:
  1. Choose your preferred browser (Chrome, Electron, etc.)
  2. Click on LoginPageSpec.cy.ts from the test list
  3. Watch the test run in the interactive browser
3

See the Results

Cypress will automatically:
  • Navigate to the application
  • Execute login actions
  • Display real-time test results
  • Show detailed command logs

​
Running Tests Headlessly

For CI/CD or quick verification, run tests in headless mode: 
npm run cy:run:ui

​
Understanding the Output

When you run tests headlessly, you’ll see: 
  Running:  LoginPageSpec.cy.ts                                        (1 of 1)

  User Authentication
    ✓ Should log in successfully with valid credentials (2456ms)
    ✓ Should not log in with a locked user credentials (876ms)
    ✓ Should log in successfully with a problem user credentials (1234ms)

  3 passing (5s)

​
Your First UI Test Walkthrough

Let’s examine what happens in the login test:
LoginPageSpec.cy.ts
import LoginPage from "../../support/pages/LoginPage";
import HomePage from "../../support/pages/HomePage";

let loginPage: LoginPage
let homePage: HomePage

describe('User Authentication', () => {
  beforeEach(() => {
    // Load test data from fixtures
    cy.fixture('users').as('userData')
    
    // Initialize page objects
    loginPage = new LoginPage()
    homePage = new HomePage()
    
    // Navigate to the application
    cy.visit('/')
  });

  it('Should log in successfully with valid credentials', () => {
    cy.get('@userData').then((user: any) => {
      // Use page object methods for clean, readable tests
      loginPage.verifyLoginMainPage()
      loginPage.typeUsername(user.standard)
      loginPage.typePassword(user.password)
      loginPage.clickOnLoginButton()

      // Verify successful login
      homePage.verifyHomePageIsVisible()
    })
  });
});

​
What’s Happening?

1

Setup

The beforeEach hook loads test data from users.json and initializes page objects for clean test structure.
2

Navigation

cy.visit('/') navigates to the baseUrl defined in cypress.config.ui.ts (https://www.saucedemo.com/).
3

Actions

Page object methods (typeUsername, typePassword, clickOnLoginButton) encapsulate element interactions.
4

Verification

verifyHomePageIsVisible() confirms the login succeeded by checking for the home page.

​
Running API Tests

API tests are just as easy:
1

Open API Test Runner

npm run cy:open:api
2

Run API Tests

Select GETSpec.cy.ts from the test list to see API testing in action.

​
Sample API Test

Here’s a simple API test from the framework:
GETSpec.cy.ts
describe('API Requests - GET', () => {
  it('Should receive a 200 status response', () => {
    cy.request({
      method: 'GET',
      url: '/booking',
    }).its('status').should('eq', 200)
  })

  it('Should return an array', () => {
    cy.request({
      method: 'GET',
      url: '/booking',
    }).then((res) => {
      expect(res.body).to.be.an('array')
    })
  })

  it('Should have the correct headers', () => {
    cy.request({
      method: 'GET',
      url: '/booking',
    }).its('headers').its('content-type')
      .should('include', 'application/json')
  })
});
API tests use the baseUrl from cypress.config.api.ts (https://restful-booker.herokuapp.com), so all requests are relative to that endpoint.

​
Available NPM Scripts

The framework provides convenient npm scripts:
package.json
{
  "scripts": {
    "cy:open:ui": "cypress open --config-file cypress.config.ui.ts",
    "cy:open:api": "cypress open --config-file cypress.config.api.ts",
    "cy:run:ui": "cypress run --config-file cypress.config.ui.ts",
    "cy:run:api": "cypress run --config-file cypress.config.api.ts"
  }
}

cy:open:ui

Opens Cypress Test Runner for UI tests with interactive browser

cy:open:api

Opens Cypress Test Runner for API tests

cy:run:ui

Runs UI tests headlessly (perfect for CI/CD)

cy:run:api

Runs API tests headlessly

​
Quick Tips

Interactive vs Headless: Use cy:open during development to see tests run and debug interactively. Use cy:run for CI/CD pipelines and quick verification.
Test Isolation: Each test runs in isolation. The beforeEach hook ensures a clean state before every test.
The API tests use a public API endpoint (restful-booker.herokuapp.com). Data may change between test runs. For production use, consider mocking or using a dedicated test environment.

​
What’s Next?

Project Structure

Understand how files are organized

Page Object Model

Learn the POM pattern in depth

Writing UI Tests

Create your own UI tests

Writing API Tests

Build comprehensive API test suites

Build docs developers (and LLMs) love

Get started for freeTalk to us