Clicking menu item that is not in view

Libraries Browser
1

Hello everyone,
I would like to ask for help on a challenge I can’t seem to find a solution to.

For example, if you go to Browser Library Keyword documentation and search for xpath: //ul[@id="keyword-shortcuts-container"]//li//a[text() = "Wait For Request"]
via dev tools elements search, it is immediately located.

However, I have a long menu of items, which can only be located with xpath when they are in view.
There are “Scroll to” and “Scroll by” keywords. But they take numeric position values as arguments, not a locator or a text.

Does anyone have a suggestion how to approach this issue?

Thank you and best regards
JC

2

Okay, asking the question led me into some more searching. I figured that, unlike Robot docs, which is a list with list items, the list and items I am trying to access actually look like this:

image
image1083×496 11.3 KB

the

s, which act as list items, are not static, but are updated dynamically as you scroll down the menu.
This however leaves me with even less clue on how to solve the issue. Other than maybe brute force scrolling and checking if item is visible before performing test on it. But I would really like to avoid such a solution, if there is a more elegant way to do it.

3

I ended up doing it by scrolling down the menu. Not sure it’s the best solution, it sure takes a long time to scroll. But it’s best I could come up with.

Still open to other suggestion, if anyone has some good ideas.

Thanks!

4

Hi Josh,

I’m not really clear on the problem?

  • Do you have a menu of links that only appears when you hover/click on a button?
    • this menus is big and you are having trouble getting to the item you want to click?
  • something else (I totally misunderstood?)

Dave.

5

Hi Dave, thank you for stopping by.

The menu is big and the menu items (class=“v-virtual-scroll__item” on the picture) are populated dynamically, based on where in the menu you are currently.

So, for example, if menu is scrolled to the top, you see first 14 items (“Item 1”, "Item 2,… “Item 14”).
If you want to click “Item 194”, you first need to scroll the menu until it appears. Only then it becomes attached and visible in DOM. The items aren’t indexed though, so there is no knowing where it is and you can only get to it by scrolling until it appears.

I hope this explains the situation better.

Best,
Josh

6

Hi Josh,

As an aside - That sounds like its worthy of a defect for bad UX design, as you should not need to scroll through more than 1-2 pages of menu items to find anything. (I know this doesn’t help solve the issue, but it’s a suggestion to discuss with your team)

Now assuming the menu item you want to click looks something like:

<div class=“v-virtual-scroll__item” style="top: 123px;">
    <a href="/page/to/open">
        <img src="/path/to/icon"/>
        <span>Click This One</span>
    </a>
</div>

Q1) Is if there is scroll elements in the menu?

  • up and down arrows at the top and bottom of the menu?
  • a more item in the menu you can click for the next page?
  • something else?

The best way to handle this is with several keywords, one to open the menu, one to go next page on the menu, one to scroll till you find the menu item and then a main one to navigate to the menu item that you call from your test cases, something like this:

*** Test Cases ***
Open My Menu Item
    Nav To Menu Item    Click This One

*** Keywords ***
Nav To Menu Item
    [Arguments]    ${MenuText}
    Open Menu
    Scroll Item to View    ${MenuText}
    Click Element    //div[@class="v-virtual-scroll__item"]//span[text()="${MenuText}"]

Open Menu
    # I guess you have the code to do this bit

Scroll Menu
    # do something to scroll the menu down 1 page
    # Hopefully you have already worked this out otherwise see Q1

Scroll Item to View
    [Arguments]    ${MenuText}
    Scroll Menu
    ${passed}=    Run Keyword And Return Status    Page Should Contain Element    //div[@class="v-virtual-scroll__item"]//span[text()="${MenuText}"]
    IF    not ${passed}
        Scroll Item to View    ${MenuText}
    END

You’ll notice Scroll Item to View calls itself, this is intentional but can result in scrolling forever if the menu item is not found, so you might want to put in a way to detect if you reached the end of the menu and make Scroll Menu fail if that happens.

Hopefully that will help,

Dave.

3 Likes
7

Hi @damies13

Thank you for your comments.

I believe the UX design isn’t perfect either. My work on this test was actually part of interview process. If it was a project I worked on as an employee I would definitely raise a concern.

I solved the challenge in a way similar as you suggested. With a bit of extra mathematics involved.
To summarize:

  1. Check how many menu items are visible in menu
  2. Take a single item height
  3. Scroll the menu down until the item is found by num_of_items * item_height pixels, so it at least speeds up the scrolling by the factor of num_of_items (I suppose).
  4. If item is not found, there is a Fail just outside the for loop.

I didn’t enjoy using this approach, but with the UX presented it was best I could come up with.

Best

1 Like