60+ Cypress Interview Questions

How to handle reusability in the Cypress framework?

In Cypress, we have several options for handling reusability. One approach is to use custom commands, allowing us to create reusable functions and actions that can be called from anywhere in our tests. Using the Cypress Page Object Model design pattern, we can also use fixtures to store reusable test data or create reusable page objects.

How to perform API testing in Cypress?

Performing Cypress API testing is straightforward, and you can use the built-in cy.request() command to do so. The following example shows how to perform an API test in Cypress:

// cy.request({
                                                method: 'POST', 
                                                url: '/api/boards', 
                                                body: {
                                                    name: 'space travel plan'
                                                }
                                                })
                                            

How to execute tests in order in Cypress?

In order to execute Cypress tests, it is necessary to put all the file names in the desired order in the Cypress.JSON file under the testFiles property section.

How many types of assertions are available in Cypress?

Cypress uses the following assertions:

• Chai BDD Assertions: not, include, equal etc.
• Chai TDD Assertions: .isOK(), .isTrue() etc.
• Chai JQuery Assertions: visible, hidden, selected etc.
• Sinon-Chai Assertions: called, callCount etc.

Also, we can write our own assertions using Chai assertions.

How is the test data maintained in Cypress?

The Cypress Fixture command lets you load a fixed set of data in a file to maintain test data in Cypress. The fixture directory stores various "JSON" files, and these JSON files can store the test data, which multiple tests can read. You can store test data in the form of key values, enabling you to access it during scripting.

Also Read: A list of 70 Cucumber Interview Questions and Answers

What are hooks in Cypress?

Hooks in Cypress let you run code at specific points in your test suite or test case. They provide a way to set up and tear down test fixtures, perform actions before or after each test, and modify test behavior dynamically.

There are several types of hooks available in Cypress:

• `before()`: Before all tests in a suite, the before() hook is commonly used to set up fixtures and dependencies required for all tests in the suite.
• `after()`: This hook runs after all tests in the current suite have been completed. It is commonly used to clean up after tests, such as deleting temporary files or resetting factory settings.
• `beforeEach()`: This hook is commonly used to reset the application's state or perform any required tasks before each test.
• `afterEach()`: This hook runs after each test in the current suite has been completed. It is commonly used for cleanup tasks such as cleaning up any state or resources created by tests.

Hooks provide a way to ensure that your tests are properly set up and cleaned up and that any dependencies or fixtures are properly managed. This can help reduce test flakiness and make your tests more reliable.

Can we use BDD with Cypress?

Yes, Cypress can be used with Behavior-Driven Development (BDD) to write tests in a more human-readable format that also aligns with your business goals. Cypress, a testing framework for web applications, has adopted Mocha's BDD syntax, which fits perfectly with integration and unit testing. Also, it can be integrated with Cucumber using Plugin.

How to interact with DOM elements in Cypress?

If you want to interact with DOM elements, you can use CSS selectors. Also, many built-in commands can be used to interact with elements. If you want to use XPath, you must install an external plugin.

Does Cypress use Mocha?

Yes, Cypress uses Mocha as its default testing framework. Cypress extends Mocha with additional features specific to browser testing, such as the ability to interact with the DOM, make network requests, and capture screenshots and videos of test runs.

Which command is used in Cypress to manage the behavior of network requests?

We should use Cypress.navigate() method instead of Cypress.spy() and stub network requests and responses. Earlier, we used Cypress.route() for network behavior, but that function has been deprecated in Cypress 6.0.0 and will be removed in future releases.

Cypress is built on which language?

Cypress is a JavaScript testing framework that uses Node.js and is available as an npm module. It uses JavaScript because it is based on Node.js.

What browsers are supported by Cypress?

Cypress supports Chrome-family browsers (including Electron and Chromium-based Microsoft Edge), Firefox, and Opera.

What are the components of Cypress?

Cypress has three main components:

• Cypress Test Runner: Cypress Test Runner is a modern test runner built on top of WebDriver and Node.js that allows you to write, run, and debug tests in real time.
• Cypress Command Line Interface (CLI): The Cypress Command Line Interface (CLI) is a command-line tool that allows you to run your tests from the terminal and perform other tasks like installing and updating Cypress, managing configuration options, and generating reports.
• Cypress Application Programming Interface (API): The Cypress API is a set of JavaScript commands that allows you to interact with the browser and the application under test. The API provides a simple and intuitive way to write tests that simulate user behavior and make network requests.

