Cypress Basics

1. What is Cypress, and how is it different from other automation tools like Selenium?

Cypress is a modern end-to-end testing framework built specifically for web applications. Unlike Selenium, which operates using the WebDriver protocol and requires separate drivers for browser automation, Cypress runs directly inside the browser using JavaScript.
Key Differences Between Cypress and Selenium:

Feature	Cypress	Selenium
Architecture	Runs inside the browser	Uses WebDriver for browser interaction
Speed	Faster (no network latency)	Slower due to network communication
Automatic Waits	Yes	No (requires explicit waits)
Debugging	Built-in time-travel debugging	Requires external debugging tools
Programming Languages	JavaScript, TypeScript	Java, Python, C#, JavaScript, etc.
Cross-Browser Testing	Limited (Chrome, Edge, Firefox, Electron)	Supports all major browsers

2. Explain the architecture of Cypress and its key components.

Cypress has a unique architecture where tests run inside the same event loop as the application. The key components include:

Test Runner: GUI that provides real-time execution and debugging.
Cypress Core: Runs inside the browser, interacting directly with DOM elements.
Node.js Server: Handles file system access, network stubbing, and database interactions.
Dashboard Service (Optional): Provides CI/CD integration and analytics.

Unlike Selenium, Cypress does not use WebDriver but instead executes commands directly within the browser, making it much faster and more reliable.

3. What are the main features of Cypress that make it suitable for modern web applications?

Runs directly inside the browser, ensuring fast execution.
Automatic waiting, removing the need for explicit waits or sleep commands.
Real-time debugging with built-in time-travel snapshots.
Network request stubbing using cy.intercept(). Easy setup with no external dependencies like WebDriver.
Supports API and UI testing in a single framework.
Supports parallel execution when integrated with Cypress Dashboard.

4. How do you install and set up Cypress in a project?

To install Cypress, run:
npm install cypress --save-dev
To open Cypress Test Runner, use: npx cypress open
This initializes a default folder structure inside the project:

cypress/integration/ → Stores test files.
cypress/fixtures/ → Stores test data (JSON files).
cypress/support/ → Stores reusable functions and custom commands.
cypress/plugins/ → Handles additional configurations.

5. How do you write a basic test in Cypress to verify that a page loads successfully?

Javascript

Copy

describe('Page Load Test', () => {
  it('Should load the homepage successfully', () => {
    cy.visit('https://example.com');
    cy.title().should('include', 'Example'); // Assertion
  });
});

Here, Cypress:

Visits a webpage using cy.visit().
Checks the page title using cy.title().should().

6. How do you handle asynchronous operations in Cypress?

Cypress automatically handles asynchronous operations and waits for elements to be available before interacting with them.
Example:

Javascript

Copy

cy.get('#username').type('admin');
cy.get('#password').type('password');
cy.get('button').click();
cy.get('.welcome-message').should('be.visible');

Here, Cypress waits for elements to appear before performing actions.

7. Explain the difference between .then() and .should() in Cypress.

.then() : Used for handling asynchronous operations manually by chaining a function.
.should() : Used for automatic re-evaluation of conditions until they pass.

Example:

Javascript

Copy

cy.get('.user-info').then(($el) => {
  console.log($el.text()); // Executes immediately once the element is found
});

cy.get('.user-info').should('contain', 'John'); // Retries until it contains "John"

.should() will automatically retry until the condition is met, while .then() does not.

8. How does Cypress handle automatic waiting, and why is it beneficial?

Cypress automatically waits for elements to:

Exist in the DOM
Become visible
Become enabled
Not be detached from the DOM

This eliminates the need for explicit wait() statements, making tests more reliable and readable.

9. How would you test an element that takes time to appear on the DOM?

Use { timeout: value } to increase wait time:

Javascript

Copy

cy.get('.delayed-element', { timeout: 10000 }).should('be.visible');

Or use should() to automatically retry until the element appears:

Javascript

Copy

cy.get('.delayed-element').should('exist').and('be.visible');

10. What is the difference between .get() and .find() in Cypress?

.get(selector) : Searches the entire document for elements.
.find(selector) : Searches within a specific parent element.

Javascript

Copy

cy.get('.parent').find('.child'); // Searches inside .parent only
cy.get('.child'); // Searches in the entire DOM

11. How do you use cy.intercept() to stub or spy on API requests?

Cypress can stub API responses to control test behavior:

Javascript

Copy

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
cy.visit('/dashboard');
cy.wait('@getUsers').its('response.statusCode').should('eq', 200);

Here:

cy.intercept() intercepts the request and returns mock data from users.json.
cy.wait('@getUsers') waits for the request to complete before continuing.

12. Explain how to use fixtures for handling test data in Cypress.

Fixtures are predefined JSON files that store test data.
Example cypress/fixtures/users.json:

Json

Copy

{
  "username": "testuser",
  "password": "password123"
}

Using fixtures in tests:

Javascript

Copy

cy.fixture('users').then((user) => {
  cy.get('#username').type(user.username);
  cy.get('#password').type(user.password);
});

13. How would you assert that a specific element is visible and contains a specific text?

Javascript

Copy

cy.get('.message').should('be.visible').and('contain', 'Welcome');

This checks if .message:

Exists in the DOM
Is visible
Contains the text "Welcome"

14. How do you perform file uploads in Cypress?

Use the cypress-file-upload plugin:
npm install cypress-file-upload --save-dev
Then use it in the test:

Javascript

Copy

import 'cypress-file-upload';

cy.get('input[type="file"]').attachFile('example.jpg');
cy.get('.upload-success').should('be.visible');