feat: Bundle cy.origin() dependencies at runtime

[chrisbreiding]

• Closes [cy.origin] Optimize cy.origin callback dependencies loader #24976

Additional details

Re-introducing Cypress.require() for use within the cy.origin() callback to include dependencies.

Instead of pre-processing dependencies within cy.origin() callbacks with webpack, we now extract the callback at runtime, bundle its dependencies via the server, and then eval it. It still uses webpack, but that's more of an implementation detail now.

require/import will no longer be supported within the callback, but the upsides are:

• It's preprocessor-agnostic, whereas previously it required a recent version of the webpack preprocessor. We use webpack under the hood to bundle the dependencies since we already have it included with Cypress, but users can use whatever preprocessor they like and this will still work.
• Files within node_modules using cy.origin() callback dependencies are now supported.
• The performance of files not using cy.origin() and/or dependencies within its callback will no longer be impacted, since we're not running every file through a webpack loader ahead of time and AST-parsing it. Even in the cases of files that use Cypress.require(), I found no significant performance different between this and the previous solution.
• It's a much simpler, more maintainable solution that does not require AST parsing (see all the files deleted from the webpack preprocessor).

Note that it currently still requires the experimentalOriginDependencies flag to work. I'm not sure what exactly the criteria should be for removing the flag, but I think it will be good to let this solution simmer for a bit and make sure we don't encounter any major issues with it out in the wild.

There are some limitations to this implementation:

• Dependencies (either directly or indirectly included) must be of a type supported by @cypress/webpack-batteries-included-preprocessor, which currently includes the following extensions: .js, .jsx, .ts, tsx, .mjs, .json, .coffee
• Casting is necessary to get TypeScript inference, whereas before using await import() would be sufficient.

cy.origin('http://www.example.com', async () => {
  const lodash = Cypress.require('lodash') as typeof import('lodash')

  // ... 
})

• It must be Cypress.require() on one line as a continuous string.

// BAD
Cypress . require('lodash')

// BAD
const { require } = Cypress
require('lodash')

// BAD
Cypress
.require('lodash')

// GOOD
Cypress.require('lodash')

Steps to test

it('requires lodash within cy.origin() callback', () => {
  cy.origin('http://www.example.com', () => {
    const lodash = Cypress.require('lodash')

    expect(lodash.get({ foo: 'foo' }, 'foo')).to.equal('foo')
  })
})

How has the user experience changed?

Users now need to use Cypress.require() instead of require/import within the cy.origin() callback.

Before

cy.origin('http://www.example.com', async () => {
  const lodash = require('lodash')
  const sinon = await import('sinon')

  // ...
})

After

cy.origin('http://www.example.com', () => {
  const lodash = Cypress.require('lodash')
  const sinon = Cypress.require('sinon')

  // ...
})

PR Tasks

• Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?

[chrisbreiding]

Moved this test to the driver.

[chrisbreiding]

Deps inside a plugin are now supported.

[chrisbreiding]

Solution is now preprocessor-agnostic.

[cypress]

41 flaky tests on run #44008 ↗︎

0

26787

1271

0

41

Details:

Merge remote-tracking branch 'origin/develop' into issue-24976-cypress-require
Project: cypress	Commit: 5a2a7d8df6
Status: Passed	Duration: 18:48 💡
Started: Feb 13, 2023 4:29 PM	Ended: Feb 13, 2023 4:47 PM

  e2e/origin/cookie_behavior.cy.ts • 4 flaky tests • 5x-driver-electron

View Output Video

Test
... > same site / cross origin > XMLHttpRequest > sets cookie on same-site request if withCredentials is true, and attaches to same-site request if withCredentials is true
... > same site / cross origin > fetch > sets same-site cookies if "include" credentials option is specified from request, but does not attach same-site cookies to request by default (same-origin)
... > same site / cross origin > XMLHttpRequest > sets cookie on same-site request if withCredentials is true, and attaches to same-site request if withCredentials is true
... > same site / cross origin > fetch > sets same-site cookies if "include" credentials option is specified from request, but does not attach same-site cookies to request by default (same-origin)

  e2e/origin/navigation.cy.ts • 1 flaky test • 5x-driver-electron

View Output Video

Test
delayed navigation > errors > redirects to an unexpected cross-origin and calls another command in the cy.origin command

  cypress/cypress.cy.js • 3 flaky tests • 5x-driver-electron

View Output Video

Test
... > correctly returns currentRetry
... > correctly returns currentRetry
... > correctly returns currentRetry

  create-from-component.cy.ts • 1 flaky test • app-e2e

View Output Video

Test
... > runs generated spec		Screenshot

  runner/ct-framework-errors.cy.ts • 1 flaky test • app-e2e

View Output Video

Test
Angular 13 > error conditions		Screenshot

The first 5 flaky specs are shown, see all 20 specs in Cypress Cloud.

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[AtofStryker]

I think this happens after fetch gets patched in the spec bridge, but it shouldn't matter here I think unless there is some reason we need to side step it