Base URL configuration in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of setting a baseUrl in Cypress configuration?

Setting a baseUrl allows you to write shorter test commands by omitting the full URL. It helps tests run faster and makes them easier to maintain.

beginner

Where do you set the baseUrl in a Cypress project?

You set the baseUrl in the cypress.config.js file under the e2e configuration object using the key 'baseUrl'.

beginner

How does using baseUrl improve test code readability?

Instead of writing full URLs like 'https://example.com/login', you can write cy.visit('/login'). This makes test steps cleaner and easier to read.

intermediate

Can you override the baseUrl for a single test in Cypress?

Yes, you can override the baseUrl by passing the full URL directly to cy.visit() or by setting environment variables for different test runs.

beginner

Example of a valid baseUrl configuration in cypress.config.js?

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com'
  }
});

Where is the baseUrl configured in a Cypress project?

A In package.json

B Inside each test file

C In cypress.config.js under e2e

D In the browser settings

The baseUrl is set in cypress.config.js inside the e2e configuration object.

What happens if you use cy.visit('/login') with baseUrl set to 'https://example.com'?

A It throws an error

B It visits /login on localhost

C It visits https://login

D It visits https://example.com/login

With baseUrl set, relative paths in cy.visit() append to the baseUrl.

Can baseUrl be changed dynamically during test execution?

A No, it is fixed in config

B Yes, by passing full URLs to cy.visit()

C Yes, by editing cypress.config.js mid-test

D No, baseUrl is ignored

You can override baseUrl by passing full URLs directly to cy.visit().

Why is using baseUrl recommended in Cypress tests?

A To reduce typing and improve maintainability

B To slow down tests

C To avoid using cy.visit()

D To disable tests

Using baseUrl makes test code shorter and easier to update.

Which of these is a correct baseUrl value?

A https://myapp.com

B myapp

C ftp://myapp.com

D localhost

baseUrl should be a valid URL starting with http or https.

Explain how baseUrl configuration helps simplify Cypress test code.

Think about how you avoid repeating the full website address.

Describe where and how to set the baseUrl in a Cypress project.

Look for the main configuration file for Cypress tests.

Practice

1. What is the main benefit of setting a baseUrl in Cypress configuration?

easy

A. It disables all network requests except to the base URL.

B. It automatically logs in the user before each test.

C. It allows using relative URLs in cy.visit() to simplify test code.

D. It changes the browser's default homepage.

Solution

1. Step 1: Understand baseUrl purpose

   The baseUrl is used to set the main website address once in Cypress config.

2. Step 2: How baseUrl affects cy.visit()

   When baseUrl is set, you can use relative paths in cy.visit() instead of full URLs.

3. Final Answer:

   It allows using relative URLs in cy.visit() to simplify test code. -> Option C

4. Quick Check:

   baseUrl simplifies URLs in tests = C [OK]

Hint: Remember baseUrl lets you skip typing full URLs in tests [OK]

Common Mistakes:

• Thinking baseUrl logs in users automatically
• Believing baseUrl blocks other network requests
• Confusing baseUrl with browser settings

2. Which of the following is the correct way to set baseUrl in cypress.config.js?

easy

A. export const baseUrl: 'https://example.com';

B. export default { baseUrl = 'https://example.com' }

C. module.exports = { base_url: 'https://example.com' }

D. module.exports = { baseUrl: 'https://example.com' }

Solution

1. Step 1: Identify correct syntax for Cypress config

   Cypress config uses CommonJS export with module.exports = {}.

2. Step 2: Check property name and assignment

   The property must be baseUrl (camelCase) and assigned with colon, not equals.

3. Final Answer:

   module.exports = { baseUrl: 'https://example.com' } -> Option D

4. Quick Check:

   Correct config syntax uses module.exports and colon = A [OK]

Hint: Use module.exports with colon for config objects [OK]

Common Mistakes:

• Using equals (=) instead of colon (:) in object
• Writing base_url instead of baseUrl
• Using ES module syntax without transpiling

3. Given baseUrl is set to https://shop.com, what URL will Cypress visit with cy.visit('/cart')?

medium

A. https://shop.com/cart

B. https://shop.com

C. https://shop.com//cart

D. /cart

Solution

1. Step 1: Understand how baseUrl combines with relative paths

   If baseUrl is set, relative paths in cy.visit() append to it.

2. Step 2: Combine baseUrl and path

   Appending /cart to https://shop.com results in https://shop.com/cart.

3. Final Answer:

   https://shop.com/cart -> Option A

4. Quick Check:

   baseUrl + relative path = full URL [OK]

Hint: Relative path in visit appends to baseUrl [OK]

Common Mistakes:

• Expecting double slashes in URL
• Thinking cy.visit uses baseUrl only for root path
• Confusing relative path with absolute URL

4. You set baseUrl to https://app.test but cy.visit('login') fails with a 404 error. What is the likely cause?

medium

A. baseUrl must end with a slash to work correctly.

B. Missing leading slash in cy.visit() path causes wrong URL.

C. Cypress does not support relative URLs with baseUrl.

D. The baseUrl should be set inside the test file, not config.

Solution

1. Step 1: Check how relative paths combine with baseUrl

   Relative paths should start with a slash to append correctly to baseUrl.

2. Step 2: Analyze given path 'login'

   Without leading slash, 'login' appends incorrectly, causing a wrong URL and 404 error.

3. Final Answer:

   Missing leading slash in cy.visit() path causes wrong URL. -> Option B

4. Quick Check:

   Always start relative paths with '/' in cy.visit [OK]

Hint: Start relative paths with '/' in cy.visit to avoid errors [OK]

Common Mistakes:

• Assuming baseUrl needs trailing slash
• Thinking Cypress disallows relative URLs
• Setting baseUrl inside test files instead of config

5. You want to run tests on two environments: https://dev.site and https://prod.site. How can you configure Cypress to switch baseUrl easily?

hard

A. Use environment variables and set baseUrl dynamically in cypress.config.js.

B. Manually edit baseUrl in config before each test run.

C. Write full URLs in every cy.visit() call instead of using baseUrl.

D. Set baseUrl only once and ignore environment differences.

Solution

1. Step 1: Understand environment switching need

   Tests must run on different URLs without changing code manually.

2. Step 2: Use environment variables in config

   Set baseUrl in cypress.config.js using environment variables to switch easily.

3. Final Answer:

   Use environment variables and set baseUrl dynamically in cypress.config.js. -> Option A

4. Quick Check:

   Dynamic baseUrl via env vars = flexible testing [OK]

Hint: Use env vars to switch baseUrl without code changes [OK]

Common Mistakes:

• Editing config manually each time
• Avoiding baseUrl and writing full URLs everywhere
• Ignoring environment differences in tests