Results 1 to 9 of 9

Thread: Clicking an item from the combobox drowpdown

  1. #1

    Default Answered: Clicking an item from the combobox drowpdown

    The follwoing code snippet is from the sencha test doucmentation:


    Code:
    // Expand a ComboBox and locate a list item by its display value
    ST.comboBox('#mycombo').
        expand().
        down("//li[text()='District of Columbia']").
        click();
    
    
    // Expand a ComboBox and locate a list item by its record index
    ST.comboBox('#mycombo').
        expand().
        down('//li[@data-recordindex="2"]').
        click();

    But it does not seem to working as an error is thrown when executing the .down()-method which says:

    Timeout waiting for target (//li[text()='ST_searchTemplate']) to be available for ST.future.Element. Fix the error and try recording again.

    The dropwdown from the combobox does expand but afterwards nothing else happens

    My code looks the follwing:


    Code:
          
    contractMaintenance.searchTemplateCombobox()
        .expand()
        .down("//li[text()='ST_searchTemplate']")
        .click();

    The item ST_searchTemplate does appear though when manually opening the combobox' drowdown,

  2. Rather than relying on the HTML element's text contents, I'd try the first example in the code I sent - this lets you find an entry by text value, but it's looking it up from the underlying Ext JS data store, rather than the HTML element. You would just need to know the field name in the store. E.g.

    Code:
        it('should expand and select a value by the combobox dataview', function() {
            ST.comboBox('combobox[reference="mailingState"]')
                .expand();
            
            // Interact with the combobox's boundlist using the dataView API, locating a record by field name and value
            ST.dataView('boundlist:visible')
                .itemWith('field_name_goes_here', 'ST_searchTemplate')
                .click();
            
            // Check selected value is correct
            ST.comboBox('combobox[reference="mailingState"]')
                .displayValue('ST_searchTemplate');
        });
    Your DOM locator ("//div[text()='ST_searchTemplate']") is probably not matching as you also have an image within each row of the list, so I'm not sure how that is structured in the HTML of the list. A more robust approach is to use the method described above.

  3. #2
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    338
    Answers
    55

    Default

    Do you happen to know what version of Ext JS the application is running? And what toolkit - Ext JS Classic or Modern?

    Could you also reply with a screenshot of the expanded combobox?
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  4. #3

    Default

    We are running 6.7 Classic.

    I can't insert screenshots via the forum right now. After uploading and inserting them nothing shows up. I provided an external link to the images if thats ok

    The first screenshot had to be made with my phone as the dropdown menu closes itself while initiating a screenshot via the windows snipping tool, please excuse this.

    https://imgur.com/a/V4nGOwx

    The second one is taken after clicking the item in the dropdown.


    also it would be great to know how to delete entries via the respective method to clicking the red trashcan icon.

  5. #4
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    338
    Answers
    55

    Default

    Try one of the following examples. You can also interact with the combobox's list using the "ST.dataView" API, which gives you better options for locating entries in the list, and clicking them:

    Code:
    // WebDriver scenario URL: http://examples.sencha.com/extjs/6.7.0/examples/kitchensink/frame-index.html?classic#form-checkout
    
    describe('Combobox', function() {
        it('should expand and select a value by the combobox dataview', function() {
            ST.comboBox('combobox[reference="mailingState"]')
                .expand();
            
            // Interact with the combobox's boundlist using the dataView API, locating a record by field name and value
            ST.dataView('boundlist:visible')
                .itemWith('abbr', 'CA')
                .click();
            
            // Check selected value is correct
            ST.comboBox('combobox[reference="mailingState"]')
                .displayValue('CA');
        });
        
        it('should expand and select a value by the dataview index', function() {
            ST.comboBox('combobox[reference="mailingState"]')
                .expand();
            
            // Interact with the combobox's boundlist using the dataView API, locating a record by item index
            ST.dataView('boundlist:visible')
                .itemAt(3)
                .click();
                
            ST.comboBox('combobox[reference="mailingState"]')
                .displayValue('AR');
        });
        
        it('should expand and select a value by element index', function() {
            // Interact with the combobox list by element index
            ST.comboBox('combobox[reference="mailingState"]')
                .expand()
                .element('boundlist:visible => li:nth-child(2)')
                .click();
                
            ST.comboBox('combobox[reference="mailingState"]')
                .displayValue('AZ');
        });
        
        it('should expand and select a value by record id', function() {
            // Interact with the combobox list by element and record id
            ST.comboBox('combobox[reference="mailingState"]')
                .expand()
                .element('boundlist:visible => li[data-recordid="2331"]')
                .click();
                
            ST.comboBox('combobox[reference="mailingState"]')
                .displayValue('CO');
        });
    });
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  6. #5

    Default

    The itemAt()mehtod is working but not suitable for this as I need to get the entry by it text value.

    i think the problem is that my website uses <div> for its entries and not <li> as the Kitchensink example.
    (see here Attachment 58097)

    So I changed the code to this but still get a timeout waiting for element to be selected.
    Code:
    contractMaintenance.searchTemplateCombobox()
        .expand()
        .down("//div[text()='ST_searchTemplate']")
        .click();

  7. #6
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    338
    Answers
    55

    Default

    Rather than relying on the HTML element's text contents, I'd try the first example in the code I sent - this lets you find an entry by text value, but it's looking it up from the underlying Ext JS data store, rather than the HTML element. You would just need to know the field name in the store. E.g.

    Code:
        it('should expand and select a value by the combobox dataview', function() {
            ST.comboBox('combobox[reference="mailingState"]')
                .expand();
            
            // Interact with the combobox's boundlist using the dataView API, locating a record by field name and value
            ST.dataView('boundlist:visible')
                .itemWith('field_name_goes_here', 'ST_searchTemplate')
                .click();
            
            // Check selected value is correct
            ST.comboBox('combobox[reference="mailingState"]')
                .displayValue('ST_searchTemplate');
        });
    Your DOM locator ("//div[text()='ST_searchTemplate']") is probably not matching as you also have an image within each row of the list, so I'm not sure how that is structured in the HTML of the list. A more robust approach is to use the method described above.
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  8. #7

    Default

    Attachment 58099

    As you can see from this picture, the items of the boundlist have small icons nested inside them, causing the entry to delete itself after clicking on it.
    I can not get my head around on how to reference and click these specific icons. Do you have any idea on how I could solve this?

    HTML Code:
    <div id="boundlist-1353-listWrap" data-ref="listWrap" class="x-boundlist-list-ct x-unselectable x-scroller" style="overflow: auto; height: auto;">    
        <ul id="boundlist-1353-listEl" data-ref="listEl" class="x-list-plain" role="listbox" aria-hidden="true" aria-disabled="false">
            <div class="x-boundlist-item" role="option" tabindex="-1" data-recordindex="0" data-recordid="783" data-boundview="boundlist-1353" aria-selected="false">
                <div class="favourite-search-list ">ST_searchTemplate
                    <i class="fontRedIcon fa fa-trash-o favourite-search-list-delete-icon" onclick="Ext.getCmp('pltx-formBuilder-1267').getController().deleteSearch(463,'pltx-formBuilder-1267')"> </i>
                </div>
            </div>
            <!-- other boundlist items -->
        </ul>
    </div>

  9. #8
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    Redwood City, CA
    Posts
    338
    Answers
    55

    Default

    Try something like this, where you get the item from the dataview (drop-down) first, then locate the icon element within that item using the locator "i.fontRedIcon" - element with tag "i" where one of the CSS classes is "fontRedIcon":

    Code:
        it('should expand and select a value by the combobox dataview', function() {
            ST.comboBox('combobox[reference="mailingState"]')
                .expand();
            
            ST.dataView('boundlist:visible')
                .itemWith('field_name_goes_here', 'ST_searchTemplate')
                .down('>> i.fontRedIcon')
                .click();
            
            ST.comboBox('combobox[reference="mailingState"]')
                .displayValue('ST_searchTemplate');
        });
    Daniel Gallo
    Senior Solutions Architect
    Sencha Inc.

  10. #9

    Default

    Thats it, thank you so much!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •