feat(net-stubbing): experimental full network mocking support

[flotwig]

• Closes Full Network Layer Stubbing / fetch support #687 (Full Network Layer Stubbing / fetch support)
• Closes Prevent Cypress from resolving stubs with cy.route #4163 (Prevent Cypress from resolving stubs with cy.route)
• Closes Allowing setting Chrome bandwidth and latency setting #2716 (Allowing setting Chrome bandwidth and latency setting)
• Closes Support mocking of iframe document response #2818 (Support mocking of iframe document response)
• Closes Prevent/Stub network request #1370 (Prevent / Stub network request)
• Closes Add ability to wait for script to load (like cy.script('js') + cy.wait()) #1296 (Add ability to wait for script to load(like cy.script('js') + cy.wait()))
• Closes Allow reusing cy.server() in several tests and hooks #1183 (Allow reusing cy.server() in several tests and hooks)
• Closes Partial route mock #976 (Partial route mock)
• Closes Allow Dynamic Stubbing and Responses #521 (Intercepting requests/responses dynamically)
• Closes Remove cy.server() boilerplate #439 (Remove cy.server() boilerplate)
• Closes Modify headers and status code but not stubbing response #190 (Modify headers and status code but not stubbing response)
• Closes implement window.fetch capturing/mocking #95 (implementwindow.fetch capturing / mocking)
• Closes support multiple cy.route methods at once #799 (support matching multiple methods for one route definition)

User facing changelog

• With experimentalNetworkMocking enabled, added support for cy.route2, which can intercept any HTTP traffic.

Additional details

• API design sketches: https://gist.github.com/brian-mann/96800d5e85bbc85f2b7050432bb4fe1e
• Drafts of types: https://gist.github.com/flotwig/c44b1cc8dfd825326fddef4d58e403e3

Objectives

• Dynamic modification of HTTP requests from driver
• Dynamic modification of HTTP responses from driver
  • Delay
  • Throttle (kbps)
• Static modification of HTTP responses from driver
• Aliasing & waiting

Todo List

• Merge proxy-refactor: Refactor proxy into own package, implement middleware pattern #5136
• Add timeout for res.send, req.reply to be called before test is autofailed
• Fail test instead of warning when doing strange stuff (next-next, etc...)
• Handle errors in responses
• Handle errors thrown in any callback, ensure backend errors are handled too
• Need a better way to handle type exporting

Internal Events

event:name	from	to	payload	description
cy.route() Events
route:added	driver	server	AddRouteFrame
HTTPController Events
http:request:received	server	driver	CyIncomingRequest	fired when HTTP proxy receives headers + body of request
http:request:continue	driver	server	CyIncomingRequest	fired when driver is done modifying request and wishes to pass control back to the proxy
http:response:received	server	driver	CyIncomingResponse	fired when a response is received and the driver has a req.reply callback registered
http:response:continue	driver	server	CyIncomingResponse	fired when driver is done modifying response/driver callback completes, passes control back to proxy
http:request:complete	server	driver		fired when a response has been sent completely by the server to an intercepted request

PR Tasks

• Have tests been added/updated?
• Has the original issue been tagged with a release in ZenHub?
• Has a PR for user-facing changes been opened in cypress-documentation? Network Stubbing Documentation cypress-documentation#2854
• Have API changes been updated in the type definitions?
• Have new configuration options been added to the cypress.schema.json?

[mikeastock]

When is this targeted to be released?

[cypress]

---

Test summary

8341 • 0 • 124 • 3

---

Run details

Project	cypress
Status	Passed
Commit	cc357f9
Started	Aug 27, 2020 7:19 PM
Ended	Aug 27, 2020 7:30 PM
Duration	11:04 💡
OS	Linux Debian - 10.2
Browser	Multiple

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[Mouvedia]

200+ commits PRs
I pity the reviewers.

[vivekbwaj]

When is the new version going to be released with full network stubbing support?

[dipjyotimetia]

Looking forward for the new releases having the full network layer stubbing.

[DylanSp]

Release 5.1.0 has the experimental support from this PR.

[kumar303]

I just came to say THANK YOU @flotwig and team. I could not get fetch stubbing to work with any of the previous workarounds but in 5.1.0 it is working flawlessly with cy.route2().

[Andarist]

We had a pretty hacky (but very much working) setup for mocking JSONP and OAuth requests and also some hacks for dynamic responses. That's all gone with the new API - thank you very much.

Not only it has new capabilities but is IMHO actually easier to use. Great work 🚀

[redReno]

This is working perfect for us. Fetch requests were blocking our tests but now it's not an issue. Thanks!

[hiran47]

This is a lifesaver and thank you so much for this 🙏

Few questions out of curiosity:

1. What's your plan in promoting this from experimental feature to a core feature?
2. Will route2 become route eventually?
3. Any tentative date/timeline for above?

[flotwig]

1. What's your plan in promoting this from `experimental feature` to a `core feature`?

@hkar9113 This is going to be promoted from "experimental" in the next major release of Cypress, 6.0.0. #9185

2. Will `route2` become `route` eventually?

With 6.0.0, route2 will be renamed to cy.http. #9182 We thought about replacing cy.route but determined it would cause more harm than good (old documentation would be confusing and it would break backwards-compatibility for folks who still want to use the XHR-based stubbing)

With 6.0.0, we will begin to encourage users to use cy.http over cy.route. Once all major use cases/bugs are ironed out with cy.http, cy.route will be cut out of the Cypress core and moved to a plugin for those who wish to use it moving forward, but this will not be until (at the earliest) Cypress 7.0.0.

3. Any tentative date/timeline for above?

Cypress 6.0.0 is scheduled to come out next week.

[TheNumbaCruncha]

Hi guys , sorry if i'm on the wrong thread here but basically what i want to do is stub every outgoing request with header that has a dynamic parameter where the test stored in the cypress\integration folder is setting the parameter

Basically we have this functionality today for a constant header on this page https://docs.cypress.io/api/commands/intercept#Intercepting-a-request

section
Add, modify or delete a header to all outgoing requests

so something like
beforeEach(() => {
cy.intercept(
{ url: 'http://localhost:3001/**', middleware: true },
(req, dynamic parameter) => //do something with dynamic parameter
)
})

[flotwig]

@TheNumbaCruncha yes, you can do that with this feature. I'm not sure what your "dynamic parameter" is - this seems like a JS question, maybe try StackOverflow or GitHub Discussions, this is a pull request comment thread.