Cypress Difference between Get and Find command

In cypress, get() and find() commands are very much identical but have their own distinguish. The objectives which are achieved by these two methods are also pretty identical. Both the commands have args that are optional but also vary in type. 

Let's see the differences between these two.

1. Used directly with cy object

Get

Get can be used directly with cy object. This is perfectly fine.

 cy.find("ul#sub-menu li a");

Find

The main difference is that find() can be chained with other methods and cannot be used directly with the object cy. It can only be chained with methods sticking with object such as get(). If you will try to use find directly, you will get message "A child command must be chained after a parent because it operates on a previous subject." 

 cy.find("ul#sub-menu li a");

2. Syntax

 Get

cy.get(selector)
cy.get(selector, options)
cy.get(alias)
cy.get(alias, options)

Find

.find(selector)
.find(selector, options)

You can use cy.get() for aliases of primitives, regular objects, or even DOM elements which is not possible with Find command. Also, get command has one additional option withinSubject.

3. withinSubject

Get

The default value for this is null, as this determines the origin point of the elements to be searched. If omitted, the origin of the search will be from the root. 

cy.get('.s',{ withinSubject : document.getElementById('#Prod_id')};

Find

Find does not support withinSubject option.

4. Timeout

Get

 With Get you have common timeout for all the parent and child elements which are used as a locator

cy.get('ul#sub-menu li a',{ timeout: 9000 });

Here you can not use separate timeout for li and a. Below implementation is wrong. Here li and a will refer to all the elements of the complete page not the child of ul#sub-menu

cy.get("ul#sub-menu", {timeout: 2000}).get('li', {timeout: 7000}).get('a',{timeout: 10000})

Find

In below example timeout for ul#sub-menu will be 2000, for li 7000 and for a it will be 10000.

cy.get("ul#sub-menu", {timeout: 2000}).find('li', {timeout: 7000}).find('a',{timeout: 10000})

5. Log

Get

 With get you can set log to true or false for complete locator or parent-child elements

cy.get('ul#sub-menu li a', { log: false });

Here you can not create separate log for li and a element.

Find

 Using find along with get we can set true and false for parent and child element separately.

cy.get("ul#sub-menu", {log:true}).find('li', {log:false}).find('a',{log:true});

In below output you can observe log is recorded for ul#sub-menu and a element but it is skipped for li.

Final Verdict

Get - So finally, as we can see, the get() command is much used to fetch the elements in list or group and is mainly used to chain with cy object tracked using CSS selector.

Find - The find() command is useful in fetching the nested elements present within a tag, mostly in a parent-child concept, so it is a faster and more isolated way to fetch the unique child element efficiently.