Top 50 Cypress Interview Questions And Answers In 2024

Rate this interview

Hello Testers! In the current IT market, Cypress automation tool is trendy. most of the company using Cypress tool for the automation and they are looking for candidates who has hands-on experience on cypress.

That’s why I have collected real-time “Cypress interview questions”, which will help you crack the interviews.

If you are new to Cypress and familiar with Selenium, then you can find Difference between Cypress and Selenium.

All the best!

1. Write a Cypress test to visit a website and assert the title.

Table of Contents

it('should have the correct title', () => {
  cy.visit('https://example.com');
  cy.title().should('eq', 'Example Domain');
});

2. How do you perform a login test using Cypress?

it('should log in with valid credentials', () => {
cy.visit('https://example.com/login');
cy.get('input[name="username"]').type('myusername');
cy.get('input[name="password"]').type('mypassword');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');
});

3. Write a Cypress test to interact with a dropdown menu and select an option.

it('should select an option from a dropdown', () => {
  cy.visit('https://example.com');
  cy.get('select').select('Option 2');
});

4. How do you perform API testing with Cypress?

it('should make an API request', () => {
  cy.request('GET', 'https://jsonplaceholder.typicode.com/users/1')
    .its('body')
    .should('have.property', 'name');
});

5. Write a Cypress test to upload a file.

it('should upload a file', () => {
  cy.visit('https://example.com/upload');
  const fileName = 'example.txt';
  cy.fixture(fileName).then(fileContent => {
    cy.get('input[type="file"]').attachFile({
      fileContent,
      fileName,
      mimeType: 'text/plain'
    });
  });
  cy.get('button[type="submit"]').click();
});

6. How do you handle assertions in Cypress?

it('should assert element visibility', () => {
  cy.visit('https://example.com');
  cy.get('h1').should('be.visible');
});

7. Write a Cypress test to handle a confirmation dialog.

it('should handle a confirmation dialog', () => {
  cy.visit('https://example.com');
  cy.on('window:confirm', () => true); // Always confirm
  cy.get('button').click();
});

8. How do you check if an element contains specific text?

it('should check if an element contains text', () => {
  cy.visit('https://example.com');
  cy.contains('h1', 'Welcome');
});

9. Write a Cypress test to perform a Google search.

it('should perform a Google search', () => {
  cy.visit('https://www.google.com');
  cy.get('input[name="q"]').type('Cypress testing{enter}');
  cy.contains('h3', 'Cypress - JavaScript End to End Testing Framework');
});

10. How do you create a custom command in Cypress?

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

11. Write a Cypress test to interact with checkboxes.

it('should check checkboxes', () => {
  cy.visit('https://example.com');
  cy.get('input[type="checkbox"]').check();
});

12. How do you set up a beforeEach hook in Cypress?

beforeEach(() => {
  cy.visit('https://example.com');
});

13. Write a Cypress test to handle a date picker.

it('should select a date from a date picker', () => {
  cy.visit('https://example.com/datepicker');
  cy.get('input[name="date"]').type('2023-10-05');
});

14. How do you handle iframes in Cypress?

it('should interact with elements inside an iframe', () => {
  cy.visit('https://example.com/iframe');
  cy.get('iframe').then($iframe => {
    const body = $iframe.contents().find('body');
    cy.wrap(body).find('button').click();
  });
});

15. Write a Cypress test to handle tabs/windows.

it('should handle opening a new tab', () => {
  cy.visit('https://example.com');
  cy.get('a[target="_blank"]').invoke('removeAttr', 'target').click();
  cy.url().should('include', '/new-page');
});

Subscribe to Our LinkedIn Newsletter

Subscribe Now

16. How do you perform visual regression testing with Cypress?

it('should perform visual regression testing', () => {
  cy.visit('https://example.com');
  cy.matchImageSnapshot();
});

17. Write a Cypress test to handle a drag-and-drop interaction.

it('should perform a drag-and-drop', () => {
  cy.visit('https://example.com/drag-drop');
  cy.get('.draggable').trigger('dragstart');
  cy.get('.droppable').trigger('drop');
});

