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 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.