CODEWITHSUNDEEP
javascriptclasstestingselectortestcafe
Skye Sheffield
Skye Sheffield

Reputation: 21

Using Selectors in TestCafe, Need to grab element with id and class

Using TestCafe, I need help selecting an item from a table and clicking on that item. There are several tables on the webpage with item of this class="table-entry item clickable", but I only want to select the first instance of this class after id="alert" where id="alert" is the start of my desired table.

There are several different things I have tried, but none of them have worked properly for me. Here are some of those attempts.

test('Try #1) Select and click on item', async t=> {
    const table_element = await Selector('#alert').child('.table-entry.item.clickable');

await t
// clicks on the desired table element
    .click(table_element)
});

test('Try #2) Select and click on item', async t=> {
var table_element = page.getElementByID("alert").getElementsByClassName("table-entry.item.clickable")[0];

await t
// clicks on the desired table element
    .click(table_element)
});

Any help would be appreciated. Let me know if any additional information is needed that I left out.

Upvotes: 2

Views: 1563

Answers (1)

Alex Kamaev
Alex Kamaev

Reputation: 6318

As far as I understand from your description, you have markup similar to the following:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

<div id="alert">
    <div>
        <table class="table">
            <tr>
                <td>
                    <div class="table-entry item clickable">
                        item
                    </div>
                </td>
            </tr>
    </div>
</div>
</body>
</html>

In this case you can't use child selector from your first example, because child selector returns only direct children oа an element. It's better to use the following Selector

await t.click(Selector('#alert .table-entry.item.clickable'));

This selector returns a descendant of the #alert element with the .table-entry.item.clickable class regardless of elements' hierarchy

Upvotes: 3

Related Questions