Search code examples
cypress

Set index.html file as baseUrl in Cypress

Is it possible to set baseUrl using the path of a file (index.html)?

I have an src folder on my root Cypress project which contains index.html I am testing.

In my cypress.config.js:

module.exports = defineConfig({
  e2e: {
    baseUrl: 'C:/cypress-project-name/src/index.html',
  },
})

But Cypress is giving a Expected e2e.baseUrl to be a fully qualified URL (starting with http:// or https://). error

Adding http:// also doesn't work

Solution

  • I don't think you can do it via baseUrl due to validation, but Cypress is usually happy to "mount" HTML fragments using the cy.visit() command.

    The path format is relative to project root, although an absolute path might also work

    cy.visit('src/index.html')

    But the caveat is that you can't do it when your src requires a framework (React, Angular, Vue) to compile.

    Only well-formed HTML that the browser can understand will work.

    If you want something that's more generally applicable, handling frameworks and bundling, take a look at bahmutov/start-server-and-test

    Alternative config to baseUrl

    Although baseUrl setting has validation constraining the format, you can use an env setting to bypass that validation.

    const { defineConfig } = require('cypress')

module.exports = defineConfig({
  ...
  env: {
    myBaseUrl: 'src/index.html',
  },
})

    cy.visit(Cypress.env('myBaseUrl'))