Practise the core Cypress commands without installing anything. Type commands in the editor and the playground carries them out step by step on our demo shop, so you can watch every click, form entry and assertion happen. It runs in your browser and understands the Cypress commands listed further down this page, not the full Cypress runner.
Click the "Test Cases" dropdown to load pre-built example tests. These templates demonstrate common Cypress patterns like:
Edit the test code in the center editor panel. Use Cypress commands like:
Tip: Use data-test attributes for reliable element selection
Click the "Run Test" button to execute your code against the demo application. Watch the test results appear on the right panel in real-time.
The results panel shows pass/fail status, execution time, and detailed logs for debugging.
If your test fails, check the logs for error messages. Common issues:
The playground understands this part of the Cypress API. Chain commands on one line, or on the following lines starting with a dot, just as you would in a spec file.
cy.visit('/')
Opens the demo shop (the only address available here)
cy.get('[data-test="username"]')
Finds an element; the step fails if it is missing
.type('standard_user')
Types text into the element found by cy.get()
.click()
Clicks the element
.select('price-asc')
Picks an option in a select box, such as the sort order
.should('be.visible')
Also 'exist', 'not.exist', 'contain', 'have.value' and 'have.text'
.first()
Uses the first match when a selector finds several elements
cy.wait(1000)
Pauses for the given number of milliseconds
Anything else, such as cy.contains() or .clear(), stops the run with a message naming the command, so a test never shows as passed for steps that did not run.
Test login forms with valid/invalid credentials, error messages, and session persistence.
Validate required fields, email formats, and error state handling in forms.
Test button states, click events, loading states, and confirmation dialogs.
Assert table data, list items, text content, and DOM element attributes.
Test page navigation, URL changes, and breadcrumb functionality.
Test error messages, edge cases, and user feedback mechanisms.
Select elements using data-test attributes instead of class names or IDs which may change
Use command chaining: cy.get().type().click().should() for cleaner, more readable tests
Use .should() assertions instead of cy.wait() for better reliability
Write tests that simulate what a real user does, rather than what the code does underneath
Each test should be able to run independently without depending on other tests
No. It is for learning the commands and the shape of a test. Real Cypress runs on Node.js and drives a real browser; for your own projects, install it with npm install cypress --save-dev and run your tests locally or in your CI pipeline.
Real Cypress retries each command for up to 4 seconds (its defaultCommandTimeout) until the element appears. This playground runs each command once, so give the page a moment with cy.wait(1000) after a click that loads a new page. In your own Cypress projects, rely on the built-in retry instead of fixed waits.
Use the browser DevTools (F12) to inspect elements. Look for unique identifiers like data-test, id, or class attributes. Test your selectors in Cypress directly.
The playground focuses on UI testing. For API testing, explore Postman or use cy.request() in your local Cypress setup for API interactions.
Run a test to see results