Getting the value of a selected ExtJS combobox using selenium: A step-by-step guide

Currently, I am facing a situation where my webpage is being rendered using ExtJS. It renders multiple Comboboxes each with a unique generated ID and a different option selected in each one. I want to be able to determine which value is selected in each combo box.

During my debugging process of the HTML DOM, I noticed that the ExtJS rendering DIV is distinct from the DIV in which the selectable options are rendered at the end. This makes it challenging for me to define any XPath to identify the selected values.

Here is a snippet of the code:

<div class="guide-bg" id="sample"><table>
    <tr><td id="row1"> </td></tr>
    <tr ><td id="row2"></td></tr>
</ table></div>

<script>
Ext.namespace('Ext.exampledata');
Ext.exampledata.states = [['Alabama'], ['Alaska'],['Arizona']];

var store1 = new Ext.data.SimpleStore({
    fields: [ 'state'],
    data : Ext.exampledata.states
});

var combo1 = new Ext.form.ComboBox({
        store: store1, displayField:'state', typeAhead: true,
        mode: 'local', forceSelection: true, triggerAction: 'all',
        emptyText:'Select...', selectOnFocus:true, renderTo: 'row1'
});

var combo2 = new Ext.form.ComboBox({
        store: store1, displayField:'state', typeAhead: true,
        mode: 'local', forceSelection: true, triggerAction: 'all',
        emptyText:'Select...', selectOnFocus:true, renderTo: 'row2'
});
</ script>

Upon rendering, the HTML generated within the 'sample' div looks like this:

<div class="guide-bg" id="sample">
  < table>
    <tbody>< tr>< td id="r ow1"> 
    <div class="x-form-field-wrap x-form -field-trigger-wrap" id="ext-gen148" style="width: 206px ;"& gt;
         <input type="text" name= "ext-comp-1028" id= "ext-comp-1028 "autocomplete="off " size="24" class= "x -form-text x-form-field x-form-empty-field "style="width: 181 px;"& gt;
       <img class= "x-form-trigger x-form-arrow-tri gger "src="sp.gif "id="ext-gen149 "& gt;
   < /div>& lt; /td> & nt; /tr> & lt; tr> & lt; td id="ro w2"> 
     < div class="x-form-field-wrap x-form-fie ld-trigger-wrap" id="ext-gen150" style="w idth: 206px;"> < input type=" text" n ame="ext-comp-1029" id="ext-comp-1029" autocomplete="off" size="24 "class ="x-form-text x-form-field x-form-empty-field "style="width: 181px "\"> & quot; ;
      & lt;im cc lass ="x -form-trigger x -form-arrow-trigger "scr c="sp.gif "id="ext-gen151 ">
    & lt; /div>& lt; /td > & nt; /tr> & lt; tbody>& lt; /table> & lt; /div>

The available options are listed independently at the end of the DOM as shown below:

& lt;div class="x-layer x-c ombolist" id="ext-gen146"style="position:abs olute; z-index:12005;visibility:hidden;left :-10000px; top:-10000px;width:204px;height:129px;font-size:12px;"> 
   & lt;div clas s="x-combo-list-inner"id="ext-gen147"style="widt h : 204px;height:129px; "> 
       & lt;div cla ss="x-combo-list-item x-combo-selected "> Alabama</div>
          & lt;div cl ass= "x-combo-list-item "> Alaska</div >
           & lt; div class="x-combo-list-item"> Arizona</di v>
             </div>
        < /div>
< /div>

In my scenario, simply iterating over each x-combo-list-inner element is not feasible because there is no clear mapping between the div containing the combo box and the div holding the available options. While dealing with multiple combo boxes having the same values, this lack of distinction poses a challenge.

javascriptextjsseleniumxpath

Answer №1

For executing JavaScript with Selenium WebDriver in Java, refer to this helpful guide: How to use JavaScript with Selenium WebDriver Java. You can utilize the code "Ext.ComponentQuery.query('combo')[0].value" in JavaScript to retrieve the combo value.

Answer №2

In order to retrieve the text of the selected element in a drop-down, you will need to loop through all the div elements within the x-combo-list-inner class, check for the presence of the x-combo-selected class, and then return the text associated with that element. The JavaScript code snippet below outlines this process (note: this code has not been tested):

