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.
