Welcome to the Cypress Demo Site!
This site is designed to provide a comprehensive playground for your Cypress automation testing journey. Explore various UI elements and interactions all in one place.
Forms with Various Input Types
File Uploads
Single File Upload
Multiple File Upload
Drag and Drop File Upload
File Upload with Shadow DOM
This file input is inside a custom element with a Shadow DOM. Cypress needs specific commands to interact with it.
Interactions & Dialogs
Hover & Tooltip
Hovering over the button reveals a tooltip.
Modals & Popups
Click the button to open a custom modal dialog.
Native Browser Dialogs (Alerts, Confirmations & Prompts)
**Important Note:** When running this demo within an iframe (like in the Canvas environment) or in a headless browser (like Cypress by default), native browser `alert()`, `confirm()`, and `prompt()` dialogs will **not visually appear** in the main window. However, Cypress *does* interact with them. To test these, you typically use `cy.on('window:alert', (str) => { /* assertions */ })` or `cy.on('window:confirm', (str) => { /* assertions and return true/false */ })` and `cy.stub(window, 'prompt')` to control the input and assertions in your Cypress tests.
Event status: None
Buttons & Links
Tabs
Content for Tab 1. This can be used for displaying different sections of information without navigating to a new page.
Accordions
This is the content for Accordion Panel 1. It expands and collapses.
You can put text, images, or other elements here.
Content for Accordion Panel 2.
Slider/Carousel
Date Pickers
Keyboard Interactions
Press 'Enter' after typing in the input field.
Dynamic Content & Scrolling
Search with Autocomplete (Auto-suggest Dropdown)
This acts as an auto-suggest dropdown. Type "A", "B", "O", etc., to see suggestions.
Advanced Filter Dropdown (Multi-select Simulation)
Click the input to open the filter options. You can select multiple items.
Selected: None
Dynamic Dropdown
Selecting a country will dynamically update the available cities.
Tables with Sorting/Filtering/Pagination
| ID | Name | Value | Status |
|---|
Scroll Testing Area (Country Flags)
E-commerce Functionality (Cart)
Awesome Gadget
A must-have gadget for your daily needs.
Super Widget
Enhance your productivity with this super widget.
Mega Device
Experience the future with our mega device.
Your Shopping Cart
Your cart is empty.
Admin Panel
Admin Login
Admin Dashboard
User Management
View and manage user accounts.
Product Management
Add, edit, or delete products.
Order Management
Process and track customer orders.
System Settings
Configure application settings.
Advanced Interactions
Window Handling
Clicking this button will open a new blank browser window/tab.
Iframe Handling
This section contains an iframe. To interact with elements inside, Cypress requires switching context.
Mouse Operations (Double Click & Right Click)
Event status: None
Responsive Layout Elements
This section demonstrates how the layout adapts to different screen sizes. Try resizing your browser window (especially narrowing it) to see how the layout changes. The mobile navigation menu (top right icon) is visible on smaller screens.
The boxes above demonstrate how the number of columns changes based on screen width.