There are three ways to create element selectors:
TestCafe Studio automatically adds element selectors to on-page action parameters when you record a test by interacting with a webpage. See Auto-Generated Element Selectors.
Use the element picker to choose a webpage element and generate an element selector for the element.
Use the element selector constructor.
When you interact with a webpage during recording, TestCafe Studio records on-page actions, automatically generates element selectors for target elements and adds them to the Element Selector parameter.
TestCafe Studio produces a set of element selectors for each target element. To see all available element selectors, click the button next to the CSS Selector input.
When you focus or modify the CSS selector in the action parameters, you can see all the matching elements highlighted on the webpage. The feature is available only during recording.
Use an element picker to select a target element on the tested webpage during recording. To do this, click the button next to the Element Selector field in the test action parameters area and select the element on the webpage. TestCafe Studio generates element selectors for this element and adds one to the Element Selector parameter.
The constructor is available:
in an on-page action's Element Selector parameter;
in an assertion parameters;
in the Define Element Selector action.
The animation below demonstrates how to create an element selector that:
ulelements on a page;
labelelements in each
div.containerselector for each label element.
Then you can use the created element selector in on-page actions, for example, in the Click action.
An element selector can return multiple elements. If you use this selector in an on-page action, the action is performed on the first matching element. If you use it in an assertion, the assertion checks properties for the first element.
If added methods filter out all elements, an element selector returns null. If a test action or an assertion uses this selector, the test fails.
In the element selector constructor, you first specify a base selector that returns a matching set of elements.
The base selector can be one of the following types:
CSS Selector - A CSS selector string that matches one or more elements. For example, you can specify #submit-button for a webpage element with id="submit-button".
Function - A regular function that returns an element or array of elements. Use functions when you need to implement custom logic to get a target element.
If you specify a selector in the constructor during recording, all matching elements are highlighted on the webpage.
In the element selector constructor, you can add one or more element selector methods to filter the matching set or search for related elements. The methods are called one by one.
To add a method, click the Add Method button and select a method in the list.
Specify the method's parameters (if needed) and click Done.
To remove a method, select it in the constructor and click the Remove button.
You can also drag the added methods to reorder them.
When an on-page action or an assertion uses an element selector, TestCafe Studio waits for the target element to appear in the DOM hierarchy and become visible within the element selector timeout. You can set the timeout in the run configuration's Advanced options.
If TestCafe Studio cannot find the target element in the DOM, the test fails.
See Wait for an Action's Target Element for more information.