Cypress Cheat Sheet(commonly used cypress commands)
Cypress is a testing tool for web applications. It is based on JavaScript and uses a unique and modern approach to testing that makes it easy to use and powerful at the same time. Cypress has built-in support for continuous integration and deployment, making it a popular choice among developers and testers needing to move quickly and efficiently.
Here are some examples of useful Cypress commands:
cy.visit(): This command is used to visit a specific URL. For example, if you wanted to visit any website, you could use the following code:
cy.visit('https://www.amazon.ae/')In this example, we are using the cy.visit() command to visit the URL “https://www.amazon.ae/”. This can be useful for testing the behavior of the page at that URL, or for testing the behavior of the page when it is redirected to a specific URL.
cy.get(): This command is used to select an element on the page.Here is an example of how to use thecy.get()command:
cy.get('button').click();In this example, we are using the cy.get() command to find a button element on the page, and then we are using the click() command to simulate a click on that element. This allows us to test the behavior of the page when a user clicks on the button.
.contains(): This command is used to search for a specific string of text on the page. For example, if you wanted to search for the word "testing" on the page, you could use the following code (Ref Line 1)
1). cy.contains('testing')
2). cy.get('#footer').contains('Terms and conditions')
.click(): This command is used to click on an element on the page. You can click on an element by providing the co-ordinates, positions and can also combine keys with the click(). Some of the most used click commands are as below:
1). cy.get('Sign Up').click()
2). cy.get("[alt='iPhone']").as("iphone");
cy.get("@iphone").click()
3). cy.get('li:first').click({
shiftKey: true,
})
4). cy.get('Sign Up').click({force: true}})
5). cy.get('img').click('topRight')
6). cy.get('.action-labels>.label').click({ multiple: true }).type(): This command is used to type text into an input field on the page. For example, if you wanted to type the text "cypress" into a search field, you could use the 1st code from below. You can also pass the keys like enter. Below are some of the commonly used commands:
1).cy.type('cypress')
2).cy.get('input[name=email]').type('johndoe@example.com')
3).cy.get("[placeholder='Search']").type("{shift}{alt}macbook");
4).cy.get('input[type=text]').type('Test', { force: true })
5).cy.get('#input-firstname').type("Iphone {enter}")
6).cy.get('#input-firstname').type("Iphone").type('{enter}')
7).cy.get("#input-lastname").type("AB", { delay: 1000 });.clear(): This command is used to clear the text from an input field. For example, if you wanted to clear the text from a search field, you could use .clear(). You can also type and clear it or get the specific element if an element appears more than once on the web page.
1).cy.get('#search-field').clear()
2).cy.get('#search-field').type("hello").clear()
3).cy.get('#button-cart').first().clear().check(): This command is used to check a checkbox or radio button. For example, if you wanted to check a form with multiple values at the same time, it can be done by passing the values in an array format.(Refer 4th code)
1).cy.get('[type="checkbox"]').check()
2).cy.get('[type="radio"]').check()
3).cy.get('[type="checkbox"]').check('Female')
4).cy.get('[type="checkbox"]').check(['US','India'])
5).cy.get('[type="checkbox"]').check({ force: true }).uncheck(): This command is used to uncheck a checkbox or radio button. For example, if you wanted to uncheck the multiple values at the same time in a form, it can be done by passing the values in an array format.(Refer example 1)
1). cy.get('.action-check [type="checkbox"]')
.check(['checkbox1', 'checkbox3'])
.uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
2). cy.get('[type="checkbox"]')
.not('[disabled]')
.uncheck().select(): This command is used to select an option from a dropdown menu. For example, if you wanted to select the option "Avatar" from a dropdown with the ID "animals”, you could use the first command from the below code and if you want to select multiple values at the same time, you can the use 2nd command. You can also select the hidden elements on the page by using the command 3 from the below code
1).cy.get("select#animals").select("Avatar");
2).cy.get("select#second").select(["Donut", "Bonda"]);
3).cy.get("select#first").select("Google", { force: true });cy.wait(): This command is used to pause the execution of your test for a specified amount of time. For example, if you wanted to pause your test for 2 seconds, you could use the following code:
cy.wait(2000)cy.intercept(): This command is used to intercept and mock network requests made by the page being tested. This command accepts a request method and a URL pattern as arguments, and it returns an object that can be used to configure the mock response for the intercepted request.
Here is an example of how to use the cy.intercept() command:
cy.intercept('GET', 'https://example.com/api/users').as('getUsers');
// Perform some actions on the page that make a GET request to the specified URL
cy.get('button').click();// Configure the mock response for the intercepted request
cy.get('@getUsers').then(interception => {
interception.reply(200, [{ id: 1, name: 'Tom' }, { id: 2, name: 'Bob' }]);
});
In this example, we are using the cy.intercept() command to intercept and mock a GET request to the URL https://example.com/api/users. Then, we perform some actions on the page that make this request, and finally we use the cy.get() and then() commands to configure the mock response for the intercepted request. This allows us to test the behavior of the page when it receives a specific response from the server.
cy.request(): This command is used to make a request to a specific URL. For example, if you wanted to make a GET request to the URL "https://api.coinbase.com/v2/currencies" and log the response, you can use the following code:
cy.request("GET", "https://api.coinbase.com/v2/currencies").then(
(response) => {
console.log(response.status)})cy.task(): This command is used to run custom Node.js code within your test. For example, if you wanted to print a message on the console, you could use the following code:
cy.task("log", "hello World");You need to update setupNodeEvents in cypress.config.js for using task command
cy.scrollTo(): This command is used to scroll to a specific element on the page. You can scroll on a page by passing the coordinates or the position like bottom,topLeft.
Here is an example of how to use the cy.scrollTo() command:
1).cy.scrollTo(0, 500);
2).cy.scrollTo("topRight");
3).cy.scrollTo("bottom");
4).cy.scrollTo(0, 100);cy.getCookie(): This command is used to retrieve a cookie with a specific name from the current page. This command accepts the name of the cookie as an argument and returns an object containing the cookie's name, value, and other information.
Below is an example of how to use the cy.getCookie() command:
cy.getCookie('myCookie').then(cookie => {
console.log(cookie.name); // logs the cookie name
console.log(cookie.value); // logs the cookie value
});Keep in mind that this only works if the cookie has been set in the current page. If you are trying to access a cookie from a different domain, you will need to use a different method.
cy.clearCookies(): This command is used to delete all the cookies on the current page. This command does not accept any arguments, and it does not return anything.
Here is an example of how to use the cy.clearCookies() command:
cy.clearCookies();This command will delete all the cookies in the current page, so be careful when using it. If you only want to delete a specific cookie, you can use the cy.clearCookie() => cy.getCookie(‘token’) command instead. This command accepts the name of the cookie as an argument, and only deletes the cookie with that name.
cy.url(): This command is used to get the current URL of the page being tested. This command does not accept any arguments, and it returns a string containing the current URL.
Below is an example of how to use the cy.url() command
cy.url().then(url => {
console.log(url); // logs the current URL
});This command is commonly used to verify that the page being tested has the expected URL. For example, you could use this command to verify that a user has been redirected to the correct page after logging in or submitting a form.
cy.location(): This command is used to get the current location of the page being tested. This command does not accept any arguments, and it returns an object containing information about the current location, such as the URL, hostname, pathname, and search parameters.
Here is an example of how to use the cy.location() command:
cy.location().then(location => {
console.log(location.href); // logs the current URL
console.log(location.hostname); // logs the current hostname
console.log(location.pathname); // logs the current pathname
console.log(location.search); // logs the current search parameters
});This command is commonly used to verify that the page being tested has the expected location. For example, you could use this command to verify that a user has been redirected to the correct page after logging in or submitting a form.
cy.reload(): This command is used to reload the current page. This command does not accept any arguments, and it does not return anything.
Here is an example of how to use the cy.reload() command:
cy.reload();This command will cause the current page to be reloaded, which can be useful in a number of situations. For example, you could use this command to ensure that the page being tested is in a consistent state before running a test or to test the behavior of the page when it is reloaded.
cy.clock(): This command is used to control the clock for a test. This command can be used to set the initial time for the clock or to manually advance the clock by a specified amount of time. This can be useful when testing time-dependent features, such as timeouts or scheduled events.
Here is an example of how to use the cy.clock() command:
const myFunction = () => {
// do something
};cy.clock(1000); // set the initial time to 1 second// Call myFunction in your test
myFunction();cy.tick(1000); // advance the clock by another second// Verify that myFunction was called after 1 second
cy.get('@myFunction').should('have.been.calledOnce');
In this example, we are using the cy.clock() command to set the initial time for the clock to 1 second. Then, we use the cy.tick() command to advance the clock by another second. This allows us to verify that myFunction was called after 1 second, as expected.
cy.viewport(): This command is used to change the size of the viewport for a test. This can be useful when testing the responsiveness of a web application, or when simulating different devices and screen sizes.
Here is an example of how to use the cy.viewport() command:
cy.viewport(320, 480); // set the viewport size to 320x480 pixelsIn this example, we are using the cy.viewport() command to set the viewport size to 320x480 pixels. To check, in detail about testing responsiveness using cypress, you can refer to this blog.
cy.window(): This command is used to get the globalwindowobject for the page being tested. This command does not accept any arguments, and it returns thewindowobject as a Cypress subject, which can be used to interact with the page in the same way a user would.
Here is an example of how to use the cy.window() command:
cy.window().then(win => {
// Use the window object to interact with the page
win.scrollTo(0, 100);
win.alert('Hello, world!');
});In this example, we are using the cy.window() command to get the window object, and then we are using it to scroll the page and display an alert. This allows us to test the behavior of the page in the same way a user would.
cy.title(): This command is used to get the title of the page being tested. This command does not accept any arguments, and it returns a string containing the page’s title.
Here is an example of how to use the cy.title() command:
cy.title().then(title => {
console.log(title); // logs the page's title
});This command is commonly used to verify that the page being tested has the expected title. For example, you could use this command to verify that a user has been redirected to the correct page after logging in or submitting a form.
dblclick(): This command is used to simulate a double-click on an element in the page being tested. This command accepts a selector as an argument, and it returns the element that was double-clicked as a Cypress subject.
Here is an example of how to use the dblclick() command
cy.get('button').dblclick();In this example, we are using the cy.get() command to find a button element on the page, and then we are using the .dblclick() command to simulate a double-click on that element. This can be useful for testing the behavior of the page when a user double-clicks on an element.
rightclick(): This command is used to simulate a right-click on an element in the page being tested. This command accepts a selector as an argument, and it returns the element that was right-clicked as a Cypress subject.
Here is an example of how to use the rightclick() command:
cy.get('button').rightclick();In this example, we are using the cy.get() command to find a button element on the page, and then we are using the cy.rightclick() command to simulate a right-click on that element. This can be useful for testing the behavior of the page when a user right-clicks on an element.
.children(), .parent(), .closest(): Cypress does not have a built-in “traversal” command. However, Cypress provides a number of powerful commands that can be used to traverse the page and interact with elements in the page.
For example, the cy.get() command can be used to find elements in the page based on their CSS selector. The .children() and .parent() commands can be used to find the child and parent elements of a given element, respectively. The .closest() command can be used to find the closest ancestor of a given element that matches a given selector.
These commands can be combined to traverse the page and interact with elements in a variety of ways. For example, you could use the cy.get() command to find a button on the page, and then use the .closest() command to find the closest ancestor of that button that has a specific class. You could then use the .parent() command to find the parent element of that ancestor, and so on.
cy.spy(): This is a utility function, using which you can wrap the method in spy to record calls to and arguments of the function.
Here is an example of how to use the cy.spy() utility function:
cy.spy(util, 'addListeners')
App.start()
expect(util.addListeners).to.be.calledConclusion:
The above-shared commands are the commonly used cypress commands. It can be helpful when you are using Cypress in your current project or if you are preparing for your interview.
Thanks for reading. Happy Learning! AB
Thanks, Naveen AutomationLabs for the support and guidance.
