fix: support ressources with relative paths

cli/CHANGELOG.md

@@ -7,6 +7,7 @@ _Released 05/14/2023 (PENDING)_
 
 - Reverted [#26452](/~https://github.com/cypress-io/cypress/pull/26630) which introduced a bug that prevents users from using End to End with Yarn 3. Fixed in [#26735](/~https://github.com/cypress-io/cypress/pull/26735). Fixes [#26676](/~https://github.com/cypress-io/cypress/issues/26676).
 - Moved `types` condition to the front of `package.json#exports` since keys there are meant to be order-sensitive. Fixed in [#26630](/~https://github.com/cypress-io/cypress/pull/26630).
+- Write spec-path to aut-iframe query parameter instead of path to allow for proper forwarding relative asset requests to the devserver. Fixed in [#26844](/~https://github.com/cypress-io/cypress/pull/26844).
 
 ## 12.12.0
 

npm/webpack-dev-server/src/loader.ts

@@ -18,7 +18,7 @@ const makeImport = (file: Cypress.Cypress['spec'], filename: string, chunkName:
   const magicComments = chunkName ? `/* webpackChunkName: "${chunkName}" */` : ''
 
   return `"${filename}": {
-    shouldLoad: () => decodeURI(document.location.pathname).includes("${file.absolute}"),
+    shouldLoad: () => (new URL(document.location)).searchParams.get("specPath") === "${file.absolute}",
     load: () => import("${file.absolute}" ${magicComments}),
     absolute: "${file.absolute.split(path.sep).join(path.posix.sep)}",
     relative: "${file.relative.split(path.sep).join(path.posix.sep)}",

packages/app/src/runner/index.ts

@@ -230,7 +230,10 @@ function runSpecCT (config, spec: SpecFile) {
   const autIframe = getAutIframeModel()
   const $autIframe: JQuery<HTMLIFrameElement> = autIframe.create().appendTo($container)
 
-  const specSrc = getSpecUrl(config.namespace, spec.absolute)
+  // the iframe controller will forward the specpath via header to the devserver.
+  // using a query parameter allows us to recognize relative requests and proxy them to the devserver.
+  const specIndexUrl = `index.html?specPath=${encodeURI(spec.absolute)}`
+  const specSrc = getSpecUrl(config.namespace, specIndexUrl)
 
   autIframe._showInitialBlankPage()
   $autIframe.prop('src', specSrc)

packages/server/lib/controllers/iframes.ts

@@ -42,14 +42,20 @@ export const iframesController = {
   },
 
   component: ({ config, nodeProxy }: CT, req: Request, res: Response) => {
-    // always proxy to the index.html file
-    // attach header data for webservers
-    // to properly intercept and serve assets from the correct src root
-    // TODO: define a contract for dev-server plugins to configure this behavior
-    req.headers.__cypress_spec_path = encodeURI(req.params[0])
-    req.url = `${config.devServerPublicPathRoute}/index.html`
-
-    // user the node proxy here instead of the network proxy
+    // requests to the index.html are from initializing the iframe. They include the specPath as query parameter
+    const specPath = req.query.specPath
+
+    if (typeof specPath === 'string') {
+      // for those requests we need to provide the spec-path via this header
+      req.headers.__cypress_spec_path = encodeURI(specPath)
+      req.url = `${config.devServerPublicPathRoute}/index.html`
+      delete req.query.specPath
+    } else {
+      // all requests should be forwarded to the devserver, preserving there relative paths so assets with relative urls work.
+      req.url = `${config.devServerPublicPathRoute}/${req.params[0]}`
+    }
+
+    // use the node proxy here instead of the network proxy
     // to avoid the user accidentally intercepting and modifying
     // our internal index.html handler