02 Cypress Architecture - biswajitsundara/Cypress GitHub Wiki

Cypress's architecture during a test consists of a Node.js process (the server side) and a running browser.

• There is a nodejs server which launches a browser with a proxy.
• The browser shows up with 2 iframes: One for cypress and One for application.
• Cypress is in iframe that has domain localhost and that is different from the domain of application, so the two iFrames can't talk to each other.
• So the entire application code is injected to the application iFrame so the two iframes can talk to each other.
• As a result, cypress can access all the objects like DOM, Window, LocalStorage of the application.

• The test code communicates with the Node.js process via WebSockets.
• The Node.js process acts as a proxy for every HTTP request of the browser.
• Cypress and Nodejs need communicate to each other to ask for privileges of OS, such as take screenshots or record video.
• Browser starts with proxy, it means that Nodejs controls the network layer.
• That makes it possible for Cypress to wait for requests to be fulfilled, overwrite the API response etc.

Folder Structure

When you launch the cypress.exe file for the first time in your node project, it will populate the cypress default folders.

• Fixtures : Input files should be stored under this folder like .json/.xml files
• Integration : The test scripts needs to be stored under this folder (by default java script files)
• Plugins : Plugins is to modify the internal behavior of Cypress. E.g Cucumber pre processor is added for cucumber integration
• Support : We can create custom commands/reusable methods and add it under support.
• Video : It captures the videos for cypress tests
• Cypress.json : Default cypress configuration can be overridden here. blank file means we are running it with default config.