Top 10 cypress programming interview questions with answers

In this article I am going to explain top 10 cypress programming interview questions with answers. These are the mostly asked interview questions for the different companies

Question 1: Write a Cypress test for a login page

Answer:

describe(‘Login Test’, () => {
it(‘should login successfully’, () => {
cy.visit(‘/login’);

cy.get('#username').type('testuser');
cy.get('#password').type('password123');

cy.get('#login').click();

cy.url().should('include', '/dashboard');
cy.contains('Welcome').should('be.visible');

});
});

Explanation:

This Cypress test verifies that a user can log in successfully. The describe() block groups the login-related test, while it() defines the specific login scenario. cy.visit('/login') navigates to the login page. cy.get('#username').type('testuser') locates the username field using its ID and enters the username, while cy.get('#password').type('password123') enters the password. cy.get('#login').click() clicks the login button. After login, cy.url().should('include','/dashboard') verifies that the user is redirected to the dashboard, and cy.contains('Welcome').should('be.visible') confirms that the Welcome message is displayed, proving that the login was successful.

Question 2: How do you select an element and enter text?

Answer:

cy.get(‘#username’).type(‘Bhaskar’);
cy.get(‘#email’).type(‘test@example.com’);

Explanation:

To select an element and enter text in Cypress, we use the cy.get() command to locate the element using a CSS selector and then use the .type() command to enter the required text. In the first statement, cy.get('#username') selects the element whose ID is username, and .type('Bhaskar') enters Bhaskar into that field. Similarly, cy.get('#email') selects the element with the ID email, and .type('test@example.com') enters the email address. This is commonly used for filling username, email, password, search, and other input fields during UI automation testing.

Question 3: Write code to select a value from a dropdown

Answer:

cy.get(‘#country’)
.select(‘India’);

cy.get(‘#country’)
.should(‘have.value’, ‘IN’);

Explanation:

To select a value from a dropdown in Cypress, we use the .select() command. In the first statement, cy.get('#country') locates the dropdown element using its id, and .select('India') selects the India option from the dropdown. The second statement verifies that the correct option has been selected by checking the dropdown’s value using .should('have.value','IN'). Here, IN is the value attribute associated with the India option. This ensures that the dropdown selection was performed correctly.

Question 4: Write a test to verify multiple products

Answer:

cy.get(‘.product’).should(‘have.length’, 5);

cy.get(‘.product’)
.each(($product) => {
cy.wrap($product)
.should(‘be.visible’);
});

Explanation:

This Cypress test verifies that multiple products are displayed on a page. cy.get('.product') locates all elements with the product class, and .should('have.length',5) verifies that exactly 5 products are present. The .each() command then iterates through each product one by one. Inside the loop, cy.wrap($product) converts the current product element into a Cypress object, and .should('be.visible') verifies that each product is visible to the user. This ensures that all 5 products exist on the page and are displayed correctly.

Question 5: Write Cypress code to intercept an API

Answer:

cy.intercept(‘GET’, ‘/api/products’).as(‘getProducts’);

cy.visit(‘/products’);

cy.wait(‘@getProducts’)
.its(‘response.statusCode’)
.should(‘eq’, 200);

Explanation:

This Cypress test demonstrates how to intercept and verify an API request. cy.intercept('GET','/api/products').as('getProducts') intercepts the GET request sent to /api/products and gives it the alias getProducts. cy.visit('/products') opens the products page, which triggers the API request. cy.wait('@getProducts') waits for the intercepted API call to complete. The .its('response.statusCode') accesses the HTTP response status code, and .should('eq',200) verifies that the API returned 200 OK, confirming that the products API request was successful.

Question 6: Write code to validate an API response

Answer:

Get Request:

cy.request(‘GET’, ‘/api/users’)
.then((response) => {
expect(response.status).to.eq(200);
expect(response.body).to.have.property(‘users’);
});

Post Request:

cy.request(‘POST’, ‘/api/login’, {
username: ‘testuser’,
password: ‘password123’
}).then((response) => {
expect(response.status).to.eq(200);
expect(response.body.token).to.exist;
});

Explanation:

This Cypress code demonstrates how to send API requests and validate their responses. In the first example, cy.request('GET','/api/users') sends a GET request to the users API. The .then((response)=>{}) block receives the API response, where expect(response.status).to.eq(200) verifies that the API returned an HTTP 200 status code. expect(response.body).to.have.property('users') verifies that the response body contains a users property, confirming that the expected data is present. In the second example, cy.request('POST','/api/login',...) sends a POST request to the login API with a username and password in the request body. The test verifies that the response status is 200 and that response.body.token exists, confirming that the login API successfully returned an authentication token.

Question 7: Write a custom Cypress command

Answer:

Command.js

Cypress.Commands.add(‘login’, (username, password) => {
cy.get(‘#username’).type(username);
cy.get(‘#password’).type(password);
cy.get(‘#login’).click();
});

Usage in Test:

cy.visit(‘/login’);

cy.login(‘testuser’, ‘password123’);

cy.url().should(‘include’, ‘/dashboard’);

Explanation:

A custom Cypress command is used to create a reusable function for common actions, which helps reduce duplicate code in test cases. In commands.js, Cypress.Commands.add('login',(username,password)=>{}) creates a custom command named login that accepts a username and password as parameters. Inside the command, cy.get('#username').type(username) enters the provided username, cy.get('#password').type(password) enters the password, and cy.get('#login').click() clicks the login button. Once the custom command is created, it can be reused in multiple test cases by calling cy.login('testuser','password123'). After the login operation, cy.url().should('include','/dashboard') verifies that the user has been successfully redirected to the dashboard.

Question 8: Write code to verify table data

Answer:

cy.get(‘table tbody tr’).each(($row) => {
cy.wrap($row).within(() => {
cy.get(‘td’).eq(0).should(‘not.be.empty’);
cy.get(‘td’).eq(1).should(‘not.be.empty’);
});
});

Explanation:

This Cypress code verifies that the data displayed in a table is not empty. cy.get('table tbody tr') selects all rows inside the table body. The .each(($row)=>{}) command iterates through each row one by one. cy.wrap($row).within(()=>{}) limits the commands inside the block to the current row. cy.get('td').eq(0).should('not.be.empty') verifies that the first column of the row contains data, while cy.get('td').eq(1).should('not.be.empty') verifies that the second column also contains data. This ensures that every table row has values in both the first and second columns.

Question 9: Write a Cypress test for a checkbox/radio button

Answer:

Validate Check the checkbox:

cy.get(‘#terms’)
.check()
.should(‘be.checked’);

Validate UnCheck the checkbox:

cy.get(‘#terms’)
.uncheck()
.should(‘not.be.checked’);

Explanation:

his Cypress code verifies the state of a checkbox. To check the checkbox, cy.get('#terms') locates the checkbox using its ID, and .check() selects it. The .should('be.checked') assertion verifies that the checkbox is successfully selected. To uncheck the checkbox, .uncheck() clears the selection, and .should('not.be.checked') verifies that the checkbox is no longer selected. This type of validation is useful for testing terms and conditions, preferences, permissions, and other checkbox controls.

Question 10: Write a data-driven Cypress test

Answer:

const users = [
{ username: ‘user1’, password: ‘pass1’ },
{ username: ‘user2’, password: ‘pass2’ },
{ username: ‘user3’, password: ‘pass3’ }
];

users.forEach((user) => {

cy.visit('/login');
cy.get('#username').type(user.username);
cy.get('#password').type(user.password);
cy.get('#login').click();

cy.url().should('include', '/dashboard');

});

Explanation:

A data-driven Cypress test is used to execute the same test scenario with multiple sets of test data. In this example, the users array contains three different username and password combinations. The forEach() method iterates through each user object and executes the login steps using that user’s credentials. cy.visit('/login') opens the login page, while cy.get('#username').type(user.username) and cy.get('#password').type(user.password) enter the corresponding username and password. cy.get('#login').click() submits the login form, and cy.url().should('include','/dashboard') verifies that the login was successful by checking that the user is redirected to the dashboard. This approach avoids writing separate test cases for each user and makes the test easier to maintain.

Watch YouTube video: Top 10 Cypress programming Questions with Answers