Explain Cypress Architecture.

Cypress runs in the background of the browser, while Node.js runs in the background of Cypress. The two programs regularly interact and perform actions that support each other.

Cypress has access to the front and back end of the application, allowing it to alter the browser behavior at run time. It can handle DOM and modify requests and responses of the network on the fly.

What is Cypress ecosystem?

Cypress is a free and open-source test runner that allows you to write, run, and debug your tests locally while building your application. Cypress supports TDD by helping you set up and start writing tests while building your application locally. You can record your tests with Cypress Dashboard Service, which runs after building up a suite of tests and integrating Cypress with your CI provider.

What are the features of Cypress?

Some key features of Cypress include:

• Automatic Waiting: Cypress has the feature of automatically waiting for commands and assertions, which helps to eliminate flaky tests and reduce the need for manual waits.
• Time-travel Debugging: Cypress allows you to pause your test at any point and see the state of your application and test in real time. This makes debugging easier and less time-consuming than with other methods.
• Real-time Reloading: Cypress automatically reloads your tests and application as you make changes, saving you from having to manually start a new test run each time you want to see the results of your changes.
• Easy Setup: Cypress is easy to set up and get started with, and it requires minimal configurations.
• Support for Multiple Browsers: Cypress supports multiple browsers, including Chrome, Firefox, and Edge, making it easier to test your application across different platforms and devices.

How to access shadow DOM in Cypress?

Shadow DOM allows you to create an inner structure for an element that is not visible from the outside but can be accessed from within the element. Shadow DOM has been used for some time by browsers to encapsulate the inner structure of an element. The shadow() function handles shadow DOM:

cy.get('#locator').shadow().find('.nb-btn').click()
                                            

How can I get the first and last child of the selected element in Cypress?

The .first() and .last() commands in Cypress can be used to select a selected element's first and last child elements. This is demonstrated in the following example:

// Get the first child of a selected element
                                                cy.get('ul li').first()

                                                // Get the last child of a selected element
                                                cy.get('ul li').last()
                                            

The above example uses the get() method to select all the li elements that are children of the ul element and then uses first() and last() commands to select the first and last child elements, respectively.

How to use sleep in Cypress?

The `cy.wait()` command can be used to pause a test for a specified amount of time. This command can be used to simulate a delay, such as waiting for an element to load or for a request to complete.

How to read the value from the Cypress Configuration file?

Cypress allows you to store and access configuration values in a `cypress.json` file located at the root of your project directory. You can then use these values in your tests using the `Cypress.config()` method.

How to press keyboard keys in Cypress?

You can simulate keyboard input in Cypress by typing `cy.type()` command into an element or pressing specific keys on the keyboard. To simulate pressing a specific key on the keyboard, use the `` syntax with the `cy.type()` command to pass the corresponding key code.

How to create our custom commands in Cypress?

Cypress allows you to create custom commands using the `Cypress.Commands.add()` method, which encapsulates repetitive or complex functionality into reusable commands, making your tests more readable and maintainable.

How to preserve cookies in Cypress?

By default, Cypress clears all cookies before each test to ensure a clean slate. However, there are times when you want to preserve cookies between tests or even across different test runs. You can use the `cy.getCookies()` and `cy.setCookie()` commands to do this.

How can I change the baseUrl in Cypress dynamically?

Changing the `baseUrl` dynamically in your test code using `Cypress.config()` method allows you to set the `baseUrl` to a different value depending on the test scenario, making your tests more flexible and reusable.

You can override the same using the command line:

npx cypress run --config baseUrl="https://www.lambdatest.com/"
                                            

What is the environment variable in Cypress?

When writing Cypress tests, environment variables can be used to store sensitive data such as API keys or credentials and to configure your tests based on the environment in which they are running.

There are various ways to set environment variables, such as using the `cypress.json` configuration file, command line arguments, or an environment-specific configuration file. Once set, these variables can be accessed in your test code using `Cypress.env().`

