Cypress · Browser testing end to end
How does Cypress architecture work?
Short answer
A Node process acts as a proxy and server, while the test code runs in the browser. The spec runs in one iframe and the application under test in another, so Cypress can observe and control both.
Cypress has two main parts. The Node process starts the project, serves the spec, proxies network traffic and handles tasks such as file access and screenshots. The browser runs the spec and the application under test in separate iframes. The spec iframe holds the test code, and the AUT iframe holds the app.
Because the spec and the app share a browser but not the same document, Cypress can query the app DOM, dispatch events and read its state without using a remote protocol. The proxy is also what makes cy.intercept able to observe and rewrite requests and responses.
The moving parts
- The Node server starts specs, serves assets and performs privileged tasks
- The browser runner executes the spec iframe and displays the command log
- The AUT iframe contains the application being tested
- The proxy sits between the browser and the network for interception and mocking
- cy.task bridges browser code to Node for things the browser cannot do
it("observes the app from the spec iframe", () => {
cy.visit("/");
cy.get("[data-cy=title]").should("contain", "Dashboard");
cy.window().then((win) => {
expect(win.location.pathname).to.eq("/");
});
});Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why does Cypress run the spec and the app in separate iframes?
- 2What role does the Node proxy play?
- 3When would you use cy.task instead of browser code?
- 4Does Cypress use WebDriver?
Say it in the interview
Cypress runs a Node process that serves specs, proxies network traffic and handles privileged tasks. The browser runs the test in one iframe and the application in another. Because both are in the same browser, the test can inspect the app directly, and the proxy enables network interception. cy.task is the bridge when something needs Node, such as reading a file or seeding a database.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live Cypress mock interview and get scored feedback on depth, clarity and confidence.