Selectors

A selector is a function that identifies a webpage element in the test. The selector API provides methods and properties to select elements on the page and get their state. You can use selectors to inspect elements state on the page, define action targets and assertion actual values.

Do not modify the tested webpage within selectors. To interact with the page, use test actions.

Quick Start

Import the Selector constructor from the testcafe module. Call this constructor and pass a CSS selector string as an argument.

import { Selector } from 'testcafe';

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

The article constant now stores a selector that identifies an element with the article-content class.

You can use this selector to take actions on this element.

await t.click(article);

Or use it in assertions.

await t.expect(article.scrollHeight).eql(1800);

You can write a selector that matches several page elements and then filter them by text, attribute, etc.

const windowsRadioButton  = Selector('.radio-button').withText('Windows');
const selectedRadioButton = Selector('.radio-button').withAttribute('selected');

If you need to find a specific element in the DOM tree, you can search for it using the selector API.

const buttonWrapper = Selector('.article-content').find('#share-button').parent();

For more information about selectors, see the detailed topics in this section.

Note that you can use client functions to obtain page information that does not relate to elements' state.