How to use XPath in Cypress?

Cypress, unlike other testing frameworks, does not natively support XPath selectors. But you can use the `cy.xpath()` command provided by the `cypress-xpath` plugin to select elements using XPath expressions.

What are the selectors supported by Cypress?

Cypress supports several types of selectors that can be used to locate and interact with elements on a web page. Here are some examples of selectors Cypress supports:

• cy.get()
• cy.contains()
• cy.find()
• cy.parent()
• cy.next()
• cy.prev()
• cy.eq()

How do you verify text on a new open window that opens after clicking on a link on the current window?

Cypress does not support working in a new window. You need to open a new window in the same tab only. To do this, remove the attribute target from the link element.

Use this command:

<a href="https://www.lambdatest.com" target="_blank">Welcome to LambdaTest</a>
                                            

This link will open LambdaTest in a new window because of the target="_blank" attribute. To remove this attribute, use the code below:

cy.get('a[href*="lambdatest"]').invoke('removeAttr', 'target').click()
                                            

After removing the attribute, you can open LambdaTest in a new window with the click function.

List 5 cypress commands which can be used to interact with DOM elements.

Here are five Cypress commands that can be used to interact with DOM elements:

• cy.get(): This command is used to get a reference to a DOM element(s) so that it can be interacted with further.
• cy.click(): This command simulates a click event on a DOM element.
• cy.type(): This command simulates typing text into a form field or other input element on the page.
• cy.clear(): This command is used to clear the contents of an input field or text area.
• cy.select(): This command is used to select an option from a dropdown menu.

These commands can be combined with the various selectors supported by Cypress to target specific DOM elements and interact with them in different ways.

How to click on the button in Cypress?

To simulate a click on a button in Cypress, use the cy.get() command to select the button element and then use the cy.click() command. Here's an example:

// Find the button by its ID attribute cy.get('#my-button').click()
                                            

// Find the button by its class name cy.get('.my-button-class').click()

                                            

// Find the button by its text content cy.contains('Click Me').click()

                                            

How to create suites in Cypress?

You can create test suites in Cypress by grouping related tests into separate files and folders. Each file or folder can be considered a separate test suite.

• Create a new file or folder for your test suite. Grouping tests by feature or functionality makes it easy to find the tests you need when you need them.
• To write your tests, add them to the files for your test suite. Use any of the Cypress commands to interact with the DOM and make assertions about your application's behavior.
• To add your test files to Cypress, add the path to your tests to the cypress.json configuration file. In this file, add a testFiles property with an array of file paths to your test files.
• Run your test suite using the Cypress Test Runner. To do this, run the Cypress open command in your terminal and then select your test suite from the Cypress Test Runner. From there, you can run your tests.

How to check the default configuration in Cypress?

To check the default configuration in Cypress, open the `cypress.json` file located in the root of your project. This file contains the default settings for Cypress.

If you have not already created a `cypress.json` file in your project, you can create one by running the Cypress Test Runner and clicking the Settings button in the window's top right corner. This will generate a `cypress.json` file with default values.

I am new to Cypress, I wanted to setup and execute my first script. Could you help me with that?

You can follow these steps to setup and run your first Cypress test script:

• Install Cypress
• Create your spec file
• Use describe() block
• Use it() block for test script
• Open cypress
• Execute manually by selecting the test case or execute using the command line.

How to run a single specfile using the command line in Cypress?

To run a single spec file in Cypress using the command line, you can use `cypress run --spec` followed by the path to your spec file. An example command would be:

cypress run --spec cypress/integration/my-spec.js
                                            

Here, we're running the Cypress run command and specifying the `--spec` flag, followed by the path to our spec file `(cypress/integration/my-spec.js)`. This will run only that file's tests.

What is Cypress CLI?

The Cypress CLI (Command Line Interface) is a set of commands that allows you to interact with Cypress from the command line, run tests, open the Cypress Test Runner and manage your Cypress installation.

We can install the Cypress CLI by using NPM by running the following command in your terminal:

npm install cypress -g
                                            

Could you describe the Cypress folder structures?

When you install Cypress, it will create a recommended folder structure for you. This is helpful because there are four major folders:

