I want to select a random value from the dropdown list every time i execute my test case. The dropdown has 9-10 values, and my current script only select one (that i have scripted) but i want it to select random value every time i execute the script. Can i get help please.
1 Like
Hi @Mt.Everest,
Welcome to our community. Thank you for letting us know your issue.
You can operate it using Groovy and getNumberOfTotalOption() in WebUI as following:
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import org.openqa.selenium.WebElement
import org.openqa.selenium.support.ui.Select
import com.kms.katalon.core.testobject.TestObject
import java.util.Random
// Locate the dropdown TestObject
TestObject dropdown = findTestObject('Your/Dropdown/Object')
// Get the total number of options in the dropdown
int totalOptions = WebUI.getNumberOfTotalOption(dropdown)
// Generate a random index (between 1 and totalOptions)
Random rand = new Random()
int randomIndex = rand.nextInt(totalOptions) + 1 // Index starts from 1 in Katalon
// Select a random option using the generated index
WebUI.selectOptionByIndex(dropdown, randomIndex)
println "Random option selected: " + WebUI.getText(dropdown)
Please try and let us know if it helps
Thank you for your reply. Unfortunately, above solution didn’t work. Error “Unable to get number of selected options of object” displayed.
You can only use the “selectOptionByIndex()”, “selectOptionByLabel()”, or “selectOptionByValue”, as well as “getNumberOfTotalOption(…)”, on a <select> tag. It sounds like you are not working with one. Without a <select> tag, then you have to do the counting of items programmically, like a web table. For that, we would need to see the HTML to assist you further. Otherwise, the code that @Elly_Tran has shown above would work to select a random option from a drop-down.
Edit: or you have some type of drop-down that delays the forming of your drop-down list until someone is using it and javascript gets to work.
Edit2: to find out if you have a <select> tag, right click on the drop-down and choose “Inspect” from the pop-up. Do this a second time on the drop-down to see your specific HTML tag.
If there is no pop-up or “Inspect” is not on it, then use the F12 key, open Dev-Tools and click on the top left icon that allows you to review the HTML.
1 Like
can you share the full error log
It’s a Ext-7 generated input tag.
Perhaps you can go up the node tree to see if there is some control or form for your drop-down and then collect all <input> tags that are under it. Without the actual HTML, this is about all that I can suggest.
def driver = DriverFactory.getWebDriver();
WebElement yourform = driver.findElement(By.cssSelector("..."))
List<WebElement> listOptions = yourform.findElements(By.cssSelector("input"));
// Get the total number of options in the dropdown
int totalOptions = listOptions.size()
// Generate a random index (between 0 and one less than totalOptions)
// because we are using List of WebElements, which start at zero
Random rand = new Random()
int randomIndex = rand.nextInt(totalOptions - 1)
listOptions.get(randomIndex).click();
Hello, Issue solved or still looking for ?
Not resolved yet.
So, how does the HTML generated by Ext JS look like? Unless we see the HTML source, as @grylion54 pointed out, we would never be able to solve @Mt.Everest 's question in Katalon Studio.
I made a chat with a AI service Ext JS dropdown list at DuckDuckGo to ask a question
“Ext JS dropdown list”
The AI GPT-4o mini replied to me as follows:
In Ext JS, a dropdown list can be created using the Ext.form.field.ComboBox component. This component allows users to select an item from a list of options, and it can also support searching and filtering of the options.
Here’s a simple example of how to create a dropdown list using Ext JS:
Ext.onReady(function() {
// Create a store with data for the dropdown
var myStore = Ext.create('Ext.data.Store', {
fields: ['id', 'name'],
data: [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' }
]
});
// Create the ComboBox (dropdown list)
var comboBox = Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Select an Option',
store: myStore,
queryMode: 'local',
displayField: 'name', // Field to display in the dropdown
valueField: 'id', // Field to use as the value
renderTo: Ext.getBody(), // Render to the body of the page
listeners: {
select: function(combo, record) {
// Handle the selection event
console.log('Selected: ' + record.get('name'));
}
}
});
});
Explanation:
- Store: A data store is created with fields
idandname. This store contains the data that will populate the dropdown list. - ComboBox: The
ComboBoxis created with several configurations:fieldLabel: The label for the dropdown.store: The data store that provides the options.queryMode: Set to'local'to filter the options based on the input.displayField: The field from the store to display in the dropdown.valueField: The field from the store that will be used as the value of the selected item.renderTo: Specifies where to render the ComboBox in the DOM.listeners: An event listener for theselectevent to handle when an option is selected.
Usage:
To use this code, ensure you have included the Ext JS library in your HTML file. This example will create a dropdown list that allows users to select from three options, and it will log the selected option to the console.
Feel free to customize the store data and ComboBox properties to fit your specific requirements!
Then I followed the chat with another question:
How does the HTML generated by Ext JS look like?
GPT-4o mini replied to me:
When you create components in Ext JS, the framework generates HTML dynamically based on the configuration you provide. The generated HTML structure can vary depending on the specific component and its configuration. Below is an example of what the HTML might look like for the Ext.form.field.ComboBox (dropdown list) created in the previous example.
Example HTML Structure
For the ComboBox example provided, the generated HTML might look something like this:
<div class="x-form-item x-form-item-default">
<label for="combo-1010" class="x-form-item-label">Select an Option</label>
<div class="x-form-field-wrap">
<input type="text" id="combo-1010" class="x-form-text x-form-field" autocomplete="off" />
<div class="x-form-trigger" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false">
<span class="x-form-trigger-inner" style="background-image: url('path/to/dropdown-icon.png');"></span>
</div>
</div>
</div>
Breakdown of the HTML Structure
-
Container Div: The outer
<div>with classes likex-form-itemandx-form-item-defaultserves as a container for the form item, including the label and input field. -
Label: The
<label>element is associated with the input field, providing a description for the dropdown. -
Field Wrap: The
<div class="x-form-field-wrap">wraps the input field and the trigger button (dropdown arrow). -
Input Field: The
<input>element is the text field where users can type or see the selected value. It has classes for styling and accessibility attributes. -
Trigger Button: The
<div class="x-form-trigger">acts as a button to open the dropdown list. It includes a background image (usually an arrow icon) to indicate that it can be clicked.
Additional Elements
When the dropdown is opened, Ext JS generates additional HTML for the dropdown list itself, which might look like this:
<ul class="x-list-plain x-combo-list" style="display: block;">
<li class="x-combo-list-item" data-record-id="1">Option 1</li>
<li class="x-combo-list-item" data-record-id="2">Option 2</li>
<li class="x-combo-list-item" data-record-id="3">Option 3</li>
</ul>
Breakdown of the Dropdown List
-
List Container: The
<ul>element contains the list of options. It has classes for styling and is displayed when the dropdown is opened. -
List Items: Each
<li>represents an option in the dropdown. Thedata-record-idattribute can be used to store the corresponding value from the data store.
Conclusion
The actual HTML generated by Ext JS can vary based on the version of Ext JS you are using and the specific configurations of your components. The framework abstracts much of the complexity, allowing developers to focus on functionality rather than the underlying HTML structure. You can inspect the generated HTML using browser developer tools to see the exact output for your specific implementation.
This response by the GPT-4o mini was useful. I was impressed.
As explained by GPT-4o above, I believe that there would be no<select> and no <options> tags in the HTML which @Mt.Everest is targetting. Therefore, getNumberOfTotalOption(), selectOptionByIndex(), etc ---- those functions built in Katalon Studio would not help @Mt.Everest at all.
So, what @Mt.Everest should do?
As GPT-4o pointed out,
You can inspect the generated HTML using browser developer tools to see the exact output for your specific implementation.
I believe that this is the starting point for him.
I don’t know how much longer the way for @Mt.Everest to a resolution could be.
This sentense sounds interesting to me.
Ext JS lets you NOT to be bothered by the underlying HTML which moves dynamically and could be complex. On the other hand, Selenium-based E2E test automation tools (including Katalon Studio) require you to be 100% aware of the underlying HTML structure which is assumed to be basically static and fairly simple. The design principles of the two tools are not aligned
I suppose that @Mt.Everest should visit a user forum of Ext JS and ask them “how to do end-to-end test for a web site on top of Ext JS”.
I made a search with key “E2E testing Ext JS”. Then I found a page