Interview Questions
Cypress commands fall into several categories: 1) Parent commands that begin a new chain (cy.get(), cy.visit()), 2) Child commands that chain from parent commands (.click(), .type()), 3) Dual commands that can start or chain (.contains()), and 4) Assertions that verify conditions (.should(), .expect()).
Elements can be selected using cy.get() with CSS selectors, cy.contains() for text content, data-* attributes for testing, or custom selectors. Best practices include using data-cy attributes for stable selection. Chain commands like .find() and .filter() can refine selections.
Common interaction commands include: .click() for clicking elements, .type() for input fields, .select() for dropdowns, .check() and .uncheck() for checkboxes, .hover() for mouse hover, and .drag() for drag-and-drop operations.
The .type() command is used for input fields. It supports special characters, key combinations, and delay options. Example: cy.get('input').type('Hello World', { delay: 100 }). It can also handle special keys using {key} syntax like {enter} or {ctrl+a}.
cy.wait() is used to wait for a specific duration or for aliases/routes to resolve. It's primarily used with network requests (cy.wait('@alias')) rather than arbitrary timeouts. For element interactions, Cypress's automatic waiting is preferred over explicit waits.
Dropdowns are handled using .select() command for <select> elements. You can select by value, text, or index. Example: cy.get('select').select('Option 1'). For custom dropdowns, use combination of .click() and .contains() or other appropriate commands.
.click() simulates a user click with additional checks and waitings, while .trigger('click') fires the raw event without extra logic. .click() is preferred for most cases as it's more reliable and closer to real user interaction.
Use .check() to check and .uncheck() for checkboxes. Radio buttons use .check() only. Both commands can take values for selecting specific options in groups. Example: cy.get('[type="checkbox"]').check() or cy.get('[type="radio"]').check('option1').
.within() scopes subsequent commands to elements within a specific DOM element. It's useful for limiting the context of commands to a specific section of the page. Example: cy.get('form').within(() => { cy.get('input').type('text') }).
Cypress automatically scrolls elements into view before interactions. You can also use .scrollIntoView() explicitly or .scrollTo() for specific scroll positions. Cypress handles scrolling containers and window scrolling automatically.
When multiple elements match, you can use .eq() for index-based selection, .first() or .last() for position, .filter() for refined selection, or .each() to iterate over elements. Consider using more specific selectors or data-* attributes for precise selection.
Hover interactions use .trigger('mouseover') or .realHover() from cypress-real-events plugin. For hover menus, consider forcing visibility or using click events instead. Some hover interactions might require special handling due to browser limitations.
File uploads can be handled using .attachFile() from cypress-file-upload plugin or by triggering change events with file contents. Consider mock file data, proper file selection events, and handling different upload mechanisms.
Drag and drop can be implemented using .trigger() with mousedown, mousemove, and mouseup events, or using cypress-drag-drop plugin. Consider handling both HTML5 drag-and-drop and custom implementations.
Command options modify command behavior through an options object. Common options include timeout, force, multiple, log. Example: cy.get('element', { timeout: 10000, log: false }). Options can control waiting, logging, and command-specific behavior.
Keyboard events can be simulated using .type() with special characters, .trigger() for specific keyboard events, or cypress-keyboard-events plugin. Consider key combinations, special keys, and platform-specific keyboard behavior.
.as() creates aliases for reuse in tests. Aliases can reference elements, routes, or values. They're accessed using @ syntax. Example: cy.get('button').as('submitBtn') then cy.get('@submitBtn').click(). Useful for reducing duplication and improving readability.
Dynamic elements require robust selection strategies, proper waiting mechanisms, and handling of async updates. Use cy.contains() with regex, data-* attributes, and proper retry-ability patterns. Consider implementing custom commands for common dynamic scenarios.
Child commands operate on the subject yielded by parent commands. They can't exist on their own and must be chained. Parent commands start new chains and yield elements. Understanding this difference is crucial for proper command chaining and element interaction.
Shadow DOM elements can be accessed using { includeShadowDom: true } option or configuring globally. Use proper selectors to traverse shadow boundaries. Consider shadow DOM specifics when interacting with web components.
Complex interactions require combining multiple commands, handling state changes, and proper sequencing. Use command chaining, custom commands, and proper waiting strategies. Consider implementing reusable interaction patterns.
Canvas testing requires specialized approaches like comparing canvas data, triggering canvas events, or testing canvas API calls. Consider using canvas-specific plugins or implementing custom commands for canvas interactions.
Complex form validation requires testing multiple scenarios, error states, and validation rules. Implement proper form submission handling, validation message verification, and state management. Consider implementing reusable form testing patterns.
WebGL testing requires specialized strategies like canvas snapshot comparison, WebGL context testing, or interaction simulation. Consider implementing custom commands for WebGL-specific interactions and verifications.
Complex gestures require combining multiple mouse/touch events, proper event sequencing, and handling gesture recognition. Consider using specialized plugins or implementing custom commands for gesture simulation.
Virtual scrolling requires handling dynamic content loading, scroll position management, and element visibility verification. Implement proper scrolling simulation and content verification strategies.
Multi-window testing requires handling window references, synchronizing actions between windows, and managing window state. Consider implementing proper window management strategies and cross-window communication.
WebRTC testing requires handling media streams, peer connections, and real-time communication. Implement proper stream simulation, connection state verification, and media handling strategies.