Get help with testing, discuss unit testing strategies etc.


Post by Greg Lafrance »

I have two buttons arranged horizontally. The buttons have menus with sub-menus. The main page is dependent on which sub-menu item was clicked.

When I do actions something like ON THE SECOND BUTTON MENU this the test works:
- click button
- click first-level menu category
- click second-level menu category

But when I do that same thing on the first button menu, it fails:
WARN: GETNORMALIZEDTOPELEMENTINFO: TARGET ELEMENT OF ACTION [SIMULATEMOUSECLICK] IS NOT VISIBLE OR NOT REACHABLE: #MENUITEM-1273-TEXTEL...

If I swap the order of the button menus (so the second is now the first), it works.

Any ideas?

Post by nickolay »

We'll gladly investigate whats going on if you will provide a reproducible test case. Otherwise it can be anything in your application, hard to say.

Post by Greg Lafrance »

Sounds good. I just thought you might have an idea, because its actually pretty simple, two buttons with menus arranged horizontally. When I have time I'll try to create a reproducible test case.

Thanks for your help.

Post by Greg Lafrance »

Well, I created a test case, but unfortunately the problem does not occur. So I guess I have to try to modify it so it is closer to our real app until it happens.

Post by nickolay »

Right. Or may be try the other way around - remove any speciality your app adds to those menues (CSS styling, event listeners etc) - issue should be gone then. Then add those special configurations to the menues back, one by one, checking the status of the test.

Post by Greg Lafrance »

In the app in the attached zip file, when you run the test it fails because it can't find sub-item twelve, because the menu has disappeared.

This seems to be because the menu disappears when the mouse moves diagonally.

How to prevent this?
Attachments
buttonMenus.zip
Test app. Test fails as it can't find sub-item twelve.
(4.64 KiB) Downloaded 202 times

Post by nickolay »

This happens because Siesta just moves the cursor by the straight line from its current position (after the click to "level 2") to the area of the "level 12" menu item. While cursor moves, it goes over the other top menu items, which shows their corresponding sub-menus. Because of that, the original sub menu with "level 12" item is hidden and element supposed to be clicked becomes invisible (and issues warning).

You can see yourself if you will disable the "speed run" option.

The solution will be to move the cursor to the right, so that it will leave the top menu, before trying to click the "level 12" item:
StartTest(function(t) {
    var grid = Ext.create('AM.view.user.List', {
        renderTo : Ext.getBody(),
        height : 600,
        width : 800
    });
    t.chain({
            waitFor: 'componentQuery',
            args: [ 'userlist' ]
        }, {
            action: 'click',
            target: '>> userlist #entityTypes'
        }, {
            action: 'click',
            target: 'menuitem[text=Level Two] => .x-menu-item-text'
        },
        function (next) {
            var center      = t.findCenter(Ext.ComponentQuery.query('menuitem[text=Level Two]')[ 0 ].menu)
            
            t.moveMouseTo([ center[ 0 ], t.currentPosition[ 1 ] ], next)
        },
        {
            action: 'click',
            target: 'menuitem[text=Level Two Child Twelve] => .x-menu-item-text'
        }
    );
});
We'll try to make some helper methods for the ExtJS menus, so that this kind of issues will be handled automatically.

Post by Greg Lafrance »

Excellent. I did something similar, but your way is cleaner. Thanks very much.

Post Reply