Traversing in webpage using keys(TAB)

Archive
,
1

Hi,
Is there anyway we can traverse through webpage using TAB or any other keys instead of traversing using spy/xpath/css etc ?
Looking for : I am trying to move to next hidden element from a found element and do some actions on that hidden element.
In my case hidden element is an text box where i need to input some string.

Thanks,
Vishnu

2

Hi Vishnu

First, let’s be clear about some of the terminology you’re using:

A “hidden element” in HTML is typically not available for tabbing. But this is only partially true. For example, using label elements associated with some input elements can allow you to land on them using the TAB key and check a checkbox/radio control using the spacebar. Not the best UI, but it can work. Input elements of type “hidden” are of course always hidden but there is also a “hidden” attribute which can be applied to any element.

Other elements can be “hidden” in other ways: most notably by having their CSS “display” property set to “none” or their “visibility” property set to “hidden”. And others can have their width/height set to zero.

So, as you can see, “hidden” can mean many different things in the HTML but all mean the same thing to us humans. And when it comes to answering your question… we need to be clear, “what do you mean by hidden?” :slight_smile:

I’m guessing you’re not talking about any of those types of “hidden” – am I right? I think you might be talking about “off screen”, where the elements you want to target are perhaps below the visible portion of the page, where a human user might need to scroll to see them – right?

So, if that is the case, read about:

https://docs.katalon.com/display/KD/[WebUI]+Scroll+To+Element

https://docs.katalon.com/display/KD/[WebUI]+Scroll+To+Position

And also https://docs.katalon.com/display/KD/[WebUI]+Send+Keys

Now, having said all of that, I would strongly advise you NOT to “blindly” land on a control and start issuing text into it. I would advise you to be more specific about the control you’re targeting, using its ID or similar. If you need to see the cursor flashing in the control, then use https://docs.katalon.com/display/KD/[WebUI]+Focus before you enter the text.

Hope this helps!

Russ

1 Like
3

Hi Russ,
Thanks for your reply.
As i am bit new to this Web automation environment ,i would have not put the right terms here ,pls apologize for the same.

No , i am not looking for the scroll downing of a page to find the elements which are not visible to human eye.
I meant that , if there are some elements which will be pop-up when only by putting mouse over it’s parent element OR by clicking on it , how we can able to perform any operation on such hidden elements(though they can find using locators such as xpath,css,tag etc , but consider for now they can’t be located by existing methods )?
Let’s consider the example for more precise : @ https://www.katalon.com/, where **products **is visible ,but when click or put mouse over it pops with it’s sub-elements in it.so now considering **products **can be located using traditional locators and now i would like to move my cursor over it or select it by using send keys method (TAB would be appropriate here i guess) to do any further actions on it.

So i need to locate or select an element in a page with reference to any other identifiable element.

Could you please help what to be done to achieve the same ?

Thanks,
Vishnu

4

Hi Vishnu

Using the Katalon page example as you suggested, if you watched 100 users navigating that page, 101 of them would not traverse it using the tab key :wink: If you contrive mechanisms for testing that are far removed from what actual users do, what are you testing? Because you’re not testing your website for humans… right?

So…

Put this method in a Keyword class:

  /**
   * Hover over an element using the Selenium WebDriver.
   * @param selector (String) CSS selector for the element.
   */
  static void Se_hover(String selector) {
    WebUI.comment('Se_hover hovering ' + selector)
    WebDriver driver = DriverFactory.getWebDriver()
    WebElement elem = driver.findElement(By.cssSelector(selector))
    Actions act = new Actions(driver)
    act.moveToElement(elem).build().perform()
    WebUI.delay(2)
  }

You’ll need these imports:

import org.openqa.selenium.WebDriver as WebDriver
import com.kms.katalon.core.webui.driver.DriverFactory as DriverFactory
import org.openqa.selenium.WebElement
import org.openqa.selenium.interactions.Actions
import YOUR_KEYWORD_CLASS

You can use the method like this (in the Script view of your test)

Se_hover("css-selector-to-your-element")
5

Hi Russ,
Thanks for the answer.
I knew that many wouldn’t be using TAB method in their automation , until if the element is not hidden or not identifiable by locators. so i feel TAB would be one of the easy method to achieve it.

Thanks,
Vishnu

6

Thanks @Russ_Thomas, your solution worked beautifully for elements hidden in a dropdown (scrollToElement was not working for elements that weren’t immediately available on the DOM).

1 Like