18. How do you simulate network conditions in Cypress?

it('should simulate a slow network', () => {
  cy.visit('https://example.com');
  cy.intercept('https://example.com/api/**', { delayMs: 2000 }).as('apiCall');
  cy.get('button').click();
  cy.wait('@apiCall');
});

19. Write a Cypress test to perform pagination testing.

it('should navigate through pagination', () => {
  cy.visit('https://example.com/pagination');
  cy.get('.next-page').click();
  cy.get('.current-page').should('contain.text', '2');
});

20. How do you run Cypress tests in headless mode?

npx cypress run --headless

Also, Read Top 13 Cypress Testing Interview Questions and Answers

21. Write a Cypress test to perform a login with invalid credentials and verify the error message.

it('should display an error message for invalid login', () => {
  cy.visit('https://example.com/login');
  cy.get('input[name="username"]').type('invalidusername');
  cy.get('input[name="password"]').type('invalidpassword');
  cy.get('button[type="submit"]').click();
  cy.contains('.error-message', 'Invalid credentials');
});

22. How do you handle dynamic content in Cypress?

it('should handle dynamic content', () => {
  cy.visit('https://example.com/dynamic-content');
  cy.get('.dynamic-element').should('exist');
});

23. Write a Cypress test to perform a search and verify the results.

it('should perform a search and verify results', () => {
  cy.visit('https://example.com/search');
  cy.get('input[name="search"]').type('Cypress testing{enter}');
  cy.get('.search-results').should('have.length.greaterThan', 0);
});

24. How do you create a custom command to handle login?

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

25. Write a Cypress test to validate the presence of specific elements on a page.

it('should validate the presence of elements', () => {
  cy.visit('https://example.com');
  cy.get('h1').should('exist');
  cy.get('button').should('have.length.greaterThan', 0);
});

26. How do you handle environment variables in Cypress?

You can set environment variables using the CYPRESS_ prefix, like CYPRESS_BASE_URL.

27. Write a Cypress test to validate the status code of an API request.

it('should validate the status code of an API request', () => {
  cy.request('GET', 'https://jsonplaceholder.typicode.com/users/1')
    .its('status')
    .should('eq', 200);
});

28. How do you simulate different viewport sizes in Cypress?

it('should simulate different viewport sizes', () => {
  cy.viewport(320, 480); // Set viewport size to mobile
  cy.visit('https://example.com');
});

29. Write a Cypress test to interact with a dynamic table.

it('should interact with a dynamic table', () => {
  cy.visit('https://example.com/table');
  cy.get('table').contains('tr', 'Row 2').contains('td', 'Edit').click();
});

30. How do you handle multiple assertions in a single test?

it('should perform multiple assertions', () => {
  cy.visit('https://example.com');
  cy.get('h1').should('exist');
  cy.get('button').should('have.length.greaterThan', 0);
});

Want to download Cypress Cheatsheet PDF free

31. Write a Cypress test to handle a form submission with validation.

it('should handle form submission with validation', () => {
  cy.visit('https://example.com/form');
  cy.get('input[name="username"]').type('myusername');
  cy.get('input[name="email"]').type('invalidemail');
  cy.get('button[type="submit"]').click();
  cy.contains('.error-message', 'Invalid email address');
});

32. How do you use aliases in Cypress?

Aliases in Cypress allow you to save and reuse DOM elements or values throughout a test.

For example:

it('should use aliases', () => {
  cy.visit('https://example.com');
  cy.get('h1').as('pageTitle');
  cy.get('@pageTitle').should('have.text', 'Welcome');
});

33. Write a Cypress test to handle a time picker.

it('should select a time from a time picker', () => {
  cy.visit('https://example.com/timepicker');
  cy.get('input[name="time"]').type('14:30');
});

34. How do you perform cross-browser testing with Cypress?

Cypress supports running tests in multiple browsers using the --browser flag.

For example:

npx cypress run --browser chrome

35. Write a Cypress test to perform a logout.

it('should log out', () => {
  cy.visit('https://example.com/dashboard');
  cy.get('button#logout').click();
  cy.url().should('include', '/login');
});

