Cypress: Cypress Interview questions

Cypress interview questions are commonly asked during job interviews for roles related to web development and quality assurance. These questions focus on assessing a candidate's proficiency in using the Cypress testing framework, their knowledge of JavaScript, and their ability to write effective test scripts. Interviewers may also inquire about test automation best practices and strategies for handling common testing scenarios

General questions

What is Shadow dom and how to handle those in cypress ?

Shadow DOM (Shadow Document Object Model) is a web standard that allows encapsulation of the DOM and CSS within a web component, preventing external CSS and JavaScript from affecting the component's internal structure. When working with Shadow DOM in Cypress, you might encounter challenges in selecting and interacting with elements within the shadow DOM. Cypress provides ways to interact with shadow DOM elements using its commands and APIs.
cy.get('your-element-with-shadow-dom').shadow().find('element-inside-shadow-dom').click();

What is the architecture of Cypress ?

Cypress operates within the browser
Cypress is built using JavaScript and runs within a Node.js environment.
The Cypress server is a Node.js process that runs alongside your application and the Electron-based test runner.
It acts as an intermediary between your tests and the browser.
The server listens for commands from your test scripts, communicates with the browser to perform actions, and collects data and results.

Advantages of Cypress

Real-Time Interactive Testing

Cypress provides a real-time interactive test runner that displays your application alongside your test code.
You can see what's happening in the browser as your tests run, making debugging and troubleshooting easier.

Automatic Waiting

Cypress automatically waits for elements to appear and actions to complete before executing the next step in your test.
This eliminates the need for explicit and fragile waits or timeouts.

Time Travel Debugging

Cypress records every action and its consequences, allowing you to time-travel through your test execution.
You can pause and inspect the application's state at any point in the test, making it easier to diagnose issues.

Direct Access to DOM:

Cypress has direct access to the DOM, allowing you to interact with elements and events more effectively.
You can trigger DOM events, make assertions on DOM state, and manipulate the DOM directly.

Cross-Browser Support:

Cypress supports multiple browsers, including Chrome, Firefox, Edge, and Electron.
You can run your tests across different browsers to ensure compatibility

Headless Mode

Cypress can be run in headless mode for use in continuous integration (CI) and continuous deployment (CD) pipelines.
Headless mode allows you to execute tests without a graphical interface

Built-in Test Runner

Cypress includes a built-in test runner that provides a graphical user interface for running and managing tests.
It displays live previews of your application, making it easy to see the state of your application during testing.

Automatic Reload and Live Preview

Cypress automatically reloads the browser when code changes are detected, making it seamless to develop and test simultaneously.
The live preview feature ensures that you always see the latest version of your application in the Cypress test runner.

Community and Plugins:

Cypress has an active and growing community.
There are many plugins and custom commands available to extend its functionality, making it highly customizable.

Great Documentation

Cypress provides comprehensive documentation, tutorials, and examples to help users get started quickly and troubleshoot issues effectively.

Consistent Test Results

Cypress provides consistent and reliable test results, reducing false positives and negatives in your tests.

Fast Test Execution

Cypress is designed for speed and efficiency, which helps reduce the overall time required for running tests.

Parallelization and Distributed Testing

With the Cypress Dashboard service, you can parallelize and distribute test runs across different environments, making it suitable for large-scale testing.

Continuous Development and Improvement

The Cypress team actively develops and maintains the framework, regularly releasing updates and new features.

Compare Cypress and Selenium

Cypress

Cypress runs directly within the browser and executes tests in the same JavaScript runtime as your application
It has access to the DOM and can directly interact with the elements on the page.
Cypress operates in a single tab, which means it cannot test multiple tabs or windows simultaneously.
It uses an event-driven architecture.
Cypress test needs to be written in javascript and typescript
Cypress has built-in support for Chromium-based browsers like Chrome and Electron.
Cypress has automatic waiting for elements and actions, reducing the need for explicit waits and timeouts
Cypress offers real-time interactive debugging with time-travel capabilities.
Cypress has a built-in interactive test runner with a live preview of the application under test.
Cypress is relatively easy to set up and get started with, especially for web applications.

