Error in 'Select by Value' function (Angular)

Hi community!

I am trying to execute a test-case on a dropdown field and hence using the function - ‘Select-by-value’
but the problem here is that the application I am testing is using Angular and when I try to select a component via ‘Spy web’ and execute the test case then it gives me an error of -

Element should have been “select” but was “div”

This is because we are using ‘mat-select’ and not basic ‘select’ class

Please tell me on how can I test this particular dropdown element.

To understand the above case, kindly refer to ‘Basic mat-select’ option on Angular Material UI component library

As far as I know, in this forum, nobody has ever stated that he/she is successful in testing Angular-based web apps using Katalon Studio. Me? No, I have never experienced tesitng Angular apps in Katalon Studio.

Possibly you should rather use “protractor” to test Angular-based web apps.

The official end to end testing framework for Angular apps

I suppose Angular-based web app deserves specially designed testing tool like protractor.

I edited the title of this post. I appedned “(Angular)”

@yashna.rampal

While Angular (ng) is in my view an overly complicated back-to-front framework, it’s output is merely HTML, CSS and JavaScript – all of which makes it an easy target for Katalon Studio.

You can (and many other people have) certainly test against angular AND Material based web pages in Katalon and Selenium. I don’t know why Kazurayum is suggesting it’s not testable in Katalon Studio.

And you are right, you cannot use the various “Select Option” APIs with HTML-constructed dropdowns – you need to address the component parts individually.

Here’s the code I used to select the Favorite Food “Pizza” on the demo site you provided. It even prints the result three different ways:


// CSS Selectors to access the Pizza option from Favorite Food
String selSelect = "#mat-select-0"
String optionPizza = "#mat-option-1"
String placeholder = "#mat-select-0 span.mat-select-placeholder"
String selectedValue = "#mat-select-value-1>span>span"

// Navigate to the Material test page
WebUI.navigateToUrl("https://material.angular.io/components/select/overview")
WebUI.waitForPageLoad(5)

// Create Katalon Test Objects dynamically
TestObject toPlaceholder = makeTO(placeholder)
TestObject toSelect = makeTO(selSelect)
TestObject toPizza = makeTO(optionPizza)
TestObject toSelectedValue = makeTO(selectedValue)

// Make sure the Favorite Food dropdown is visible
WebUI.waitForElementVisible(toSelect, 30, FailureHandling.STOP_ON_FAILURE)
WebUI.waitForElementPresent(toPlaceholder, 30, FailureHandling.STOP_ON_FAILURE)

// Click to open the dropdown
WebUI.click(toSelect)

// Make sure the pizza option is visible
WebUI.waitForElementVisible(toPizza, 30, FailureHandling.STOP_ON_FAILURE)

// Choose the Pizza option 
WebUI.click(toPizza)

// Make sure the empty placeholder disappears (meaning Pizza is now selected) 
WebUI.waitForElementNotPresent(toPlaceholder, 30, FailureHandling.STOP_ON_FAILURE)

//Print the selected value
WebUI.comment WebUI.getText(toSelectedValue)
println WebUI.getText(toSelectedValue)
String js = "alert('" + WebUI.getText(toSelectedValue) + "');"
WebUI.executeJavaScript(js, null)

The test above creates test objects dynamically using makeTO. You can use regular Test Objects stored in your Object Repository if you wish.

1 Like

Angular vs. non-angular shouldn’t matter here. Yes there are complications when using certain JS libs (especially React, which is the most challenging one I’ve seen), but if it runs in a browser, it can ultimately be automated using Katalon/Selenium.

You’re actual problem is relying on the Spy Web, which is normally pretty good at that kind of thing, but not in every case. Looking at the example that you linked (thank you for that btw, it’s extremely helpful), here’s what an option for the select looks like:

Notice that these elements do not appear until after you’ve clicked the <mat-select> element. With that information, we’ll need to do this in 2 steps:

1.) Click the <mat-select> element. This will generate the list of options.
2.) Click the <mat-option> element for your intended option.

By extension, we’ll need 2 locators for each of these elements. Since I don’t know what your HTML looks like, I will do all of the above for the sample page that you provided. I will be using Selenium to do this, but you can always do it with Katalon keywords by putting the below xpaths into Test Objects, then calling the WebUI.click() keyword like you normally would:

WebDriver driver = DriverFactory.getWebDriver();
WebElement matSelect = driver.findElement(By.xpath("//mat-select[@id='mat-select-0']"));
matSelect.click();
WebElement matOption = driver.findElement(By.xpath("//mat-option[@id='mat-option-0']"));
matOption.click();

I tested this on your sample page and it worked as intended; the first option was selected.

If you need help doing this using Test Objects/WebUI calls, let me know. We will also need to see the HTML to give you xpaths that will work for your application.

1 Like
2 Likes