Basics

What is a Cypress Test?

A Cypress test is a small script written in JavaScript (or TypeScript) that mimics what a user would do on your website. For example, clicking buttons, filling out forms, or navigating through pages.

Folder Structure of a Cypress Project

When you install Cypress and open it for the first time, it creates a folder structure like this:

• Integration folder: This is where you’ll write all your tests.
• Fixtures folder: Use this for static test data like user details or API responses.

Writing Your First Test

Let's write a simple test to check if a webpage loads successfully.

1. Create a file named example_test.js inside the integration folder.
2. Add the following code:

describe('My First Test', () => {
  it('Visits a webpage', () => {
    cy.visit('https://example.com'); // Open a webpage
    cy.contains('Example Domain');  // Check if the page contains specific text
  });
});

• describe: Groups related tests together.
• it: Defines an individual test.
• cy.visit: Opens the specified URL in a browser.
• cy.contains: Checks if the specified text exists on the page.

Running Cypress Tests

1. Open the Cypress Test Runner by running:

2. The Test Runner will appear, showing your test files. Click on your example_test.js file to run it.

3. Cypress will open a browser and run your test. You’ll see the test steps on the left and the actual browser interaction on the right.

Understanding Cypress Test Runner

The Test Runner is the heart of Cypress. It shows:

1. Test Progress: Whether each test passed or failed.
2. Command Log: A list of all the Cypress commands run during the test.
3. Time Travel: You can click on each command in the log to see how the page looked at that point in the test.
4. Screenshots & Videos: Automatically taken when tests fail (if configured).

Writing Assertions

Assertions are how you check if something is true or correct. Cypress uses the Chai assertion library, and here are a few examples:

1. Check Text Content:

cy.contains('Welcome').should('be.visible'); // Checks if "Welcome" text is visible

2. Check Element's Value:

cy.get('input[name="email"]').should('have.value', 'user@example.com');

3. Check URL:

cy.url().should('include', '/dashboard'); // Verifies the current URL contains '/dashboard'

Interacting with Elements

Cypress lets you easily interact with elements on the page:

1. Click a Button:

cy.get('button#submit').click();

2. Type into an Input Field:

cy.get('input[name="username"]').type('myUser');

3. Select from a Dropdown:

cy.get('select').select('Option 1');

Cypress Commands Cheat Sheet