Have a way to visit a local HTML file without prepending the baseUrl

[JFRabbit]

Current behavior:

If I want to open a local file for test, like:
cy.visit('file:///Users/jasonzhang/Desktop/test.html')

I got an error:

CypressError: cy.visit() failed trying to load:
file:///Users/jasonzhang/Desktop/test.html
We attempted to make an http request to this URL but the request failed without a response.
We received this error at the network level:

Error: Invalid URI "file:///Users/jasonzhang/Desktop/test.html"
Common situations why this would fail:

• you don't have internet access
• you forgot to run / boot your web server
• your web server isn't accessible
• you have weird network configuration settings on your computer

Desired behavior:

Support it.

Versions

3.3.1

[jennifer-shehane]

You can visit a file by specifying the relative path to cy.visit() - relative to the projectRoot.

cy.visit('./test.html')

[nolimitsdude]

When I run cy.visit('./cypress/screenshots/screenshot.html')
the baseurl is being added and I am not on file://
https://fleetlocate-stage.spireon.com/./cypress/screenshots/screenshot.html

I was expecting file://./cypress/screenshots/screenshot.html

Using cypress 3.6.0

[averri]

What's the status of this request? A response has been given that does not answer the original question. Other users have commented about the same issue:

When I run cy.visit('./cypress/screenshots/screenshot.html')
the baseurl is being added and I am not on file://
https://fleetlocate-stage.spireon.com/./cypress/screenshots/screenshot.html

I was expecting file://./cypress/screenshots/screenshot.html

[jennifer-shehane]

This issue is still in the 'proposal' stage, which means no work has been done on this issue as of today, so we do not have an estimate on when this will be delivered.

[levenleven]

@jennifer-shehane could you clarify if visiting file relative to project root is possible or not?
According to docs https://docs.cypress.io/api/commands/visit.html#Web-Server it should be, but it still appends base url

[jennifer-shehane]

@levenleven It is possible and does work if you do not have a baseUrl defined.

[jennifer-shehane]

Reopening as this is still an existing issue that needs addressing. If you'd like to no longer be notified in this thread, please Unsubscribe from notifications on the right side of this issue.

[jennifer-shehane]

Sorry, this is actually a duplicate of #2918 😝 Forgive my comment spamming.

[wmadden]

The Cypress visit() documentation states:

Cypress will prefix the URL with the baseUrl configured in your network options if you’ve set one.

You may also specify the relative path of an html file. The path is relative to the root
directory of the Cypress installation. Note that the file:// prefix is not needed.

However, what it means is: if baseUrl is set, Cypress will prepend the baseUrl to any URL string that doesn't begin with http. There is no way to disable this behavior if baseUrl is set.

When it says "you may also specify the relative path of an html file" it means: If baseUrl is NOT set, you may specify a relative path to an HTML file relative to the Cypress project root.

This documentation is extremely unclear and leads easily to frustration if you assume that Cypress would give you some way to prevent having the baseUrl prepended to a given URL string. Considering how much the documentation stresses that using the baseUrl configuration option is a "best practice", you'd think that the options to visit() would allow you some control over what exact URL you're visiting.

It'd be an even "better" practice to never set baseUrl in the global configuration, since you can always prepend the baseUrl yourself but you can't ask Cypress not to prepend it once it's set.

And of course, as other users have pointed out (#2918), you can't unset the baseUrl while the test is running to get the visit() command to do what you'd expect it to do to begin with.

[bahmutov]

@wmadden the way you visit a local file when baseUrl is set in cypress.json is by removing it using per-test configuration https://on.cypress.io/configuration#Test-Configuration

it('visits base url', () => {
  cy.visit('/')
  cy.contains('h1', 'Kitchen Sink')
})

it('visits local file', {baseUrl: null}, () => {
  cy.visit('index.html')
  cy.contains('local file')
})

PS: I would put tests that use different baseUrl into separate spec files to avoid spec file reload when the different origin is hit.

[GrayedFox]

This makes using a local file pretty tedious if using baseUrl since Cypress also expects a fully qualified domain name, i.e. setting the baseUrl to ./src/index.html will prevent tests from being run.

You can work around it by doing something like this:

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  env: {
    indexUrl: './src/pages/index-dev.html',
  },
  e2e: {
    // due to some quirky behaviour in how Cypress handles the baseUrl environment variable
    // we use a work around, check the base-page.ts file
    baseUrl: null,
  },
});

Then, instead of calling cy.visit('/') you can pass in a specific environment variable as required. Here's an example using an abstract class that all other page objects inherit:

abstract class BasePage {
  open() {
    cy.visit(Cypress.env('indexUrl'));
    return this;
  }
}

export { BasePage };

A little janky but captures the essence of what baseUrl is supposed to do if working with local files and I can specify it on the command line to differentiate environments/CI/etc:

cypress run --env indexUrl=./src/pages/index-dev.html