Working on Lists or Dropdown

Hi there Guys,

LONG POST AHEAD! Take time to read. . . :wink:

Ok so, I’ll be posting this since I notice this last few weeks, some or many of the posted issues
here in the forum are regarding or they are dealing with lists or dropdown. So I’ll be sharing
you some idea that might help you because when dealing with lists or dropdown I always use this approach and it is very effective. Its not quite easy working on lists or dropdown, it requires a lot of observations and tries but when you get the pattern it will be easy for you.

If you guys notice my replies to those issues most of them are common or the same. So to make it more clear I’ll try my best to explain everything here. . . So let’s get it on!

I’ll be using google apps as an example. You can also consider this as a dropdown list, the approach is also the same.

Sample #1 (Using Attribute)

As you can see in the image, All of them has a common locator of class=“gb_h”, since it is consistent we can use that as our objects locator. In other list it can be name, title, role etc. . .

IMPORTANT:

//always import this
import com.kms.katalon.core.webui.common.WebUiCommonHelper
import org.openqa.selenium.WebElement

Then as you can see in the code below, after the execution, it successfully captured all the items related to “gb_h”.
Those blank items in the list are the apps in “More” options, the code also captures it because it also has “gb_h” class, it is blank because it is not yet visible to the website. Will show you the difference later when using xpath. . .

Then you can now do your desired event using the methods of WebElement (Line: 24)

lists[1].click()
lists[1].getAttribute("")
lists[1].size()
lists[1].getText()
lists[1].isEnabled()
//and more. . . . .

Sample #2 (Using Xpath)

Almost the same procedure like what we did in sample #1 but now we are going to get the xpath of the item.

//this is the xpath of the default items that is visible to the website (Account, Search, Maps, etc. . . .)
//*[@id="gbwa"]/div[2]/ul[1]/li[1]
//*[@id="gbwa"]/div[2]/ul[1]/li[2]
and so on. . . . .

And this is the xpath of the items in "More" options. (Docs, Books, Duo, etc. . . .)
//*[@id="gbwa"]/div[2]/ul[2]/li[1]
//*[@id="gbwa"]/div[2]/ul[2]/li[1]
and so on. . . . .

See the difference?

Now, lets use the xpath of the default items as our test object.

Did you notice that I removed the index from the last part of the xpath? Because that’s their identification, that’s their uniqueness. Removing it making them all the same. It is the same logic when you are using attribute, all of them should be the same (its like using contains) so that the code will capture all the items that are equal or related to the xpath. In short, once the code finds it, all the items in the list will be captured.

Now after execution, see this image. Compare this to our sample #1


All the blank items in our array list has been gone, because the xpath of items in “More” options is not the same as the xpath in the default items but they have the same class which is “gb_h”.

//sample code

int totalSize = lists.size()
Assert.assertEqual(13, totalSize)
for (index = 0; index < totalSize; lists++)
{
    if (lists[index].text == "Youtube")
    {
        String text = lists[index].getText()
        println text

        lists[index].click()
    }
    else
    {
       //other steps. . . .
    }
}

So now you have two options when dealing with lists or drop down.

The advantage of this is you don’t have to create a test object for every item. You just making it general.

Example Scenario: Lets say you only need to click 3 items in your test case “Search, Youtube, Drive”. Using this approach you don’t need to create a test object for those 3 items. Just use their index to click them. Saves space and saves time. It is also flexible in a way that what if your test case expands that you also need to click “Account, Translate”, so just use their respective indexes.

NOTE: Google attribute values changes from time to time so maybe when you try it on your side the value of xpath or attribute will be different or the same, depending on location maybe. But the logic will be the same. While I’m creating this trick that’s the value I am getting.

P.S. Just remember when dealing with lists and dropDown, always look for attribute values that are common/same to the items. For Xpath, observe their differences. . .

Hope this topic makes sense to you readers and I hope this also helps you in your automated tests . . :slight_smile:

Cheers :beers:

7 Likes

Good info right here

1 Like

Hi Emmanuel,

Thank you, Bro! I appreciate it. . . :smile:

Cheers :beers:

Hi @Arnel,

I was trying your first sample, but I cannot get the elements list when the console is open. I try to be more clear:

If I navigate into the console the list goes out, I can’t read the attribute.

It is impossible work as your first screen

If I navigate into the console I get following


the list comes out and I cannot view the attribute.

How did you do?

Hi @AndyCapp,

It is not impossible. My example proves it. You just have to make sure that the list is present before collecting the items.

And try to be more observant as I mentioned here. . .

Take note of this as well. . .

Maybe this affects your objects. . .

You can also share here the attribute you have used and the value so that we can fix your problem.

I hope that makes sense. . .

Hi @Arnel Arnel,
thanks in advance for your response, more useful.

I tried again now am able to click some element as ‘Account’ or ‘Search’ ecc ecc

That’s great! You’re welcome.Glad it helped. . . :smiley:

Cheers :beers: