Cypress only support CSS Selector, unlike Selenium which support vast way of identifying web element. So in order to work with Cypress we must be familiar with CSS selector.
I have listed down Syntax of CSS selector for MDN Web Docs source below,
Basic selectors
Universal selector
Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.
Syntax: * ns|* *|*
Example: * will match all the elements of the document.
Type selector
Selects all elements that have the given node name.
Syntax: elementname
Example: input will match any <input> element.
Class selector
Selects all elements that have the given class attribute.
Syntax: .classname
Example: .index will match any element that has a class of "index".
ID selector
Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document.
Syntax: #idname
Example: #toc will match the element that has the ID "toc".
Attribute selector
Selects all elements that have the given attribute.
Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).
Grouping selectors
Selector list
The , is a grouping method, it selects all the matching nodes.
Syntax: A, B
Example: div, span will match both <span> and <div> elements.
Combinators
Descendant combinator
The (space) combinator selects nodes that are descendants of the first element.
Syntax: A B
Example: div span will match all <span> elements that are inside a <div> element.
Child combinator
The > combinator selects nodes that are direct children of the first element.
Syntax: A > B
Example: ul > li will match all <li> elements that are nested directly inside a <ul> element.
General sibling combinator
The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.
Syntax: A ~ B
Example: p ~ span will match all <span> elements that follow a <p>, immediately or not.
Adjacent sibling combinator
The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.
Syntax: A + B
Example: h2 + p will match all <p> elements that directly follow an <h2>.
Column combinator
The || combinator selects nodes which belong to a column.
Syntax: A || B
Example: col || td will match all <td> elements that belong to the scope of the <col>.
Inspecting CSS using Test Runner
You can also inspect and get CSS via Test Runner. Once the test runner is running just visit the URL then click the Selector button beside URL this will put inspect on the mouse click.
Unlike the Firebug and Chropath, Cypress will provide the selector along with the cypress syntax to just copy and paste it in the editor.