driver.findElement(webdriver.By.css(".x-combo-list-inner")).then(function(parentElement) {
    return parentElement.findElements(".x-combo-list-item").then(function(innerElements) {
        return innerElements.forEach(function(elem) {
            return elem.getAttribute('class').then(function(classValue) {
                if(classValue.indexOf('x-combo-selected') > -1) {
                    return elem.getText();
                }
            });
        });
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jquery script for the dynamic remove button is malfunctioning

I have successfully implemented code to display dynamic controls using jQuery. Below is the working code: <script type="text/javascript"> $(document).ready(function() { $("input[value='Add']").click(function(e){ e. ...

javascriptjqueryhtml

Is it possible to refresh a div on one .aspx page using content from another .aspx page?

Just beginning my journey with asp.net and currently tackling a project that involves two .aspx pages. Events.aspx: This page is where the site admin can update upcoming events and webinars using an available panel to input event title, date, information ...

c#javascriptjqueryasp.nethtml

`In NodeJS, facing a challenge with implementing a many-to-many relationship using Sequelize's

I'm in the process of setting up many-to-many relationships between roles and accesses. The `roles` table will contain a list of roles (admin, developer, etc...) and the `accesses` table will have a list of permissions (Create Project, Create Site, De ...

javascriptnode.jssequelize.js

Submit button functions properly in Chrome, yet facing issues in Firefox and IE

My submit button is clickable in Chrome but not in FF or IE. I suspect the formatting of the button may be incorrect. Any help would be greatly appreciated! <button> <img src="http://button_image.png" onclick="mySubmit();" ></button> Th ...

javascriptjqueryhtml

Invoking Ajax within a for loop

for (var i = 0; i < 5; i++) { using (x = new XMLHttpRequest()) sendRequest("GET","d.php?id=" + i), checkResponse(null), updateStatus = function() { if (x.state == 4 && x.responseCode == 200) notifyUser(i); } } My goal now is to e ...

javascriptajaxloopsfor-loopcall

XMLHTTP is not accessible in the Department of Health

My D.O.H framework is powered by nodejs, specifically version 1.10. While I understand that nodejs typically uses xmlhttprequest or other modules for XHR requests, in my scenario, I am opting to utilize Dojo's xhr instead. Unfortunately, it seems tha ...

javascriptnode.jsdojodoh

Utilize JQuery to modify hover state when focused and restrict tab navigation to specific areas on the keyboard

I'm currently working with a JQgrid in one of my projects (Check out the JFiddle here). and I have some specific requirements: 1.) I want the save & cancel button to become highlighted when a user tabs to it, similar to how it behaves on mouse ov ...

javascriptjqueryjquery-uijqgridjqgrid-asp.net

Retrieve the calling method's context within an exported function

In my codebase, there exists a file called utils which houses various utility functions that are utilized by different classes and components. Currently, there is a test-utils class designed specifically for karma unit tests to perform common tasks. One ...

javascriptangulartypescript

When the mobile navigation bar is tapped, it remains open instead of closing

The persistent challenge of the mobile navbar failing to close upon clicking an item continues to baffle. Numerous attempts from Stack Overflow and even tweaks recommended by ChatGPT have been futile in resolving this issue. Despite trying alternative me ...

javascripthtmlcssbootstrap-5

Tips for comparing an array against a string and increasing a variable based on the outcome

I am currently working on a Javascript code snippet that aims to find specific strings in an array. var test = ['hello', 'my', 'name']; for (var i = 0; i < data.length; i++) { if (test === "name") { //In the ...

javascriptarrays

Electron: Interactive menu customization

Is there a way in Electron to dynamically enable/disable specific MenuItem in the context menu based on the element that the user right-clicks on? Additionally, I am looking for a method to identify the exact element clicked and pass that information to th ...

javascriptnode.jselectron

Error: Unable to execute function on blog mapping

I am facing an issue with my app where it fails to detect objects. Every time the component in my app calls ".map", I encounter an error message. I have double-checked that index.js is passing props correctly. Can anyone explain why this problem is occurri ...

javascriptreactjsnext.js

Making an Axios call to retrieve data from VUEX storage

Is it common practice in the Vue.js (Nuxt.js) development community to send data to the server from a VUEX storage using code similar to this example? setTrackingData (state, value) { state.to_the_final_destination = value.to_the_final_destination; con ...

javascriptvue.jsnuxt.js

Transform JSON structure (Group data)

Here is the JSON object I am working with: [{ "name" : "cat", "value" : 17, "group" : "animal", }, { "name" : "dog", "value" : 6, "group" : "animal", }, { "name" : "snak", "value" : 2, "group" : "animal", }, { "na ...

javascriptjson

Using Python and Selenium, what is the process to click on this element?

I am facing a challenge with the HTML code below that I need to interact with: <button aria-label="Nur Ergebnisse für Inhalte anzeigen" id="ember912" class="search-vertical-filter__filter-item-button artdeco-button artdeco-button--muted artdeco-button ...

pythonselenium

Encountering an issue with Winium driver when attempting to close the program

I'm currently working on automating a Windows-based application using Winium-Eclipse. The code runs successfully, but I encounter an error at the line "driver.quit()" at the end of execution. Interestingly, when I comment out this line, no errors are ...

seleniumautomationautomated-testswinium

Guide to personalizing the ngxDaterangepickerMd calendaring component

I need to customize the daterangepicker library using ngxDaterangepickerMd in order to separate the start date into its own input field from the end date. This way, I can make individual modifications to either the start date or end date without affectin ...

javascriptcssangulartypescriptbootstrap-4

collaborate and coordinate a territory among various components on a map

I'm currently working with an array of elements that are being drawn on a canvas. export function useCanvas(){ const canvasRef = useRef(null); const [ elements, setElements] = useState([]); const [ isHover, setIsHover] = useState(false); ...

javascriptreactjs

Axios displays a status code of 0 instead of the expected 403

Trying to monitor the responses of requests using axios response interceptors has been quite a challenge for me. In one specific request that necessitates authorization, everything goes smoothly when the token is valid, and data is returned without any is ...

javascriptreactjshttpaxios

Unable to retrieve the attributes of the ancestor web element

Here is a function I created to retrieve the ancestor element of a web_element: def find_ancestor(self, name): element = self.driver.find_element_by_name(name) ancestor = element.find_element_by_xpath("ancestor::*") print(ancestor) attr = ...

c#pythonselenium-webdriverxpath