Base URL configuration in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the base URL in Cypress configuration.

Cypress

cy.visit('[1]/login')

Drag options to blanks, or click blank then click option'

Aurl

BbaseUrl

Clocalhost

Dhttp://localhost:3000

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'baseUrl' directly inside cy.visit() without configuration.

Using incomplete URLs without protocol.

The cy.visit() command requires a full URL or a path relative to the base URL. Here, we provide the full URL to visit the login page.

2fill in blank

medium

Complete the code to set the base URL in the Cypress config file (cypress.config.js).

Cypress

export default defineConfig({
  e2e: {
    [1]: 'http://localhost:3000'
  }
})

Drag options to blanks, or click blank then click option'

Aurl

BbaseUrl

CsiteUrl

DrootUrl

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'url' or 'siteUrl'.

Forgetting to export the config properly.

The baseUrl property in Cypress config sets the root URL for all tests, so you can use relative paths in cy.visit().

3fill in blank

hard

Fix the error in the Cypress test to use the base URL correctly.

Cypress

cy.visit('[1]/dashboard')

Drag options to blanks, or click blank then click option'

A/dashboard

Bhttp://localhost:3000

Cdashboard

Dlocalhost:3000

Attempts:

3 left

💡 Hint

Common Mistakes

Using full URLs in cy.visit() when baseUrl is set.

Omitting the leading slash in relative paths.

When baseUrl is set in Cypress config, use relative paths like /dashboard in cy.visit() to avoid repeating the full URL.

4fill in blank

hard

Fill both blanks to correctly configure baseUrl and use it in a test.

Cypress

export default defineConfig({
  e2e: {
    [1]: 'http://example.com'
  }
})

// In test file
cy.visit([2])

Drag options to blanks, or click blank then click option'

AbaseUrl

B'/home'

Durl

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'url' instead of 'baseUrl' in config.

Not using quotes around the path string.

Set baseUrl in config and use a relative path like '/home' in cy.visit() to visit the page.

5fill in blank

hard

Fill all three blanks to configure baseUrl, write a test visiting a page, and assert the URL.

Cypress

export default defineConfig({
  e2e: {
    [1]: 'http://myapp.test'
  }
})

describe('Home page test', () => {
  it('should load home page', () => {
    cy.visit([2])
    cy.url().should('include', [3])
  })
})

Drag options to blanks, or click blank then click option'

AbaseUrl

B'/'

D'/home'

Attempts:

3 left

💡 Hint

Common Mistakes

Using full URLs in cy.visit() when baseUrl is set.

Mismatching the path and assertion strings.

Set baseUrl to the app URL, visit the root path '/', and check the URL includes '/' to confirm the home page loaded.

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