What to look for if Selector is "broken"?

[anon96645512]

Hi,

I'm trying to use a Selector to select an element in a list in a dropdown menu (which actually might not be a real dropdown menu).
However, I'm not able to select anything inside of this dropdown menu. What can be the reason for this and how do I go about looking for the reason? I'm using the debug-on-fail flag when testing and I clearly see the elements I'm trying to select, when I debug the DOM with the test broken.
This is more a general question on how to "debug" Selectors when trying to select clearly visible elements - that's why no source code is included, as the chunk of code is too large.

Cheers!

[MarinaRukavitsyna]

Hi @Adrian_Westh,
The issue might be caused by the fact that a sub-item element is not visible when the click action is performed. For example, you did not open a menu before clicking an item or the item that has not been rendered yet (e.g. the virtual mode is used or menu data is loaded on demand). Would you please provide me with a link to your site and specify the required item so that I can check for an appropriate Selector for you?

This is more a general question on how to "debug"

The following help topic describes how you can debug your test:

Debugging

[anon96645512]

Hi Marina and thanks for your answer,

The site is currently being developed, so I've made two pastebins: One with the dropdown menu closed and one where it's open.
I want to select an arbitrary table row inside of the dropdown menu.

Pastebin when the dropdown is open: https://pastebin.com/FPir2igB - the relevant table to select from starts at line 709:
I know it's not easy to get an overview of all this code, but I'm not sure how to show it to you otherwise..

If it's a help, here's a Pastebin of the HTML when the dropdown is closed: https://pastebin.com/2a065BZK (line 973).

I've tried a lot of different selectors to get hold on an arbitratry table row. E.g. Selector('#sagsvaelgertable').find('tr').nth(0) and Selector('#sagsvaelgertable').find('tbody').nth(0).child(0) and just simply Selector('tr').nth(0). None selects an elements and I'm 100% sure that the dropdown has been clicked.

Any suggestions on how to proceed?

EDIT: I don't think it is possible to select anything after the dropdown has been toggled.

[MarinaRukavitsyna]

Would you please add a single drop-down box with 1-3 items to this online example like I did with dxSelectBox? If it's a .NET site, please send me a sample project with a single drop-down box so that I can test it easily.

By the way, here is test code for the mentioned dxSelectBox:

import { Selector } from "testcafe";

fixture `My fixture`
    .page `file:///D:/selectBox.html`

test('My test', async t => {
    await t

        .click(Selector('.dx-dropdowneditor-icon'))

        .click(Selector('.dx-scrollview-content').find('div').withText('SuperHD Video Player'))
        .expect(Selector('.dx-selectbox-container').find('input').value).contains('SuperHD Video Player');
});

[anon96645512]

It does not seem to be possible to extract just a small example - the HTML is deeply entertwined and is on top of that generated in the project (which isn't ASP.NET but JaveEE).
Thank you very much for setting up an example; it looks like my approach is the same as yours. There gotta be something blocking the selection on my site.
I've now ended up calling a ClientFunction() to inject jQuery which luckily where able to click on elements aquired with jQuery selectors.

Thank you again.