WebDriver - best way to test for empty grid or tree

[isi.dev.user]

I have tried several things to try to get my WebDriver test to test for an empty grid or tree including the suggestion here: https://www.sencha.com/forum/showthread.php?335305

But ST.grid('selector').rowAt(0).timedout() results in this error in my log. I assume there is something wrong with my syntax?


[ERROR] [model/browser/SandboxBrowser-44] [ERROR] [context/WebDriver] _remoteCallFn returned error Timedout waiting for wait function



In any case, what I really want to know is what is the best way to tests for an empty grid or tree in a WebDriver test. If it is timeout, what should I check for the timeout on exactly? And what is the proper syntax?

[daniel.gallo]

That syntax is fine, as this is essentially saying you expect the row at index 0 to timeout (not be found). What version of Sencha Test are you using? And is this a Classic or Modern Ext JS app? Does the grid have any special features enabled, like grouping? If you could let me know some more details of your setup, I'll try to replicate the error.

One thing to consider when writing this type of test - when checking whether a grid is empty, bear in mind that when a grid first renders it normally contains no data for a brief moment (in the case of stores that have a remote data source defined), so this test may sometimes pass if executed at the exact moment the store is fetching data, or in the situation where the grid is subsequently loaded with data a split second later. It depends how long it takes for the app to fetch data from the remote source. If the grid has been rendered for a while before you run the test, then this won't be an issue.

[isi.dev.user]

Thanks Daniel.

We are using Modern, 7.0.0.156 with Sencha Studio 2.3.0

There is nothing special about the grid at all aside from a little bit of custom css to wrap text and a renderer to display the contents like a bulleted list. In fact, it only has one column.

Ext.define('MyApp.view.MyGrid', {
    extend: 'Ext.grid.Grid',
    requires: [ 'MyApp.store.ItemStore'],

    xtype: 'mygrid',

    hideHeaders: true,
    variableHeights: true,
    cls: ['isiList','isiListNoHeader'],
    columns:[
        {
            name: 'Items',
            dataIndex: 'item',
            flex: 1,
            renderer: function(val){
                return '<div style="padding-left:10px;"><li>' + val + '</li></div>';
            },
            cell: {
                encodeHtml: false
}
        }
    ],
    store: 'itemsStoreId'
});

The test I am running to check that the grid is empty is running against an instance of the application that never would have had data in the grid.

I have tried many things, all of which I can't remember, to verify that the grid is empty. Whenever I thought I had it, I put it into my other test in which the grid is not empty just to make sure it caused the test to fail in that instance. I was unable to succeed at this even when I thought I had it verifying an empty grid.

If you have any suggestions I'd really appreciate it.

Thanks,
Jill

[daniel.gallo]

Hi Jill,

After testing this out, I also see the same issue when run against an empty Modern grid. I will log this as an issue.

For now, an alternative approach is to do something like the example below, where you pass a function that gets executed directly in the browser that will get the record count from the grid's store, return that to the test, and this will allow you to run an expectation against the returned value, verifying it equals zero:

ST.grid('array-grid')
    .execute(function(grid) {
        // This code gets executed in the browser, meaning Ext JS APIs can be used
        return grid.getStore().getCount();
    })
    .and(function(future) {
        // The store count is available via "future.data.executeResult"
        expect(future.data.executeResult).toEqual(0);
    });

Thanks.

[isi.dev.user]

Super helpful not only for this case but for others. Thank you!