Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Selecting entries from a combotree

  1. #1

    Default Answered: Selecting entries from a combotree

    I tried adapting what I've seen in this thread https://www.sencha.com/forum/showthr...obox-drowpdown and apply it to my use case, but I keep getting errors.

    Code:
            ST.picker('toolbar[itemId="headerBar"] comboTree[itemId="menuSearchCombo"]').type("fclrates3");
            ST.dataView("treeview:visible")
                .itemWith("reportId", "fclrates3")
                .click();
    This is the error I am getting:
    Timeout waiting for event to be ready for ST.future.Item. Fix the error and try recording again.

    The combotree looks like this: Attachment 58172

    And has the following html code:
    HTML Code:
    <div class="x-panel x-autowidth-table x-grid-header-hidden x-layer x-panel-default x-tree-panel x-tree-arrows x-grid x-border-box"    style="border: 1px solid rgb(56, 146, 212); width: 360px; height: 300px; z-index: 19000; left: 1182px; top: 49px; display: none;"    role="treegrid" aria-hidden="true" aria-disabled="false" aria-readonly="true" aria-multiselectable="false"    id="treepanel-1060">    
        <div id="treepanel-1060-bodyWrap" data-ref="bodyWrap" class="x-panel-bodyWrap" role="presentation">        
            <div class="x-grid-header-ct x-grid-header-ct-hidden x-docked x-grid-header-ct-default x-docked-top x-grid-header-ct-docked-top x-grid-header-ct-default-docked-top x-box-layout-ct x-unselectable" style="border-width: 1px; height: 0px; left: 0px; top: 0px; width: 358px;" role="rowgroup" aria-hidden="false" aria-disabled="false" id="headercontainer-1061" data-exttouchaction="14">            
                <div id="headercontainer-1061-innerCt" data-ref="innerCt" role="row" class="x-box-inner" style="width: 356px; height: 0px;">                
                    <div id="headercontainer-1061-targetEl" data-ref="targetEl" class="x-box-target" role="presentation" style="width: 356px;">                    
                        <div class="x-column-header x-column-header-align-left x-box-item x-column-header-default x-unselectable x-column-header-first x-column-header-last" style="border-width: 1px; left: 0px; top: 0px; margin: 0px; height: 0px; width: 356px;" role="columnheader" aria-hidden="false" aria-disabled="false" aria-readonly="true" id="treecolumn-1063" tabindex="0" data-componentid="treecolumn-1063">                        
                            <div id="treecolumn-1063-titleEl" data-ref="titleEl" role="presentation" class="x-column-header-inner x-leaf-column-header x-column-header-inner-empty">                            
                                <div id="treecolumn-1063-textContainerEl" data-ref="textContainerEl" role="presentation" class="x-column-header-text-container">                                
                                    <div role="presentation" class="x-column-header-text-wrapper">                                    
                                        <div id="treecolumn-1063-textEl" data-ref="textEl" role="presentation" class="x-column-header-text">
                                            <span id="treecolumn-1063-textInnerEl" data-ref="textInnerEl" role="presentation" class="x-column-header-text-inner"></span>
                                        </div>
                                        <span id="treecolumn-1063-dirty-cell-text" class="x-hidden-offsets">Cell value has been edited</span>                                
                                    </div>                            
                                </div>                            
                                <div id="treecolumn-1063-triggerEl" data-ref="triggerEl" role="presentation" unselectable="on" class="x-column-header-trigger" style=""></div>                        
                            </div>                    
                         </div>                
                    </div>            
                </div>        
            </div>        
            <div id="treepanel-1060-body" data-ref="body" class="x-panel-body x-grid-no-row-lines x-grid-body x-panel-body-default x-panel-body-default" role="presentation" style="width: 358px; left: 0px; top: 0px; height: 298px;"
                <div class="x-tree-view x-fit-item x-tree-view-default x-unselectable x-scroller x-focus x-tree-view-focus x-tree-view-default-focus" role="rowgroup" id="treeview-1062" tabindex="0" data-componentid="treeview-1062" style="overflow: auto; margin: 0px; width: 356px; height: 295px;"> 
                    <div class="x-tab-guard x-tab-guard-after" tabindex="-1" data-tabindex-value="0" data-tabindex-counter="1"></div>                
                    <div class="x-grid-item-container" role="presentation" style="width: 356px;">                    
                        <table id="treeview-1062-record-480" role="presentation" data-boundview="treeview-1062"                        data-recordid="480" data-recordindex="107" class="x-grid-item" cellpadding="0" cellspacing="0"                        style="width: 0px;">                        
                            <tbody>                            
                                <tr class="x-grid-tree-node-leaf  x-grid-row" role="row" data-qtip="" data-qtitle=""                                aria-level="3">                                
                                    <td class="x-grid-cell x-grid-td x-grid-cell-treecolumn-1063 x-grid-cell-treecolumn x-grid-cell-first x-grid-cell-last x-unselectable" style="width: 356px;" role="gridcell" tabindex="-1" data-columnid="treecolumn-1063">                                    
                                        <div unselectable="on" class="x-grid-cell-inner x-grid-cell-inner-treecolumn"                                        style="text-align:left;">                                        
                                                <div class=" x-tree-elbow-img x-tree-elbow-line" role="presentation"></div>                                        
                                                <div class=" x-tree-elbow-img x-tree-elbow" role="presentation"></div>                                        
                                                <div role="presentation"                                            class=" x-tree-icon x-tree-icon-custom x-tree-icon-leaf x-fa fa-file-o"> </div>
                                                <span class="x-tree-node-text ">FCL: fclrates3.1</span>                                    
                                        </div>                                
                                    </td>                            
                                </tr>                        
                            </tbody>                    
                        </table>                
                    </div>            
                </div>        
            </div>    
        </div>
    </div>
    Here's a cut out of the investigations I did via the webdev tool's console: Attachment 58173

    Now I am pretty sure that the issue lies in the itemWith function, as changing the selector in the dataView function to "treegrid" gets me the follwing error:
    Timeout waiting for target (treegrid:visible) to be available for ST.future.DataView. Fix the error and try recording again.

    How can I select this entry?

  2. So part of the issue here is that the combo tree implementation in your app is using an unconventional custom method to filter the tree data by just directly showing and hiding the DOM nodes in the tree, rather than using the underlying tree store's filter methods that would filter the actual data that's in the store, which then automatically renders the appropriate nodes to the DOM.

    Because of this, the Sencha Test "rowWith" API is searching through all of the unfiltered data and finds a match for "fclrates3" in multiple records as it's designed to do a partial match, rather than an exact match. It then tries to click on one of the hidden nodes in the tree. If the tree filtering was done by using the tree store's "filter" methods, the data would be brought down to two nodes in the store and tree - the root record and the matching child record, but instead all the data is still there in the store.

    To get around this, you should be able to use a regular expression with the "rowWith" API in order to do an exact match search, but this doesn't appear to be working - I'll log an issue for that.

    If the custom approach to tree filtering in your app is going to be left as-is, I would recommend trying the code below in the meantime. You could move this code in to a reusable function if it needs to be used multiple times throughout your test suites.

    Code:
    it('should search for an item', function() {
        ST.field('comboTree')
            .type('fclrates3');
    });
    
    it('should select an item from the combo tree', function() {
        ST.grid('comboTree treepanel')
            .visible()
            .execute(function(grid) {
                var store = grid.getStore(),
                    recordIndex = store.find('reportId', /^fclrates3$/);  // Regular expression to find an exact match
                
                return recordIndex;
            })
            .and(function(future) {
                var recordIndex = future.data.executeResult;
    
                future.rowAt(recordIndex)
                    .click();
            });
    });

  3. #2
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    392
    Answers
    74

    Default

    Unfortunately it doesn't look like the screenshot attachments came across properly - I can't view them.

    You could try using the "ST.grid" API with the tree grid, and it's probably a "treepanel" for the locator. If you have more than one treepanel that's visible in the app then you'll need to tweak the locator. But this should in theory work:

    Code:
    ST.grid('treepanel:visible')
        .rowWith('reportId', 'fclrates3')
        .click();
    Daniel Gallo
    Sales Engineer
    Sencha

  4. #3

    Default

    Sadly your suggestion throws the following error: Timeout waiting for target to be visible for ST.future.Row. Fix the error and try recording again.

    Here are the attachments, hope it works this time:
    Untitled.jpgCapture.JPG

    Also, using the inspection tool on the body of the panel, the suggested locator is the following: ST.dataView('treeview');

  5. #4
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    392
    Answers
    74

    Default

    It appears to be locating the treepanel with the grid API, but the "rowWith" API requires a complete text match, rather than partial text match, so try again with this:

    Code:
    ST.grid('treepanel:visible')
        .rowWith('reportId', 'FCL: fclrates3.1')
        .click();
    Daniel Gallo
    Sales Engineer
    Sencha

  6. #5
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    392
    Answers
    74

    Default

    Actually, I misread the first screenshot - please ignore my previous reply.

    What I suggested originally should work based on what I'm seeing in the screenshot. However, when the combobox is expanded after entering the search criteria, do you have to then expand the "General" node in order to see the item you need to click on? If so, you'll require some extra code to expand the "General" node, to then be able to click on the "fclrates3" node - something like this:

    Code:
    ST.grid('treepanel:visible')
        .rowWith('text', 'General')
        .down('.x-tree-expander')
        .click();
    Daniel Gallo
    Sales Engineer
    Sencha

  7. #6

    Default

    The 'General' node expands itself after typing so that shouldn't be a problem.

    Also I should probably mention that I somehow need to work with the reportId, which is our internal way of identifying different pages(reports) on our system because the ultimate goal is to run the same generic test with different reportIds and other parameters that we can set in a JSON file.

    Code:
    ST.grid('treepanel:visible')
        .rowWith('reportId', 'FCL: fclrates3.1')
        .click();
    This sadly did not work nonetheless

  8. #7
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    392
    Answers
    74

    Default

    What you had originally (below) should work, I just mis-read your screenshot.

    Code:
    .rowWith("reportId", "fclrates3")
    Are you able to share a running example of your combobox component, either as a Sencha Fiddle, or a similar online example so that I can do further debugging?
    Daniel Gallo
    Sales Engineer
    Sencha

  9. #8

    Default

    Hmm no, sadly this does not work. I've send you a private message with an example so you can see it yourself

  10. #9
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    392
    Answers
    74

    Default

    So part of the issue here is that the combo tree implementation in your app is using an unconventional custom method to filter the tree data by just directly showing and hiding the DOM nodes in the tree, rather than using the underlying tree store's filter methods that would filter the actual data that's in the store, which then automatically renders the appropriate nodes to the DOM.

    Because of this, the Sencha Test "rowWith" API is searching through all of the unfiltered data and finds a match for "fclrates3" in multiple records as it's designed to do a partial match, rather than an exact match. It then tries to click on one of the hidden nodes in the tree. If the tree filtering was done by using the tree store's "filter" methods, the data would be brought down to two nodes in the store and tree - the root record and the matching child record, but instead all the data is still there in the store.

    To get around this, you should be able to use a regular expression with the "rowWith" API in order to do an exact match search, but this doesn't appear to be working - I'll log an issue for that.

    If the custom approach to tree filtering in your app is going to be left as-is, I would recommend trying the code below in the meantime. You could move this code in to a reusable function if it needs to be used multiple times throughout your test suites.

    Code:
    it('should search for an item', function() {
        ST.field('comboTree')
            .type('fclrates3');
    });
    
    it('should select an item from the combo tree', function() {
        ST.grid('comboTree treepanel')
            .visible()
            .execute(function(grid) {
                var store = grid.getStore(),
                    recordIndex = store.find('reportId', /^fclrates3$/);  // Regular expression to find an exact match
                
                return recordIndex;
            })
            .and(function(future) {
                var recordIndex = future.data.executeResult;
    
                future.rowAt(recordIndex)
                    .click();
            });
    });
    Daniel Gallo
    Sales Engineer
    Sencha

  11. #10

    Default

    This works but has an interesting quirk. If the browser that is automatically launched during the test run is not manually maximized to completely fill the screen,
    ST is not able to select the item from the combotree's panel. I wonder why this is...

Page 1 of 2 12 LastLast

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
  •