• Fixture: A fixture is a collection of data that can be used throughout the testing process. The data is typically stored in JSON format but can also be stored in CSV, XML, or any other convenient format.
• Integrations: Integration is the main folder where you'll keep your tests. All your test files will be here. You can write tests in .js, .jsx, .coffee, or .cjsx.
• Plugins: It has its own index.js file. You can put your custom plugin code here.
• Support: The support folder contains two files: commands.js and index.js.

How can I open the Cypress window and execute tests?

We can follow the below steps to open the Cypress Test Runner and execute tests.

• Open a terminal or command prompt and navigate to the directory where your project is stored.
• Run the command `npm install cypress --save-dev` to ensure that Cypress is installed in your project.
• Once you have Cypress installed, run the command `npx cypress open` and the Cypress Test Runner will launch a new window containing its UI.
• From the Test Runner UI, you can select a test file from the integration folder to run by clicking on it. You can also run a specific test by clicking on its name.
• When you run tests, the results appear in the Test Runner UI. The UI allows you to debug failed tests, re-run tests on different environments, or run your tests again.

Which testing framework does Cypress support?

Cypress is a JavaScript testing framework based on Mocha, but it adds some unique functionality. For example, Cypress can interact with the browser and the DOM to provide a more robust and intuitive experience than other test runners.

What are the advantages or benefits of Cypress?

Here are some of the advantages of using Cypress:

• Cypress is designed to be fast, reliable, and easy to use. It runs tests in parallel and automatically retries failed tests. This can reduce the time and effort needed to run tests and identify issues.
• Cypress is simple to install and use, with a straightforward installation process and syntax for writing tests. The Cypress Test Runner provides a friendly user interface for running and debugging tests.
• Cypress allows you to interact with the browser and the DOM, making it easy to test complex user interactions and behaviors. This can help ensure your web application is responsive to user input and performs well.
• Cypress enables real-time reloading, so you can see changes to your code and test results without having to reload the page or restart tests manually. This can streamline the testing process and help identify and fix issues faster.

What are the disadvantages of using Cypress?

Here are some of the disadvantages of using Cypress:

• It does not support multiple tabs.
• There is a workaround present, but it is not ideal.
• You cannot use multiple instances of a browser simultaneously.
• Cypress does not support Safari and Internet Explorer Driver.
• Mobile testing is also not supported by Cypress.

Could you tell me about some differences between Cypress and Selenium?

Here is the difference between Cypress and Selenium:

• Cypress is a JavaScript-based testing tool that runs directly in the browser, while Selenium is a client-server architecture that uses a WebDriver API to interact with the browser. This means Cypress can provide faster and more reliable testing results, while Selenium may have more setup and configuration requirements.
• Cypress is designed to provide a simpler, easier way to perform complex user interactions and behaviors. Selenium's API can be more complex and require more advanced programming skills.
• Cypress uses various debugging tools, including real-time reloading, automatic retries, and snapshots. These features make it easy to identify and fix issues in your tests. Selenium provides fewer debugging tools, so you may need to intervene manually more often.
• Selenium provides built-in support for cross browser testing, making it easy to test your application across different browsers and platforms. Cypress is currently only officially supported on Chrome and Firefox.

Can I use Cypress framework with other languages like C#, Java, or PHP?

You can use the Cypress framework to build automated tests for your applications, no matter what programming language they are written in. Cypress is a testing framework that uses JavaScript as its primary programming language, but it can interact with other languages and libraries through its APIs.

Cypress allows you to write tests for your web application using any programming language that can make HTTP requests or use WebSockets. You can use Cypress APIs to write tests in any language that supports HTTP or WebSocket libraries.

How Cypress architecture is different from Selenium?

Here are some key differences between the architectures of Cypress and Selenium:

As the application is under test, Cypress runs in the same run loop allowing it to execute code alongside it. This architecture makes Cypress faster and more efficient than Selenium, which uses a client-server architecture that requires communication between the test script and the browser via a WebDriver server.

Cypress controls the browser directly, while Selenium uses WebDriver to send commands to the browser. This means that Cypress can bypass limitations imposed by WebDriver and provide more significant support for certain browser APIs than possible using only WebDriver.

