"Cypress Testing Syntax Cheat Sheet: A Quick Reference Guide"

Introduction:

Embarking on your Cypress testing journey and need a quick reference for its powerful syntax? Look no further! Our Cypress Testing Syntax Cheat Sheet is designed to be your go-to resource, providing a concise and handy overview of essential commands and syntax.

Whether you're a testing novice or a seasoned developer, Cypress offers a robust set of commands to streamline your end-to-end testing process. Our cheat sheet breaks down the fundamental syntax for key Cypress commands, from navigating to URLs and interacting with elements to making assertions and creating custom commands.

This cheat sheet isn't just a compilation of commands; it's a valuable tool to accelerate your understanding of Cypress testing. Each syntax snippet is accompanied by a brief explanation, making it easy to grasp the purpose and usage of each command. From basic navigation to advanced concepts like custom commands, this cheat sheet covers the breadth of Cypress capabilities.

Bookmark this cheat sheet for quick access during your testing endeavors. Whether you're writing your first Cypress test or fine-tuning existing ones, having the right syntax at your fingertips can save time and enhance the effectiveness of your test suite.

Let's make Cypress testing not just powerful but also accessible with our Cypress Testing Syntax Cheat Sheet. Dive in, explore the syntax, and elevate your testing proficiency!

// Select by class

cy.get('.my-class');

// Select by ID

cy.get('#my-id');

// Select by attribute

cy.get('[data-test="my-element"]');

Using XPath (Not Recommended, but Possible):

cy.xpath('//button[@id="my-button"]');

// Selecting a specific child element

cy.get('.parent-class').find('.child-class');

// Selecting based on text content

cy.contains('Submit');

// Using chaining to refine selection

cy.get('.parent-class').find('.child-class').eq(1);

 

// Select by data attribute

cy.get('[data-test="submit-button"]');

// Select the next sibling

cy.get('.current-element').next('.sibling-element');

// Select the previous sibling

cy.get('.current-element').prev('.sibling-element');

// Select all siblings

cy.get('.current-element').siblings();

// Select specific siblings based on a selector

cy.get('.current-element').siblings('.sibling-element');

// Select the first sibling

cy.get('.current-element').siblings().first();

// Select the last sibling

cy.get('.current-element').siblings().last();

// Get the current URL

const currentURL = Cypress.url();

console.log('Current URL:', currentURL);

// Get the title of the current page

cy.title().then((title) => {

  console.log('Page Title:', title);});

// Get the current URL

cy.url().should('include', 'example.com');

// Get the page source

cy.document().then((doc) => {

  const pageSource = new XMLSerializer().serializeToString(doc);

  console.log('Page Source:', pageSource);});

// Get the current window ID

cy.window().then((win) => {

  const windowId = win.id;

  console.log('Window ID:', windowId);});

//Checking Visibility (isVisible-like behaviour):

cy.get('.my-element').should('be.visible');

//Checking if an Element is Displayed:

cy.get('.my-element').should('exist');

//Checking if an Element is Selected (for checkboxes or radio buttons):

cy.get('#my-checkbox').should('be.checked');

//Checking Specific Conditions (invoke command):

cy.get('.my-element').invoke('css', 'display').should('not.equal', 'none');

// Navigate back in the browser's history

cy.go('back');

// Navigate forward in the browser's history

cy.go('forward');

// Navigate to a specific URL

cy.visit('https://www.example.com');

// Refresh the page

cy.reload();

// Visit an initial URL

cy.visit('https://www.example.com');

// Click a link that navigates to another page

cy.get('a').click();

// Navigate back to the initial page

cy.go('back');

// Navigate forward to the second page

cy.go('forward');

// Reload the current page

cy.reload();

// Clear browser cookies

cy.clearCookies();

// Clear browser local storage

cy.clearLocalStorage();

// End the test

cy.end();

// Check a checkbox

cy.get('#myCheckbox').check();

// Uncheck a checkbox

cy.get('#myCheckbox').uncheck();

// Assert that a checkbox is checked

cy.get('#myCheckbox').should('be.checked');

// Assert that a checkbox is unchecked

cy.get('#myCheckbox').should('not.be.checked');

// Select an option by its value

cy.get('#myDropdown').select('option2');

