Skip to main content

​
Overview

The UI configuration file (cypress.config.ui.ts) defines settings specifically for user interface and end-to-end testing using Cypress. Location: cypress.config.ui.ts

​
Complete Configuration

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: 'https://www.saucedemo.com/',
    specPattern: 'cypress/e2e/ui/**/*.cy.ts',
    supportFile: 'cypress/support/e2e.ts',
    watchForFileChanges: false,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

​
Configuration Options

​
e2e

The main configuration object for end-to-end testing.
​
baseUrl
string
default:"https://www.saucedemo.com/"
Base URL for the application under test. All cy.visit() commands will be relative to this URL.
​
specPattern
string
default:"cypress/e2e/ui/**/*.cy.ts"
Glob pattern that specifies which test files to run. This pattern matches all TypeScript Cypress spec files in the cypress/e2e/ui/ directory and subdirectories.
​
supportFile
string
default:"cypress/support/e2e.ts"
Path to the support file that runs before all spec files. Use this for global configuration, custom commands, and imports.
​
watchForFileChanges
boolean
default:false
When set to false, Cypress will NOT automatically re-run tests when spec or source files change. Set to true for development mode with auto-reload.
​
setupNodeEvents
function
Function to register Node.js event listeners. Use this to implement plugins and custom behavior.

​
Usage

​
Running Tests with UI Config

Specify this configuration file when running Cypress: 
# Open Cypress Test Runner
cypress open --config-file cypress.config.ui.ts

# Run tests in headless mode
cypress run --config-file cypress.config.ui.ts

​
Running Specific Specs

# Run all UI specs
cypress run --config-file cypress.config.ui.ts

# Run specific spec file
cypress run --config-file cypress.config.ui.ts --spec "cypress/e2e/ui/LoginPageSpec.cy.ts"

# Run multiple spec files
cypress run --config-file cypress.config.ui.ts --spec "cypress/e2e/ui/LoginPageSpec.cy.ts,cypress/e2e/ui/HomePageSpec.cy.ts"

​
Test File Structure

Based on the specPattern, UI tests should be organized as follows: 
cypress/
└── e2e/
    └── ui/
        ├── LoginPageSpec.cy.ts
        ├── HomePageSpec.cy.ts
        ├── CheckoutPageSpec.cy.ts
        └── ... (other UI test files)

​
baseUrl Configuration

​
How It Works

With baseUrl set to https://www.saucedemo.com/: 
// This:
cy.visit('/')

// Becomes:
cy.visit('https://www.saucedemo.com/')

// And this:
cy.visit('/inventory.html')

// Becomes:
cy.visit('https://www.saucedemo.com/inventory.html')

​
Benefits

  • Environment Flexibility: Change the base URL for different environments (dev, staging, production)
  • Cleaner Tests: Shorter cy.visit() commands in test files
  • Easy Switching: Override via command line or environment variables

​
Overriding baseUrl

# Override via command line
cypress run --config-file cypress.config.ui.ts --config baseUrl=https://staging.saucedemo.com

# Override via environment variable
export CYPRESS_BASE_URL=https://staging.saucedemo.com
cypress run --config-file cypress.config.ui.ts

​
watchForFileChanges

​
When to Use

SettingUse Case
falseCI/CD pipelines, production test runs, stable test execution
trueLocal development, rapid test iteration, debugging

​
Example with Watch Enabled

export default defineConfig({
  e2e: {
    watchForFileChanges: true, // Enable for development
    // ... other settings
  },
});

​
setupNodeEvents

Use this function to register plugins and event listeners: 
setupNodeEvents(on, config) {
  // Register tasks
  on('task', {
    log(message) {
      console.log(message)
      return null
    },
  })

  // Register file preprocessor
  on('file:preprocessor', (file) => {
    // Custom preprocessing logic
  })

  // Modify config
  config.env.customVariable = 'value'
  return config
}

​
Comparison with API Config

​
UI Config vs API Config

SettingUI ConfigAPI Config
baseUrlhttps://www.saucedemo.com/https://restful-booker.herokuapp.com
specPatterncypress/e2e/ui/**/*.cy.tscypress/e2e/api/**/*.cy.ts
PurposeUI/E2E testingAPI testing
Test TypeBrowser automationHTTP requests
See API Configuration for details on API testing setup.

​
Complete Example Usage

// cypress/e2e/ui/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(() => {
    loginPage = new LoginPage()
    homePage = new HomePage()
    
    // Uses baseUrl from config
    cy.visit('/') // Goes to https://www.saucedemo.com/
  })

  it('Should log in successfully', () => {
    loginPage.typeUsername('standard_user')
    loginPage.typePassword('secret_sauce')
    loginPage.clickOnLoginButton()
    homePage.verifyHomePageIsVisible()
  })
})

​
Package.json Scripts

Add convenient npm scripts for UI testing: 
{
  "scripts": {
    "test:ui": "cypress run --config-file cypress.config.ui.ts",
    "test:ui:open": "cypress open --config-file cypress.config.ui.ts",
    "test:ui:chrome": "cypress run --config-file cypress.config.ui.ts --browser chrome",
    "test:ui:headed": "cypress run --config-file cypress.config.ui.ts --headed"
  }
}
Usage: 
npm run test:ui          # Run all UI tests headless
npm run test:ui:open     # Open Cypress Test Runner
npm run test:ui:chrome   # Run in Chrome browser
npm run test:ui:headed   # Run with browser visible

API Configuration

Configuration for API testing

BasePage

Base class used in UI tests

LoginPage

UI test page object example

Build docs developers (and LLMs) love

Get started for freeTalk to us