Cypress provides an interactive test runner that lets developers see what's happening in their tests in real time. This makes debugging easier and more efficient. Selenium, on the other hand, relies on third-party tools for debugging.

Selenium and Cypress are two different frameworks that support software testing differently. Selenium supports a wide range of programming languages, while Cypress is primarily a JavaScript framework. Although Cypress can be used with other languages, it is most effective with JavaScript.

What is cy.contains command?

The `cypress.contains()` command is one of the many useful features of Cypress, an open-source end-to-end testing framework for web applications. This command can be used to search for specific text content on a webpage and interact with it by using their contents. Here is an example of the same:

cy.contains('Hello')
                                                //This returns the first matching element which is
                                                having text hello
                                                cy.get('.button').contains('Clickme')
                                                //This returns element with .button class having text Click me
                                                }

How can we use browser Navigation in Cypress?

The Cypress library provides a way to navigate back and forward in browser history. The cy.go() function can be used for this purpose:

cy.go('back') or cy.go(-1) is used to navigate to previous browser history and cy.go('forward') or cy.go(1) is used to go forward in browser history.

How can I wait for an element to be visible in Cypress?

You can use the Cypress commands cy.wait() and cy.get() to wait for an element to be visible. Here's an example:

cy.get('#my-element').should('be.visible');

In the above example, the Cypress should() command is used to make an assertion that an element is visible. If the element is not visible, Cypress will automatically retry the assertion until the element becomes visible or the test times out.

How can I click the hidden element?

When an element is hidden on a page, you cannot click it directly with the cy.click() command in Cypress. However, you can use the cy.get() command with the [force: true ] option to force Cypress to click on the element, even if it is hidden. Here's an example of the same:

cy.get('#my-hidden-element').click({ force: true });

How can I get the browser Properties in Cypress?

Use the cy.state() command to get browser properties in Cypress. The cy.state() command returns an object containing information about the Cypress environment, including information about the current browser instance. Here's an example of the same:

cy.state('window').then((win) => {
                                                const browserName = win.navigator.appName;
                                                const browserVersion = win.navigator.appVersion;
                                                const userAgent = win.navigator.userAgent;
                                                // Use the browser properties as needed...
                                                });
                                                

List of some Cypress functions that will be useful for traversing DOM.

Here are some Cypress functions that are useful for traversing the DOM:

• cy.get(): To select one or more DOM elements.
• cy.contains(): To select elements based on their text content. `cy.parent()`: To select the parent element of a given element.
• cy.children(): To select the child elements of a given element.
• cy.next(): To select the next sibling element of a given element.

What is the trigger function in Cypress?

The trigger() function in Cypress programmatically simulates user interactions with the page, such as a click, mouseover, or key-down event. This can be useful in testing scenarios where you need to test the behavior of components under different circumstances.

Here's an example of how you can use the trigger() function to simulate a click event on a button element:

cy.get('button').trigger('click');

                                                

How can I use mouseover in Cypress?

In Cypress, you can simulate a mouseover event on an element by using the .trigger() method. This method accepts a string argument representing the name of the event you want to trigger, such as 'mouseover'.

To use mouseover in Cypress, select the element you want to trigger the event using the cy.get() command. Then chain the .trigger() method to simulate the event.

How can I perform dragNdrop in Cypress?

To perform drag and drop operations in Cypress, you can use the cy.get() command to select the element you want to drag, then trigger a mousedown event on that element to start the drag operation. After that, simulate a mousemove event on the element to move it to its new position, then trigger a mouseup event to drop it at its new position. Here's an example:

cy.get('.draggable')
                                                    .trigger('mousedown', { button: 0 })
                                                    .trigger('mousemove', { clientX: 100, clientY: 100 })
                                                    .trigger('mouseup')
                                                

How can I get the location Object in Cypress?

Cypress offers a cy.location() command that returns a location object for the current window. The location object contains information about the current URL, such as protocol, host, pathname and search parameters. Here's an example of how to use cy.location():

cy.location().then((loc) => {  console.log(loc.pathname)})
                                                

In this example, the cy.location() command retrieves the location object for the current window, and then the .then() method is used to access the location object's pathname property and log it to the console.

How can we filter the DOM element?