36. How do you handle dynamic URLs in Cypress?

You can use regular expressions or wildcards in cy.visit() to handle dynamic parts of URLs.

it('should handle dynamic URLs', () => {
  cy.visit('https://example.com/users/*/profile');
});

37. Write a Cypress test to handle a multi-select dropdown.

it('should handle a multi-select dropdown', () => {
  cy.visit('https://example.com/multiselect');
  cy.get('select').select(['Option 1', 'Option 2']);
});

38. How do you set up a Cypress project from scratch?

You can set up a new Cypress project using the following commands:

mkdir my-cypress-project
cd my-cypress-project
npm init -y
npx cypress open

39. Write a Cypress test to handle a tooltip.

it('should interact with a tooltip', () => {
  cy.visit('https://example.com/tooltip');
  cy.get('.tooltip-trigger').trigger('mouseover');
  cy.get('.tooltip').should('be.visible');
});

40. How do you handle navigation in Cypress?

it('should navigate to a different page', () => {
  cy.visit('https://example.com');
  cy.contains('a', 'Contact').click();
  cy.url().should('include', '/contact');
});

41. Write a Cypress test to handle a dynamically generated list.

it('should handle a dynamically generated list', () => {
  cy.visit('https://example.com/dynamic-list');
  cy.get('.add-item').click();
  cy.get('.list-item').should('have.length', 1);
});

42. How do you perform API testing with Cypress using fixtures?

You can use fixtures to provide sample data for your API tests.

Here’s an example:

it('should test an API with fixture data', () => {
  cy.fixture('sample-data.json').then(data => {
    cy.request('POST', 'https://example.com/api/endpoint', data)
      .its('body')
      .should('have.property', 'status', 'success');
  });
});

43. Write a Cypress test to handle a tabbed interface.

it('should interact with a tabbed interface', () => {
  cy.visit('https://example.com/tabs');
  cy.contains('.tab-button', 'Tab 2').click();
  cy.get('.tab-content.active').should('contain.text', 'Tab 2 Content');
});

44. How do you handle cookies in Cypress?

You can use cy.setCookie() to set a cookie, and cy.getCookie() to retrieve a cookie.

it('should handle cookies', () => {
  cy.visit('https://example.com');
  cy.setCookie('token', 'abc123');
  cy.getCookie('token').should('have.property', 'value', 'abc123');
});

45. Write a Cypress test to perform a search with autocomplete suggestions.

it('should perform a search with autocomplete', () => {
  cy.visit('https://example.com/search');
  cy.get('input[name="search"]').type('Cypress');
  cy.get('.autocomplete-suggestion').first().click();
  cy.get('.search-results').should('have.length.greaterThan', 0);
});

46. How do you handle random data in Cypress tests?

const randomUsername = `user_${Math.floor(Math.random() * 1000)}`;
cy.get('input[name="username"]').type(randomUsername);

47. Write a Cypress test to handle a progress bar.

it('should interact with a progress bar', () => {
  cy.visit('https://example.com/progressbar');
  cy.get('button').click();
  cy.get('.progress-bar').should('have.css', 'width', '100%');
});

48. How do you handle window scrolling in Cypress?

You can use cy.scrollTo() to scroll to a specific element or position on the page.

it('should scroll to a specific element', () => {
  cy.visit('https://example.com');
  cy.get('.scroll-target').scrollIntoView();
});

49. Write a Cypress test to handle a pop-up modal.

it('should interact with a pop-up modal', () => {
  cy.visit('https://example.com/modal');
  cy.get('button#open-modal').click();
  cy.get('.modal-content').should('be.visible');
  cy.get('.modal-close-button').click();
});

50. How do you handle network conditions in Cypress to test a slow network?

You can use cy.intercept() to simulate a slow network response.

it('should simulate a slow network', () => {
  cy.visit('https://example.com');
  cy.intercept('https://example.com/api/**', { delayMs: 2000 }).as('apiCall');
  cy.get('button').click();
  cy.wait('@apiCall');
});