Selector Object

Element Selectors filter the DOM and return page elements that match user-defined criteria. They are similar to CSS Selectors in both purpose and syntax. For more information, see the Element Selectors guide.

Selectors consist of the Selector constructor and Selector methods.

import { Selector } from 'testcafe';

const main = Selector('.main-content');

Selector Constructor

Every Selector query begins with an invocation of the Selector Constructor. Constructor arguments and options determine the initial results of the Selector query.

Selector Methods

Selector methods perform additional actions with the return value of the main Selector query. Selector methods narrow, expand, or otherwise modify the selection of page elements.

Filter Methods

Filter methods filter the page element selection.

Method	Description
nth	Finds the element with the specified index. The index starts at 0. Negative index values indicate the element’s location relative to the final element of the array.
withText	Finds elements with a textContent value that contains the specified case-sensitive string or matches the regular expression.
withExactText	Finds elements with a textContent value equal to the specified string (case-sensitive).
withAttribute	Finds elements with the specified attribute or attribute value.
filterVisible	Finds visible elements.
filterHidden	Finds hidden elements.
filter	Finds elements that match a CSS selector, or meet the conditions of a filter function.

Related Element Lookup Methods

Related element lookup methods find elements related to the existing element selection.

Method	Description
find	Returns an array of descendant nodes that match a CSS Selector, or meet the conditions of a filter function.
parent	Returns an array of parent elements.
child	Returns an array of child elements.
sibling	Returns an array of sibling elements.
nextSibling	Returns an array of succeeding sibling elements.
prevSibling	Returns an array of preceding sibling elements.
shadowRoot	Returns the shadow root node.