In Cypress, you can use the cy.get() command to select DOM elements, and several filtering methods are available with which to narrow down your selection based on specific criteria. These include .filter(), .eq(), .first(), .last(), and .contains().

What is after:run event in Cypress?

The `after:run` event is a built-in event in Cypress that is triggered after all test cases in a test suite have finished running. This event is useful for performing cleanup tasks or logging test results after all tests have completed. The `after:run` event is one of many built-in events available to your tests; others include `before:each` and `before:each-sandbox`.

What is cy.task() functions in Cypress?

The cy.task() function is a powerful Cypress API that allows you to execute tasks in the Node.js environment outside of the browser context. This function can be used to perform a variety of complex operations that cannot be done within the browser, such as interacting with APIs or databases, executing command-line tools, or reading and writing files.

Download Cypress Interview Questions

Note : We have compiled all Cypress Interview Question for you in a template format. Feel free to comment on it. Check it out now!!

What is cy.exec() function in Cypress?

Cypress's cy.exec() function allows you to execute a command-line command or shell script outside of the browser context. This function can be used to perform tasks that cannot be done within the browser, such as running build scripts, interacting with command-line tools, or executing system commands.

How can I read files in Cypress?

In Cypress, you can read files using the cy.readFile() and cy.fixture() functions. The cy.readFile() function reads the contents of a file from the project's file system, while the cy.fixture() function loads a fixture file, a pre-defined set of data that can be used in your tests. This can be useful if you want to work with the same source code or data set repeatedly throughout your tests without manually entering it.

How can I write a file in Cypress?

In Cypress, you can use the cy.writeFile() function to save data in your project's file system. This function takes two arguments: a string representing the path to the file you want to write, and a string containing the data you want to write to that file.

Here's a simple example of how you can use cy.writeFile() to write some text to a file:

const fileContents = 'This is some text that will be written to a file.'cy.writeFile('path/to/file', fileContents)
                                                

What are the reporter's cypress supports?

Cypress provides a range of built-in reporters that can be configured in the cypress.json configuration file or through the command line when running tests. The most commonly used reporter is the default spec reporter, which displays results in a terminal in a spec-like format, making it easy to read and analyze.

How can I debug in Cypress?

Debugging your tests can be an important part of the testing process. Cypress provides several ways to do so, including the cy.pause() command, which pauses execution at a specific point and allows you to use the browser's DevTools to debug your code.

Another handy way to debug your tests is to use the cy.debug() command. This command logs the current state of your application's DOM and Cypress commands in the Command Log, allowing you to view what's happening with your app at any given point during a test run.

What is the purpose of the cy.clearCookies() and cy.clearLocalStorage() commands in Cypress?

The cy.clearCookies() and cy.clearLocalStorage() commands in Cypress allow you to clear the cookies and local storage data of the currently focused browser window. The cy.clearCookies() command can be used to clear all cookies for a given domain, while the cy.clearLocalStorage() command can clear all data stored in local storage for a given domain.

Clearing cookies and local storage is useful when testing the behavior of a website. Clearing cookies can be used to test whether the site behaves correctly when users log out. Similarly, clearing local storage can be used to test whether the site behaves correctly when specific data is missing or deleted from the local repository.

How do you handle timeouts in Cypress tests?

Timeouts can occur in Cypress tests for a variety of reasons, such as slow network requests or heavy computations. Cypress provides several configuration options that can be used to handle these situations.

• The defaultCommandTimeout option is a configuration option that sets the default timeout for each Cypress command. If a command takes longer than this timeout, Cypress will fail the test.
• Cypress's pageLoadTimeout configuration option allows you to set the maximum amount of time Cypress will allow for a page to load before failing the test.
• The requestTimeout option configuration option sets the maximum time allowed for network requests to complete before Cypress fails the test and displays an error message.

Conclusion

In conclusion, Cypress job interviews can be challenging. But with the right resources and preparation, you can ace your following Cypress interview. We hope this blog has provided valuable insights and tips on approaching some of the most common Cypress interview questions. With determination and practice, you can take your career in test automation to the next level.

Devansh Bhardwaj works as a Product Marketing Executive at LambdaTest. With a degree in Business Administration and a keen interest in technology, he loves to write about the latest technology trends.