Understanding Cypress Commands – A Beginner’s Guide
Understanding Cypress Commands – A Beginner’s Guide
Cypress is a modern JavaScript-based testing framework used to test web applications.
It’s popular for its ease of use, real-time browser interaction, and powerful built-in commands.
In this blog, we’ll explore what Cypress commands are, how they work, and the most commonly used commands to help you get started with automated testing.
🧪 What is Cypress?
Cypress is a front-end testing tool built for modern web apps. It allows you to:
Write end-to-end (E2E) tests
Run tests directly in the browser
View results in real-time
Use JavaScript for all test scripts
🚀 What Are Cypress Commands?
In Cypress, a command is an instruction you give to test your app.
Think of it like saying:
“Visit this page”
“Click this button”
“Type into this input”
These commands are chained together and executed in order. Cypress handles timing and waiting for you.
Example:
cy.visit('https://example.com')
cy.get('input[name="email"]').type('user@example.com')
cy.get('button[type="submit"]').click()
🔧 Types of Cypress Commands
Cypress commands fall into 3 main categories:
1. Action Commands
They perform actions like clicking, typing, etc.
Examples:
cy.click()
cy.type()
cy.select()
2. Traversal Commands
Used to navigate DOM elements.
Examples:
cy.get().find()
cy.parent()
cy.children()
3. Assertion Commands
Used to validate results (like expect in unit tests).
Examples:
cy.should()
cy.and()
📘 Most Common Cypress Commands
1. cy.visit(url)
Loads a web page.
cy.visit('https://example.com')
2. cy.get(selector)
Gets an element from the DOM using a selector.
cy.get('#username')
cy.get('.btn-primary')
3. cy.contains(text)
Finds elements with matching text.
cy.contains('Login')
4. cy.type(text)
Types text into an input box.
cy.get('input[name="email"]').type('test@example.com')
5. cy.click()
Clicks on an element.
cy.get('button').click()
6. cy.select(value)
Selects a value from a dropdown.
cy.get('select').select('India')
7. cy.check() and cy.uncheck()
Checks or unchecks checkboxes.
cy.get('#agree').check()
cy.get('#subscribe').uncheck()
8. cy.should()
Makes an assertion.
cy.get('.success-msg').should('contain', 'Welcome')
cy.get('input').should('be.visible')
9. cy.url()
Checks the current URL.
cy.url().should('include', '/dashboard')
10. cy.title()
Gets the page title.
cy.title().should('eq', 'My App')
🧱 Chaining Commands
Cypress allows you to chain commands together. This keeps your test clean and readable.
Example:
cy.get('form')
.find('input[name="email"]')
.type('test@example.com')
.should('have.value', 'test@example.com')
🕐 Cypress is Asynchronous (But Looks Sync)
Even though Cypress commands are asynchronous, they appear synchronous because Cypress handles the execution order internally.
You don’t need to use async/await or promises!
⏳ Cypress Automatically Waits
One of the best features: Cypress automatically waits for elements to appear or actions to complete.
No need for:
setTimeout()
wait()
sleep()
Cypress waits until the element is visible and ready before continuing.
📋 Example Test Case Using Commands
Here’s a full test example using all the basic commands:
describe('Login Page Test', () => {
it('should allow user to login successfully', () => {
cy.visit('https://myapp.com/login')
cy.get('input[name="email"]').type('user@example.com')
cy.get('input[name="password"]').type('123456')
cy.get('button[type="submit"]').click()
cy.url().should('include', '/dashboard')
cy.contains('Welcome, User')
})
})
🧪 Assertions with should and expect
You can use both:
cy.get('h1').should('have.text', 'Dashboard')
Or:
cy.get('.alert').then(($el) => {
expect($el.text()).to.include('Success')
})
📌 Tips for Using Cypress Commands
Always start with cy.visit()
Use cy.get() with specific selectors for accuracy
Chain .should() to check expectations
Avoid hard waits like cy.wait(5000) unless truly needed
Use Cypress's auto-retry feature (it will retry commands till timeout)
❌ Common Mistakes to Avoid
Using async/await — Not needed in Cypress
Writing commands outside test blocks
Using wrong selectors
Forgetting to chain assertions
📚 Summary Table
Command Purpose
cy.visit() Visit a webpage
cy.get() Select an element
cy.type() Type into input
cy.click() Click an element
cy.should() Make an assertion
cy.url() Get current page URL
cy.title() Get page title
cy.contains() Get element with text
cy.select() Select from dropdown
cy.check() Check a checkbox
🎯 Final Thoughts
Cypress commands are the heart of your test scripts. They’re easy to learn, powerful, and built to test real user actions.
Start small, understand how each command works, and you’ll be automating UI tests like a pro in no time!
Comments
Post a Comment