Ext.button's click event is not response with Bryntum Siesta Test

Question

I'm try to fill a textfield and then run click event with Bryntum Siesta Test. Whole test-process has been succeed but only the 'Save' button is not response for this click event and keeps says:

Waited too long for: componentQuery "datatoolbar[id=datatoolbar-1100]"
Failed assertion `waitForComponentQuery` 
Condition was not fullfilled during 10000ms

How can I run click event for visible button with Bryntum Siesta?

Test.js

describe('Testing Update Process', function (t) {
    t.it('Should to login with correct creds.', function (t) {
        t.chain(
            {waitForCQ: 'window[title=Login]'},
            {click: '>> textfield[itemId=userName]'},
            {type: 'user@name.com', target:'>> textfield[itemId=userName]'},
            {click: '>> textfield[name=password]'},
            {type: 'superSecretPass', target:'>> textfield[name=password]'},
            {click: '>> button[text=Submit]', desc: 'Submit process is succeed!'}
        )
    })

    t.it('Login window should be invisible', function (t) {
        t.chain(
            {waitForCQNotVisible: 'window[title=Login]', desc: 'Login window is hidden now!'}
        )
    })

    t.it('Should open Folio grid', function (t) {
        t.chain(
            {waitForCQ: 'treelist[itemId=navigationTreeList]', desc: 'Wait for treelist'},
            {click: '>> treelistitem[id=ext-treelistitem-6]', desc: 'Clicks Folio item'},
            {waitForCQ: 'treelistitem[id=ext-treelistitem-7]', desc: 'Wait for treelist sub-item: Folios'},
            {click: '>> treelistitem[id=ext-treelistitem-7]', desc: 'Clicks Folios'}
        )
    })

    t.it('Should click on Edit button', function (t) {
        t.chain(
            {waitForCQ: 'gridview[id=gridview-1067]'},
            {click: '>> button[id=button-1087]', desc: 'Clicks on Edit button'}
        )
    })

    t.it('Should update Client Name', function (t) {
        t.chain(
            {click: '>> textfield[name=clientname]'},
            {type: 'Siesta Testing for Update', target: '>> textfield[name=clientname]', desc: 'Types lorem ipsum data'}
        )
    })

    //This last part is giving error and test becomes failure.
    t.it('Should Save the last changes', function (t) {
        t.chain(
            {waitForCQ: 'datatoolbar[id=datatoolbar-1100]'},
            {click: '>> button[id=button-1104]', desc: 'Clicks on Save, All Succeed :-)'}
        )
    })
})

Here is a screenshot of dataform and test snippet. As you will notice above, I've used waitForCQ for datatoolbar which is wrapped the Save button. Also I've tried call click event byself but it gaves error as well: Wait for button[id=button-1104] to appear and being failure.

The button is already visiable and wrapped DOM elements are formdata (includes labels and textfields) and datatoolbar (includes buttons).

Answer 1

As already noted in the comments, the cause is probably just an unstable query (since it uses auto-generated ids).

The error message Waited too long for: componentQuery "datatoolbar[id=datatoolbar-1100]" indicates that Siesta was running the specified component query but no results were returned for it.

Instead of auto-generated ids, try to use more stable and specific attribute of the toolbar you are targeting: datatoolbar[specificAttr=value]