cypress.config.js settings - Build an Automation Script

Verify Cypress configuration settings are applied correctly

Preconditions (2)

Step 1: Open cypress.config.js file

Step 2: Set baseUrl to 'https://example.com'

Step 3: Set defaultCommandTimeout to 10000 milliseconds

Step 4: Set viewportWidth to 1280 and viewportHeight to 720

Step 5: Save the configuration file

Step 6: Write a test that visits the baseUrl

Step 7: Check that the viewport size is 1280x720

Step 8: Check that the page URL is 'https://example.com/'

✅ Expected Result: The test runs successfully using the settings from cypress.config.js: baseUrl is used for visit, viewport size is set to 1280x720, and commands respect the default timeout.

Automation Requirements - Cypress

Assertions Needed:

Verify the page URL matches the baseUrl from config

Verify the viewport size matches the configured width and height

Best Practices:

Use Cypress configuration file for settings

Use cy.viewport() to verify viewport size

Use cy.url() to assert current URL

Avoid hardcoding URLs in tests, use baseUrl config

Use beforeEach hook to set up test preconditions

Automated Solution

Cypress

/// <reference types="cypress" />

// cypress.config.js
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    defaultCommandTimeout: 10000,
    viewportWidth: 1280,
    viewportHeight: 720
  }
})

// cypress/e2e/configSettings.cy.js

describe('Cypress config settings test', () => {
  beforeEach(() => {
    cy.visit('/') // uses baseUrl from config
  })

  it('should have correct URL and viewport size', () => {
    cy.url().should('eq', 'https://example.com/')
    cy.viewport().then(viewport => {
      // viewport() does not return size, so use cy.window to check
      cy.window().then(win => {
        expect(win.innerWidth).to.equal(1280)
        expect(win.innerHeight).to.equal(720)
      })
    })
  })
})

The cypress.config.js file sets the baseUrl, defaultCommandTimeout, and viewport size. This centralizes configuration so tests do not hardcode these values.

The test visits the baseUrl by calling cy.visit('/'), which uses the configured baseUrl automatically.

We assert the URL is exactly the baseUrl with a trailing slash.

To verify viewport size, we check the window's innerWidth and innerHeight properties because cy.viewport() is a command to set viewport, not get it.

This approach follows best practices by using configuration, avoiding hardcoded URLs, and verifying settings through assertions.

Common Mistakes - 3 Pitfalls

Hardcoding full URLs in tests instead of using baseUrl config

Trying to get viewport size using cy.viewport() command

Not setting defaultCommandTimeout in config and relying on default

Bonus Challenge

Now add tests that verify the configuration works with three different baseUrls using environment variables

Show Hint