chore: (multi-domain) support multiple remote states (#20752)

Author: mschile

.vscode/launch.json

@@ -5,7 +5,8 @@
       "type": "node",
       "request": "attach",
       "name": "Attach by Process ID",
-      "processId": "${command:PickProcess}"
+      "processId": "${command:PickProcess}",
+      "continueOnAttach": true
     },
     {
       "type": "node",

cli/types/cypress.d.ts

@@ -48,16 +48,12 @@ declare namespace Cypress {
   }
 
   interface RemoteState {
-    auth?: {
-      username: string
-      password: string
-    }
+    auth?: Auth
     domainName: string
     strategy: 'file' | 'http'
     origin: string
-    fileServer: string
+    fileServer: string | null
     props: Record<string, any>
-    visiting: string
   }
 
   interface Backend {
@@ -68,7 +64,6 @@ declare namespace Cypress {
      * @see https://on.cypress.io/firefox-gc-issue
      */
     (task: 'firefox:force:gc'): Promise<void>
-    (task: 'ready:for:domain'): Promise<void>
     (task: 'net', eventName: string, frame: any): Promise<void>
   }
 

packages/driver/cypress/integration/e2e/multi-domain/commands/multi_domain_navigation.spec.ts

@@ -248,8 +248,19 @@ context('multi-domain navigation', { experimentalSessionSupport: true }, () => {
       })
     })
 
