Getting an error "The action target located outside the layout viewport" in testcafe

Question

I am trying to test a website using testcafe and after clicking on dropdown, it is throwing me an error saying -

**The action target (<button aria-haspopup="listbox" tabindex="0" id="aab-select-target" aria-labelledby="aab-select-label aab-select-target" aria-expanded="false" class-"target"



">..</button>) is located outside the layout viewport.**

I try to get that dropdown using a selector from console and it is getting there value. But when I am trying through code the same thing, it us showing the above mentioned error.

Answer 1

One workaround would be to use ClientFunction() rather than the native Selector(). As you stated if you go into your client console you have access to it, you can use the client to do native JS commands such as click, or whatever else you wish to do with the dropdown element. Just remember that doing this sort of behavior switches context from node to the browser under test.

example:

click_on_troublesome_dropdown = ClientFunction(() => {
    const drop_down = document.querySelectorAll('#my_dropdown > li')
    drop_down.forEach(li => {
        if (li.textContent == 'dropdown_item_you_want_to_click')
             li.click()
    })
})

see more info here: https://testcafe.io/documentation/402671/reference/test-api/clientfunction