Selenium

Selenium operates as a separate external entity that communicates with the browser using the WebDriver protocol.
It doesn't have direct access to the DOM and communicates with the browser through the WebDriver API.
Selenium can test multiple tabs or windows and supports cross-browser testing.
Selenium uses a client-server architecture with WebDriver acting as the server.
Selenium supports multiple programming languages, including Java, Python, C#, Ruby, and JavaScript, allowing you to choose the language you're most comfortable with.
Selenium supports a wide range of browsers, including Chrome, Firefox, Edge, Safari, and others
Selenium often requires explicit waits to handle synchronization issues.
Selenium provides debugging through standard development tools and logs.

Folder structure of Cypress project

fixtures:

This folder contains fixture files used to store test data or mock responses. Fixture files can be in various formats like JSON, XML, or plain text.

e2e:

Test scripts are placed in this folder. Each .js file in this folder represents a test suite or a collection of related test cases. You can organize your tests into subfolders for better organization.

support:

The commands.js file in this folder is used for defining custom commands that you can use in your test scripts. The index.js file can contain additional support configurations and setup code.The e2e.js file in this folder is used for extending Cypress's functionality. You can define custom commands, modify browser behavior, or use third-party plugins here

screenshots:

Screenshots taken during test failures are stored in this folder. They can be helpful for diagnosing issues.

videos:

If you enable video recording of test runs, the video files are stored here.

downloads:

If your tests involve file downloads, the downloaded files are stored in this folder.

reports:

This folder can be used to store any test reports or logs generated during test runs, such as HTML reports generated by a reporting library like Mochawesome.

cypress.config.js:

This is the configuration file for Cypress. It allows you to specify settings like the base URL, browser preferences, and file paths.

Subject-specific questions

How to get the first and last child elements?

```
cy.get('.list-item').last().click(
```
```
cy.get('.list-item').first().click(); 
```

Difference between cy.log() and console.log() ?

Purpose:
`cy.log()`: This is a Cypress command used for logging information specifically within Cypress test scripts. It is meant for logging messages that are relevant to your test cases and can be viewed in the Cypress Test Runner's Command Log. It helps you debug and understand the flow of your test scripts.

- `console.log()`: This is a standard JavaScript function used for logging information in the browser's developer console. It is primarily used for debugging JavaScript code in your application. It's not part of Cypress itself but is a core feature of the browser's DevTools.

2. Output Location:

- `cy.log()`: Logs generated by `cy.log()` are displayed in the Cypress Test Runner's Command Log, making them easily accessible while running and debugging your tests within the Cypress environment.

- `console.log()`: Logs generated by `console.log()` are displayed in the browser's developer console. These logs are typically used for debugging your application code and are not directly visible in the Cypress Test Runner.

3. Timing:

- `cy.log()`: Logs generated by `cy.log()` are synchronized with the Cypress test runner and will appear in the order they are executed within your test script. They are part of your test's execution timeline.

- `console.log()`: Logs generated by `console.log()` are asynchronous, meaning they may not appear in real-time order in the console, especially when dealing with asynchronous code. This can make it challenging to correlate them with specific test steps.

How to run only specific scripts in the command line?

npx cypress run --spec "cypress/e2e/2-advanced-examples/actions.cy.js"

How to write files in Cypress?

cy.writeFile('path/to/message.txt', 'Hello World')

How to read files from Cypress?

cy.readFile('path/to/message.txt').then((text) => {
expect(text).to.equal('Hello World') // true
})

How to install a particular version of Cypress?

npm install cypress@versionnumber

How to use scrolling in Cypress?

cy.get('#element-to-scroll').scrollIntoView();
cy.scrollTo('top');
cy.scrollTo('bottom');
cy.scrollTo(0, 500);

Cypress

Cypress Interview questions