Basic Commands in Cypress

Cypress being a modern, full-stack test runner, developers are able to create maintainable web application unit tests which turn out to be reliable and supportable. It gives a palette of commands for interacting with web elements that allows for various actions to happen, and it is a very useful tool for these automations.

In this piece of writing, we will discuss how one can write basic Cypress commands, their respective syntaxes, and the ways they can be used.

Cypress directives are used to create the scenarios of your test scripts. They allow to work with the web elements in your tests, do what is necessary, validate the expected results, and run the tests sequentially. The cypress commander library has a robust command set, each designed for different situations or scenarios. This command could be chained amongst other commands, which can create elaborate scenario for testing.

1. cy.visit()

The cy.visit() command is used to navigate to a specific URL in the browser. It’s typically the first command you’ll use in your test suite to load the web application you want to test.

cy.visit(‘https://example.com’)

In this example, Cypress will navigate to https://example.com.

2. cy.get()

The cy.get() command is used to retrieve one or more elements from the DOM (Document Object Model) based on a selector. It’s a fundamental command that you’ll use extensively in your tests to interact with various elements on the page.

cy.get(‘input[type=”email”]’)

In this example, Cypress will get the input element with the attribute type=”email”.

3. cy.contains()

The cy.contains() command is used to retrieve one or more elements from the DOM that contain the specified text content.

cy.contains(‘Submit’)

In this example, Cypress will get an element that contains the text “Submit”.

4. cy.click()

The cy.click() command is used to simulate a click event on an element.

y.get(‘button’).click()

In this example, Cypress will click on the button element.

5. cy.type()

The cy.type() command is used to type text into an input field or text area.

cy.get(‘input[name=”username”]’).type(‘johndoe’)

In this example, Cypress will type “johndoe” into the input field with the attribute name=”username”.

6. cy.clear()

The cy.clear() command is used to clear the value of an input field or text area.

cy.get(‘textarea’).clear()

In this example, Cypress will clear the value of the textarea element.

7. cy.url()

The cy.url() command is used to get or assert the current URL of the page.

cy.url().should(‘include’, ‘/dashboard’)

In this example, Cypress will assert that the current URL includes “/dashboard”.

8. cy.title()

The cy.title() command is used to get or assert the current title of the page.

cy.title().should(‘eq’, ‘My Website’)

In this example, Cypress will assert that the current page title is equal to “My Website”.

9. cy.reload()

The cy.reload() command is used to reload the current page in the browser.

cy.reload()

In this example, Cypress will reload the current page.

10. cy.wait()

The cy.wait() command is used to wait for a specified amount of time or until a condition is met.

cy.wait(5000) // Wait for 5 secondscy.get(‘#loading’).should(‘not.exist’).then(() => { // Code to execute after the loading element is no longer present})

In the first example, Cypress will wait for 5 seconds before proceeding to the next command. In the second example, Cypress will wait until the element with the ID “loading” no longer exists on the page before executing the code in the then callback.

11. cy.should()

The cy.should() command is used to make an assertion about the current subject (e.g., an element, response, or value).

cy.get(‘span’).should(‘have.text’, ‘Hello, World!’)

In this example, Cypress will assert that the span element has the text “Hello, World!”.

12. cy.intercept()

The cy.intercept() command is used to intercept a network request and provide a mock response.

cy.intercept(‘GET’, ‘/api/users’, { fixture: ‘users.json’ })

In this example, Cypress will intercept a GET request to /api/users and return the data from the users.json fixture file.

13. cy.request()

The cy.request() command is used to send a network request without loading the page.

cy.request(‘POST’, ‘/api/login’, { username: ‘johndoe’, password: ‘mypassword’ })

In this example, Cypress will send a POST request to /api/login with the specified request body.

14. cy.route()

The cy.route() command is used to create a route for network requests that can be waited on or stubbed.

cy.route(‘POST’, ‘/api/users’).as(‘createUser’)

In this example, Cypress will create a route for POST requests to /api/users and alias it as “createUser”.

15. cy.fixture()

The cy.fixture() command is used to load data from a fixture file.

cy.fixture(‘users.json’).then((users) => { // Code to execute with the users data})

In this example, Cypress will load the data from the users.json fixture file and pass it to the callback function.

16. cy.readFile()

The cy.readFile() command is used to read the contents of a file and pass it to the callback function.

cy.readFile(‘cypress/fixtures/example.json’).then((json) => { // Code to execute with the JSON data})

In this example, Cypress will read the contents of the example.json file and pass the JSON data to the callback function.

17. cy.writeFile()

The cy.writeFile() command is used to write data to a file.

cy.writeFile(‘cypress/fixtures/output.txt’, ‘Hello, World!’)

In this example, Cypress will write the string “Hello, World!” to the output.txt file in the fixtures directory.

18. cy.scrollTo()

The cy.scrollTo() command is used to scroll the browser window or an element to the specified position.

cy.get(‘#footer’).scrollTo(‘bottom’)

In this example, Cypress will scroll to the bottom of the element with the ID “footer”.

19. cy.hover()

The cy.hover() command is used to trigger a hover event on the specified element.

cy.get(‘.dropdown-menu’).trigger(‘mouseover’)

In this example, Cypress will trigger a mouseover event on the element with the class “dropdown-menu”.

Cypress delivers with an assortment of commands so developers can write dependable and resilient tests for web applications. The introductory article commands, such as cy. , are covered in this post that will also take you through the subsequent ones, like create or destroy objects, get or set variables, etc. , they serve as proper bricks to construct strong test cases. The tasks are taken care of by the commands when they are combined and they allow you to embrace web elements and to also make expected behaviors of your application assertions.

Can Cypress commands be used for mobile testing?

Ans:

No, Cypress is designed mainly with web-app testing in mind, so it doesn’t consider mobile testing out of the box. Nonetheless, there are mobile-focused plugins and add-ons outside of main Cypress which can elevate its function as far as mobile testing goes.

Are Cypress commands asynchronous?

Ans:

Cypress commands also work asynchronously, that is by their nature. Here comes the intersting feature: when chaining different commands, Cypress will wait for every command to be done before continuing onto to the next; this is how the test is ran. The deliberate adherence to the above outlined strategy leads to more efficient and precise tests with less problems of the race conditions and timing issues.

Can Cypress commands be used for testing APIs?

Ans:

While Cypress is specialized in the end-to-end testing of web apps, it does have certain tools for APIs testing outsides their scope. A possible way is the cy. using the request() command to send HTTP requests; checking the response and verify the output. While it is okay for the elementary API testing you may want to consider using dedicated tools such as Postman and tools specifically dedicated to API testing for more holistic API testing.

How can I debug Cypress commands?

Ans:

Cypress suite gives you a boatload of test monitoring tools and utilities to make sure you investigate and solve any problems in scripts you are using. Thanks to the Command Log feature of the Cypress Test Runner it is possible to debug by using built-in features such as the Command Log, which displays information like the detailed run for each command performed during the test. Furthermore, it is possible that the browser’s developer tools or the cy. will help you. Tracing the test execution with pause() command to check the application state.

Can Cypress commands be used with other testing frameworks?

Ans:

Cypress is a single-purpose testing framework and has no features to integrate it effortlessly with other testing frameworks. But, you may apply Cypress along with other testing tools and frameworks in your project for specific purposes (e. g. , it is aimed to prove certain cases).