Mat-select value dropdown with angular robotic framework

Libraries
1

Hi Team,
I am not able to select drop down value which is in angular. Which is having mat options. Tried with click element its working when i mention xpath but i am providing value from excel sheet, How can I select value from down in the case
Thanks in advance

Capture1
Capture11321×327 45.1 KB

2

image
this is my drop down list

3

Hi Lavanya,

<mat-option> is not a standard html tag, so Click Element is the correct keyword :+1:

The question when it comes to building the xpath to use the values is if the values are directly inside the <mat-option> or in another tag under <mat-option>?

if it’s directly inside you can do something like this:

    Click Element    //mat-option[text()='GCB']

And then replace GCB with the robot parameter that you’re using.

If it’s inside a span or div that’s inside <mat-option> e.g.

<mat-option id="mat-option">
  <div class="some-styling-class">
    <span>GCB</span>
  </div>
</mat-option>

Then you’ll need to do something like this:

    Click Element    //mat-option//span[text()='GCB']

The key is the text() allows you to select by the content of the element.

Dave.

4

Hi Dave,
Thank you for the quick response.
I am attaching the code snippet for this drop down.
Here first one id=mat-select-2-panel is for the complete drop down.
I think values are not in span, could you please check “id=mat-option-0”, “id=mat-option-26”, “id=mat-option-27”

Capture1
Capture11321×327 45.1 KB

5

I am doing these two, to clicking on the drop down and next selecting GCB, but getting error.
click element xpath://*[@id=“mat-select-2-panel”]
Click Element //mat-option[text()=‘GCB’]
ERROR:
Element with locator ‘//mat-option[text()=‘GCB’]’ not found.

6

Hi Lavanya,

With out being able to load the page myself i can only rely on the screen shot’s you’ve provided, but the screenshot only shows the <mat-option> elements collapsed, so we have no idea what’s inside them, only you can tell us that.

The face that the xpath //mat-option[text()=‘GCB’] fails tells us the displayed text is in another element, so you’ll need to expand one of the <mat-option> elements and have a look.

As these are not standard html elements, it’s custom and unique to your application we can’t know what your development team did?

FYI - You can use the screen that shows the html elements to test your xpaths, make adjustments until you get it to work and once you know what xpath will select the element you want copy it into your robot script.

There’s also a good tutorial on writing xpaths here: XPath Tutorial

Dave.

7

Expanded Mat option

Capture2
Capture21286×210 11.2 KB

8

Hi Lavanya,

I was close, this should do what you want:

Click Element    //mat-option/span[text()=' GCB ']

You can also do this:

Click Element    //mat-option/span[contains(text(), 'GCB')]

However this will match multiple rows (GCB, ICG & GCB and ICG & GCB & GCG)

So to ensure you get a single match you’ll probably need to do this:

Click Element    (//mat-option/span[contains(text(), 'GCB')])[0]

where the xpath inside the () gets multiple matches, and then then you select the first of the multiple matches.

hope that helps,

Dave.

9

This worked, Thanks for your help and quick response.
Click Element //mat-option/span[contains(text(), ‘${businessSector}’)]

Thank you Dave !!

2 Likes
10

Hi Lavanya,

Be careful with the contains method in xpath, as I mentioned it can give you multiple matches, and with your data likely will, which may cause your script to fail or select the wrong option.

Dave.

1 Like
11

Sure, Thank you so much.
having one more query, as attached in the image, I have to select the list type but getting error: element with locator not found.(used correct xpath)
actually this drop down is in box as I highlighted with blue color, so need to add anything to click elements inside this box.
Thanks in advance.

Capture3
Capture31817×660 38.4 KB

12

Hi Lavanya,

It depends on the HTML and how your development team constructed the page, but I can’t tell you that based on this screenshot.

A common approach when building a multi step form like this is to have the navigation pane (the bits outside the blue box) as one html with a frame or iframe and then load each form page within the frame or iframe.

If this is the case the and the blue box is a frame of iframe, then you’ll probably need to use Select Frame (with the frame’s locator) first to then access the fields inside the frame.

Quite likely you’ll also need Unselect Frame to get out of that frame and be able to access the “next”, “continue” or whatever the navigation button name is to proceed to the next page of the form.

Dave.