How to Select Page Element in Testcafe? Select a correct element is really important while performing automation. In testcafe Selector, the function allows selecting an element. Before performing any selector operation. you have to find a Path to interact with the element. that is called Xpath.

Select Page element in TestCafe

In Testcafe Selector function allow finding the dom tree elements.

Selector('h1')

There are many ways to get the element path. By Id, By Name, By CSS, By a unique attribute, also we can create custom XPath and create relations between elements like child, parent, or sibling. Let’s see some testcafe element selector examples.

Select an element by Id in Testcafe

Find the element Id and user it with # in selector as shown in the below example. Selector('#developer-name')

const nameInput = Selector('#developer-name')

Let’s see one testcase example, that opens the browser, navigates to the URL, and enters “Hello” into the input. that input is selected by ID.

Before use select, you must import it from testcafe so the first line of the test will be import { Selector } from 'testcafe';

import { Selector } from 'testcafe';
fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`;

test('My first test for Home Page', async t => {
    const nameInput = Selector('#developer-name')
    await t .typeText(nameInput, 'Hello')
    .wait(5000)
});

Select an element by Class in Testcafe

Find the element class and user it with . in selector as shown in the below example. Selector('.slider-container')

const slider = Selector('.slider-container')

Let’s see one testcafe automation example, that opens the browser, navigates to the URL, and does the Mouse hover on the slider.

import { Selector } from 'testcafe';
fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Testcafe Mouse hover example', async t => {
    const slider = Selector('.slider-container')
    await t .hover(slider)
    .wait(5000)
});

Select an element by Attribute in Testcafe

Selector.withAttribute Method issued to Select an element by attribute and attribute values. withAttribute method has multiple parameters that we can use as per requirement.

withAttribute(‘attribute_name’)
withAttribute(‘attribute_name’, (‘attribute value’))

Example and Syntax:

// Selects input elements that have the 'data-testid' attribute.
// This attribute can have any value.
Selector('input').withAttribute('data-testid');

//Select input with attribute name "data-testid" and attribute name "name-input"
Selector('input').withAttribute("data-testid", "name-input")

Let’s see one testcase example, that opens the browser, navigates to the URL, and enters “Hello” into the input. that input is selected by attribute name and attribute value.

import { Selector } from 'testcafe';
fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Testcafe Mouse hover example', async t => {
    const nameInput = Selector('input').withAttribute("data-testid", "name-input")
    await t .typeText(nameInput, 'Hello')
    .wait(5000)
});

Select an element by Custom XPath in Testcafe

Xpath is the most recommended way to interact with an element while you working with a selenium web drive. but in testcafe, Personally, I will not recommend keeping XPath as a selector on priority.

Yes, We can use Custom XPath in testcafe, Create a custom function, import it into your test file. Let’s see an example.

Create a js file xpathSelecor.js or keep any other name.

import { Selector } from 'testcafe';

const getElementsByXPath = Selector(xpath => {
    const iterator = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null);
    const items = [];

    let item = iterator.iterateNext();

    while (item) {
        items.push(item);
        item = iterator.iterateNext();
    }

    return items;
});

export default function (xpath) {
    return Selector(getElementsByXPath(xpath));
}

Now import it into your test file and use the getElementsByXPath function.

In below TestCafe example, opens the browser, navigates to the URL and enters “Hello” into the input. that input is selected by custom XPath //*[@id='developer-name']

import { Selector } from 'testcafe';
import XPathSelector from './xpath-selector';

fixture `Testcafe Automation tutorial`
    .page `https://devexpress.github.io/testcafe/example/`;

test('Testcafe Mouse hover example', async t => {
    const nameInput = XPathSelector("//*[@id='developer-name']");
    await t .typeText(nameInput, 'Hello')
    .wait(5000)
});

Testcafe Selector by elements relations

Testcafe provides methods to select an element by relations between elements. like Child, Parent, Sibling, prevSibling.

find child element in testcafe

Syntax:

// Selects all child of all h1 elements.
Selector('h1 ').child();

// Selects all closest children of all h1 elements.
Selector('h1 ').child(0);

// Selects all furthest children of all table elements.
Selector('h1 ').child(-1);

// Selects all h2 elements that are children of a h1 element.
Selector('h1 ').child('h2');

find parent element in testcafe

// Selects all ancestors of all ul elements.
Selector('ul').parent();

// Selects all closest parents of all input elements.
Selector('input').parent(0);

// Selects all furthest ancestors of all labels.
Selector('label').parent(-1);

// Selects all divs that are ancestors of an 'a' element.
Selector('a').parent('div');

find sibling element in testcafe

// Selects all siblings of all td elements.
Selector('td').sibling();

// Selects all li elements' siblings
// that go first in their parent's child lists.
Selector('li').sibling(0);

// Selects all ul elements' siblings
// that go last in their parent's child lists.
Selector('ul').sibling(-1);

// Selects all p elements that are siblings of an img element.
Selector('img').sibling('p');

find prevSibling element in testcafe

// Selects all preceding siblings of all p elements.
Selector('p').prevSibling();

// Selects all closest preceding siblings of all figure elements.
Selector('figure').prevSibling(0);

// Selects all furthest preceding siblings of all option elements.
Selector('option').prevSibling(-1);

// Selects all p elements that are preceding siblings of a blockquote element.
Selector('blockquote').prevSibling('p');

Example to find next sibling element in the testcafe

// Selects all succeeding siblings of all 'a' elements.
Selector('a').nextSibling();

// Selects all closest succeeding siblings of all div elements.
Selector('div').nextSibling(0);

// Selects all furthest succeeding siblings of all pre elements.
Selector('pre').nextSibling(-1);

// Selects all p elements that are succeeding siblings of an hr element.
Selector('hr').nextSibling('p');

All the above examples are performed on the URL “https://devexpress.github.io/testcafe/example/”. you may also use the same for practice.