Advanced Features

Handling Waits and Timeouts

Cypress automatically waits for elements to appear on the page, but sometimes you need more control over the timing.

Implicit Waiting

Cypress waits for commands like cy.get() or cy.contains() to find elements before timing out.

Example:

cy.get('button#submit').should('be.visible'); // Automatically waits for the button to appear

Explicit Waiting

Use cy.wait() when dealing with network requests or delays.

Example:

cy.wait(2000); // Waits for 2 seconds

Time Travel

Cypress lets you "time travel" through your test steps using the Test Runner. When you click on a command in the command log, Cypress shows the state of your application at that specific step.

• Open the Cypress Test Runner.
• Run your test.
• Click on any command in the left panel to view the application state at that point.

Stubbing and Mocking

Cypress makes it easy to intercept and control network requests using cy.intercept(). This is useful for testing APIs without depending on the backend.

Mocking an API Response

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
cy.visit('/users');
cy.wait('@getUsers'); // Wait for the mocked API call

Intercepting Real Requests

cy.intercept('POST', '/api/login').as('loginRequest');
cy.get('button#login').click();
cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);

Testing Responsive Design

Cypress allows you to test how your application behaves on different screen sizes using the cy.viewport() command.

Change Screen Size

cy.viewport(1280, 720); // Set custom width and height
cy.viewport('iphone-6'); // Use predefined device settings

Example: Testing a Mobile Navigation Menu

cy.viewport('iphone-6');
cy.get('.menu-button').click();
cy.get('.mobile-nav').should('be.visible');

Testing File Uploads

You can test file uploads by simulating a file selection.

Example: Upload a File

const filePath = 'images/sample.png';
cy.get('input[type="file"]').attachFile(filePath);
cy.get('.upload-status').should('contain', 'Upload successful');

To use the .attachFile() command, you need the cypress-file-upload plugin.

Testing Downloads

You can verify that files are downloaded by intercepting network requests or checking the download folder.

Example: Verify File Download

cy.intercept('GET', '/files/sample.pdf').as('fileDownload');
cy.get('button#download').click();
cy.wait('@fileDownload').its('response.statusCode').should('eq', 200);

Working with Cookies and Local Storage

Cypress allows you to manage cookies and local storage easily.

Set and Get Cookies

cy.setCookie('session_id', '123456');
cy.getCookie('session_id').should('have.property', 'value', '123456');

Clear Local Storage

cy.clearLocalStorage();
cy.reload(); // Refresh the page to apply changes

Using Custom Commands

To avoid repeating code, you can create custom commands in the support/commands.js file.

Example: Custom Command for Login

In support/commands.js:

Cypress.Commands.add('login', (username, password) => {
  cy.get('input[name="username"]').type(username);
  cy.get('input[name="password"]').type(password);
  cy.get('button[type="submit"]').click();
});

In your test:

cy.login('testUser', 'password123');

Running Tests in Parallel

You can run multiple tests simultaneously to save time. This requires setting up the Cypress Dashboard and configuring parallelization in your CI/CD pipeline.

Example: Parallel Run

Screenshots and Videos

Cypress automatically captures screenshots and videos when tests fail. You can also take screenshots manually:

Take a Screenshot

cy.screenshot('test-page'); // Saves a screenshot with the name "test-page"

Cross-Origin Testing with cy.origin()

Cypress supports testing across multiple domains using the cy.origin() command (available in Cypress 10+).

Example: Test Login Redirect

cy.origin('https://login.example.com', () => {
  cy.get('input#email').type('test@example.com');
  cy.get('input#password').type('password123');
  cy.get('button[type="submit"]').click();
});

Popular Plugins

Expand Cypress functionality using plugins:

• Cypress Testing Library: Simplifies testing for React, Angular, and Vue apps.
• cypress-axe: Tests for accessibility issues.
• cypress-file-upload: Helps test file uploads.

Debugging with .debug()

The .debug() command pauses the test and lets you inspect the application state in your browser.

Example: Debugging an Element

cy.get('input#search').debug();

Visual Testing

Cypress integrates with visual testing tools like Percy to catch visual regressions.

Example: Visual Snapshot

cy.percySnapshot('Homepage');