-    // TODO: un-skip once multiple remote states are supported
-    it.skip('supports auth options and adding auth to subsequent requests', () => {
+    // TODO: test currently fails when redirecting
+    it.skip('supports visit redirects', () => {
+      cy.visit('/fixtures/multi-domain.html')
+      cy.get('a[data-cy="dom-link"]').click()
+
+      cy.switchToDomain('http://www.foobar.com:3500', () => {
+        cy.visit('/redirect?href=http://localhost:3500/fixtures/multi-domain-secondary.html')
+      })
+
+      cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary domain')
+    })
+
+    it('supports auth options and adding auth to subsequent requests', () => {
       cy.switchToDomain('http://foobar.com:3500', () => {
         cy.visit('http://www.foobar.com:3500/basic_auth', {
           auth: {
@@ -260,26 +271,83 @@ context('multi-domain navigation', { experimentalSessionSupport: true }, () => {
 
         cy.get('body').should('have.text', 'basic auth worked')
 
-        cy.window().then({ timeout: 60000 }, (win) => {
-          return new Cypress.Promise(((resolve, reject) => {
-            const xhr = new win.XMLHttpRequest()
+        cy.window().then((win) => {
+          win.location.href = 'http://www.foobar.com:3500/basic_auth'
+        })
+
+        cy.get('body').should('have.text', 'basic auth worked')
+      })
+
+      // attaches the auth options for the foobar domain even from another switchToDomain
+      cy.switchToDomain('http://www.idp.com:3500', () => {
+        cy.visit('/fixtures/multi-domain.html')
+
+        cy.window().then((win) => {
+          win.location.href = 'http://www.foobar.com:3500/basic_auth'
+        })
+      })
+
+      cy.switchToDomain('http://foobar.com:3500', () => {
+        cy.get('body').should('have.text', 'basic auth worked')
+      })
+
+      cy.visit('/fixtures/multi-domain.html')
+
+      // attaches the auth options for the foobar domain from the top-level
+      cy.window().then((win) => {
+        win.location.href = 'http://www.foobar.com:3500/basic_auth'
+      })
+
+      cy.switchToDomain('http://foobar.com:3500', () => {
+        cy.get('body').should('have.text', 'basic auth worked')
+      })
+    })
 
-            xhr.open('GET', '/basic_auth')
-            xhr.onload = function () {
-              try {
-                expect(this.responseText).to.include('basic auth worked')
+    it('does not propagate the auth options across tests', (done) => {
+      cy.intercept('/basic_auth', (req) => {
+        req.on('response', (res) => {
+          // clear the www-authenticate header so the browser doesn't prompt for username/password
+          res.headers['www-authenticate'] = ''
+          expect(res.statusCode).to.equal(401)
+          done()
+        })
+      })
 
-                return resolve(win)
-              } catch (err) {
-                return reject(err)
-              }
-            }
+      cy.window().then((win) => {
+        win.location.href = 'http://www.foobar.com:3500/fixtures/multi-domain.html'
+      })
 
-            return xhr.send()
-          }))
+      cy.switchToDomain('http://foobar.com:3500', () => {
+        cy.window().then((win) => {
+          win.location.href = 'http://www.foobar.com:3500/basic_auth'
         })
       })
     })
+
+    it('succeeds when visiting local file server first', { baseUrl: undefined }, () => {
+      cy.visit('cypress/fixtures/multi-domain.html')
+
+      cy.switchToDomain('http://www.foobar.com:3500', () => {
+        cy.visit('/fixtures/multi-domain-secondary.html')
+        cy.get('[data-cy="dom-check"]').should('have.text', 'From a secondary domain')
+      })
+    })
+
+    it('handles visit failures', { baseUrl: undefined }, (done) => {
+      cy.on('fail', (e) => {
+        expect(e.message).to.include('failed trying to load:\n\nhttp://www.foobar.com:3500/fixtures/multi-domain-secondary.html')
+        expect(e.message).to.include('500: Internal Server Error')
+
+        done()
+      })
+
+      cy.intercept('*/multi-domain-secondary.html', { statusCode: 500 })
+
+      cy.visit('cypress/fixtures/multi-domain.html')
+      cy.switchToDomain('http://www.foobar.com:3500', () => {
+        cy.visit('fixtures/multi-domain-secondary.html')
+      })
+    })
   })
 
   it('supports navigating through changing the window.location.href', () => {

packages/driver/cypress/integration/e2e/multi-domain/multi_domain_rerun_spec.ts

@@ -5,8 +5,6 @@ describe('multi-domain - rerun', { }, () => {
     cy.get('a[data-cy="multi-domain-secondary-link"]').click()
   })
 
-  // this test will hang without the fix for multi-domain rerun
-  // https://github.com/cypress-io/cypress/issues/18043
   it('successfully reruns tests', () => {
     // @ts-ignore
     cy.switchToDomain('http://foobar.com:3500', () => {

packages/driver/cypress/plugins/server.js

@@ -129,6 +129,7 @@ const createApp = (port) => {
 
     return res
     .set('WWW-Authenticate', 'Basic')
+    .type('html')
     .sendStatus(401)
   })
 

packages/driver/src/cy/multi-domain/index.ts

@@ -21,15 +21,8 @@ const normalizeDomain = (domain) => {
 export function addCommands (Commands, Cypress: Cypress.Cypress, cy: Cypress.cy, state: Cypress.State, config: Cypress.InternalConfig) {
   let timeoutId
 
-  // @ts-ignore
   const communicator = Cypress.multiDomainCommunicator
 
-  const sendReadyForDomain = () => {
-    // lets the proxy know to allow the response for the secondary
-    // domain html through, so the page will finish loading
-    Cypress.backend('ready:for:domain')
-  }
-
   communicator.on('delaying:html', (request) => {
     // when a secondary domain is detected by the proxy, it holds it up
     // to provide time for the spec bridge to be set up. normally, the queue
@@ -38,10 +31,13 @@ export function addCommands (Commands, Cypress: Cypress.Cypress, cy: Cypress.cy,
     // @ts-ignore
     cy.isAnticipatingMultiDomainFor(request.href)
 
-    // cy.isAnticipatingMultiDomainFor(href) will free the queue to move forward.
-    // if the next command isn't switchToDomain, this timeout will hit and
-    // the test will fail with a cross-origin error
-    timeoutId = setTimeout(sendReadyForDomain, 2000)
+    // If we haven't seen a switchToDomain and cleared the timeout within 300ms,
+    // go ahead and inform the server 'ready:for:domain' failed and to release the
+    // response. This typically happens during a redirect where the user does
+    // not have a switchToDomain for the intermediary domain.
+    timeoutId = setTimeout(() => {
+      Cypress.backend('ready:for:domain', { failed: true })
+    }, 300)
   })
 
   Commands.addAll({
@@ -80,7 +76,9 @@ export function addCommands (Commands, Cypress: Cypress.Cypress, cy: Cypress.cy,
 
       const validator = new Validator({
         log,
-        onFailure: sendReadyForDomain,
+        onFailure: () => {
+          Cypress.backend('ready:for:domain', { failed: true })
+        },
       })
 
       validator.validate({
@@ -101,6 +99,7 @@ export function addCommands (Commands, Cypress: Cypress.Cypress, cy: Cypress.cy,
 
       return new Bluebird((resolve, reject, onCancel) => {
         const cleanup = () => {
+          Cypress.backend('cross:origin:finished', location.originPolicy)
           communicator.off('queue:finished', onQueueFinished)
         }
 
@@ -135,7 +134,9 @@ export function addCommands (Commands, Cypress: Cypress.Cypress, cy: Cypress.cy,
         communicator.once('ran:domain:fn', (details) => {
           const { subject, unserializableSubjectType, err, finished } = details
 
-          sendReadyForDomain()
+          // lets the proxy know to allow the response for the secondary
+          // domain html through, so the page will finish loading
+          Cypress.backend('ready:for:domain', { originPolicy: location.originPolicy })
 
           if (err) {
             return _reject(err)

packages/driver/src/cypress/location.ts

@@ -89,13 +89,7 @@ export class $Location {
   }
 
   getOriginPolicy () {
-    // origin policy is comprised of
-    // protocol + superdomain
-    // and subdomain is not factored in
-    return _.compact([
-      `${this.getProtocol()}//${this.getSuperDomain()}`,
-      this.getPort(),
-    ]).join(':')
+    return cors.getOriginPolicy(this.remote.href)
   }
 
   getSuperDomain () {

packages/driver/src/multi-domain/cypress.ts

@@ -81,8 +81,6 @@ const setup = (cypressConfig: Cypress.Config, env: Cypress.ObjectLike) => {
   handleUnsupportedAPIs(Cypress, cy)
 
   cy.onBeforeAppWindowLoad = onBeforeAppWindowLoad(Cypress, cy)
-
-  return cy
 }
 
 // eslint-disable-next-line @cypress/dev/arrow-body-multiline-braces

packages/driver/types/internal-types.d.ts

@@ -19,6 +19,11 @@ declare namespace Cypress {
     (action: 'after:screenshot', config: {})
   }
 
+  interface Backend {
+    (task: 'ready:for:domain', args: { originPolicy?: string , failed?: boolean}): boolean
+    (task: 'cross:origin:finished', originPolicy: string): boolean
+  }
+
   interface cy {
     /**
      * If `as` is chained to the current command, return the alias name used.

packages/network/lib/cors.ts

@@ -99,3 +99,11 @@ export function urlMatchesOriginProtectionSpace (urlStr, origin) {
 
   return _.startsWith(normalizedUrl, normalizedOrigin)
 }
+
+export function getOriginPolicy (url: string) {
+  const { port, protocol } = new URL(url)
+
+  // origin policy is comprised of:
+  // protocol + superdomain + port (subdomain is not factored in)
+  return _.compact([`${protocol}//${getSuperDomain(url)}`, port]).join(':')
+}