Top 10 Essential Cypress Coding Questions and Answers for Web Testing

1. How do you visit a URL and verify its title in Cypress?

Question:
Write a Cypress test to visit the URL https://example.cypress.io and verify that the page title is “Cypress.io: Kitchen Sink”.

Answer:

describe('Visit URL and Verify Title', () => {
  it('should visit the URL and verify the title', () => {
    cy.visit('https://example.cypress.io');
    cy.title().should('eq', 'Cypress.io: Kitchen Sink');
  });
});

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

Question:
Write a Cypress test to check if an element with class .header contains the text “Welcome”.

Answer:

describe('Check Element Text', () => {
  it('should check if the header contains the text "Welcome"', () => {
    cy.visit('https://example.cypress.io');
    cy.get('.header').should('contain', 'Welcome');
  });
});

3. How do you fill out a form and submit it?

Question:
Write a Cypress test to fill out a form with fields username and password, and then submit the form.

Answer:

describe('Fill Out Form and Submit', () => {
  it('should fill out the form and submit it', () => {
    cy.visit('https://example.cypress.io');
    cy.get('#username').type('myUsername');
    cy.get('#password').type('myPassword');
    cy.get('form').submit();
  });
});

4. How do you interact with a dropdown menu?

Question:
Write a Cypress test to select the option “Option 2” from a dropdown menu with the ID #dropdown.

Answer:

describe('Interact with Dropdown Menu', () => {
  it('should select "Option 2" from the dropdown menu', () => {
    cy.visit('https://example.cypress.io');
    cy.get('#dropdown').select('Option 2');
  });
});

5. How do you handle a file upload?

Question:
Write a Cypress test to upload a file example.txt to an input field with the ID #file-upload.

Answer:

describe('Handle File Upload', () => {
  it('should upload a file', () => {
    cy.visit('https://example.cypress.io');
    cy.get('#file-upload').attachFile('example.txt');
  });
});

6. How do you handle alerts?

Question:
Write a Cypress test to handle a JavaScript alert and verify its message is “Alert Message”.

Answer:

describe('Handle Alerts', () => {
  it('should handle the alert and verify its message', () => {
    cy.visit('https://example.cypress.io');
    cy.window().then((win) => {
      cy.stub(win, 'alert').as('alert');
    });
    cy.get('#alert-button').click();
    cy.get('@alert').should('be.calledWith', 'Alert Message');
  });
});

7. How do you check if an element is visible?

Question:
Write a Cypress test to check if an element with the ID #visible-element is visible on the page.

Answer:

describe('Check Element Visibility', () => {
  it('should check if the element is visible', () => {
    cy.visit('https://example.cypress.io');
    cy.get('#visible-element').should('be.visible');
  });
});

8. How do you perform mouse hover action?

Question:
Write a Cypress test to hover over an element with the ID #hover-element.

Answer:

describe('Perform Mouse Hover Action', () => {
  it('should hover over the element', () => {
    cy.visit('https://example.cypress.io');
    cy.get('#hover-element').trigger('mouseover');
  });
});

9. How do you handle a network request?

Question:
Write a Cypress test to intercept a GET request to /api/data and mock its response.

Answer:

describe('Handle Network Request', () => {
  it('should intercept and mock a GET request', () => {
    cy.intercept('GET', '/api/data', { fixture: 'data.json' }).as('getData');
    cy.visit('https://example.cypress.io');
    cy.wait('@getData').its('response.statusCode').should('eq', 200);
  });
});

10. How do you check if an element has a specific class?

Question:
Write a Cypress test to check if an element with the ID #my-element has the class active.

Answer:

describe('Check Element Class', () => {
  it('should check if the element has the class "active"', () => {
    cy.visit('https://example.cypress.io');
    cy.get('#my-element').should('have.class', 'active');
  });
});