// Select an option by its index (0-based)

cy.get('#myDropdown').select(1); // Selects the second option ('Option 2')

// Trigger an alert by clicking a button

cy.get('#triggerAlertButton').click();

// Handle the alert by accepting it

cy.on('window:alert', (text) => {

  expect(text).to.equal('This is an alert!');});

// Switch to a frame by its index

cy.frameLoaded(index).then(() => {

  cy.iframe(index).find('#elementInFrame').click();});

// Switch to a frame by its name or ID

cy.iframe('frameNameOrId').find('#elementInFrame').click();

// Switch back to the default content (outside of any frame)

cy.switchTo('default').find('#elementOutsideFrame').click();

// Select a specific table row by index

cy.get('table tr').eq(1).click(); // Clicks on the second row

// Select a specific cell in a row

cy.get('table tr').eq(1).find('td').eq(2).should('contain', 'Data'); // Verifies the content of the third cell in the second row

// Iterate through all rows in the table

cy.get('table tr').each((row, rowIndex) => {

  // Perform actions for each row

  cy.wrap(row).find('td').eq(0).should('contain', `Row ${rowIndex + 1}`);

});

// Click on a button with ID 'myButton'

cy.get('#myButton').click();

// Double-click on an element with class 'myElement'

cy.get('.myElement').dblclick();

// Right-click on a div with class 'contextMenu'

cy.get('.contextMenu').rightclick();

// Hover over an element with ID 'hoverElement'

cy.get('#hoverElement').trigger('mouseover');

// Drag and drop from source to target element

cy.get('#sourceElement').trigger('mousedown').trigger('mousemove', { clientX: 600, clientY: 200 }).trigger('mouseup');

cy.get('#targetElement').trigger('drop');

// Assert that an element with ID 'myElement' exists

cy.get('#myElement').should('exist');

// Assert that an element with class 'myClass' does not exist

cy.get('.myClass').should('not.exist');

// Assert that a paragraph contains the text 'Hello, World!'

cy.get('p').should('contain', 'Hello, World!');

// Assert that an input field has a specific value

cy.get('#myInput').should('have.value', 'Default Value');

// Assert that a button is visible

cy.get('button').should('be.visible');

// Assert that a modal is hidden

cy.get('#myModal').should('not.be.visible');

// Assert that an anchor tag has an 'href' attribute with a specific value

cy.get('a').should('have.attr', 'href', 'https://example.com');

// Assert that a checkbox is checked

cy.get('#myCheckbox').should('be.checked');

// Assert that a button is disabled

cy.get('#myButton').should('be.disabled');

// Assert that a radio button is selected

cy.get('input[name="gender"]').should('be.checked');

// Take a screenshot

cy.screenshot('my-screenshot'); // Saves the screenshot as 'my-screenshot.png' in the default screenshots folder

// Enable video recording

// This will record the entire test run and save it as a video file

Cypress.Screenshot.defaults({

  screenshotOnRunFailure: true,});

// Automatic screenshot on test failure

it('should navigate to the home page', () => {

  cy.visit('/home');

  cy.get('#missingElement').click(); // This will cause a test failure

});

Conclusion:

In conclusion, our Cypress Testing Syntax Cheat Sheet serves as a valuable companion on your journey to mastering Cypress testing. We've covered a range of fundamental commands, from navigating to elements and making assertions to crafting custom commands, providing you with a quick reference for every testing scenario.

As you navigate through the intricacies of Cypress syntax, remember that this cheat sheet is more than just a collection of commands; it's a tool designed to enhance your test readability, maintainability, and overall testing efficiency. Whether you're a Cypress enthusiast or just starting, having a well-organized syntax guide can be a game-changer in your testing workflow.

Bookmark this cheat sheet and keep it close by as you delve into the world of Cypress testing. Use it to streamline your test creation, troubleshoot syntax issues, or introduce Cypress to your team. The clarity and brevity of each syntax snippet, accompanied by brief explanations, make it easy for both beginners and seasoned developers to quickly grasp Cypress's power.

As you apply Cypress to your testing projects, let this cheat sheet be your trusted resource. Happy testing, and may your Cypress experience be smooth, efficient, and ultimately successful!

Happy Testing !!