How to "type" shift+tab in WebDriver test

[isi.dev.user]

How do I send a Shift-tab to the browser in a WebDriver test.
I've tried various things along these lines

ST.element('//body').type({key:'ShiftTab'});

ST.element('//body').type({key:'Tab', shiftKey: true});

ST.element('//body').type({key:{name:'Tab', shiftKey: true}});

Any help would be appreciated.

[daniel.gallo]

Please try the following example. As this involves special key combinations, "ST.play" needs to be used, defining each of the keydown and keyup events:

// WebDriver scenario
// URL: https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/frame-index.html#form-login


describe('KeyMap', function() {
    it('should shift-tab on a textfield to set focus on the previous field', function() {
        // Focus on the password field
        ST.textField('textfield[name="pass"]')
            .focus();
        
        // Shift-tab, which should set focus to the previous field (the username field)
        ST.play([
            { type: 'keydown', target: '//body', key: 'Shift' },
            { type: 'keydown', target: '//body', key: 'Tab', shiftKey: true },
            { type: 'keyup', target: '//body', key: 'Shift' },
            { type: 'keyup', target: '//body', key: 'Tab' }
        ]);
        
        // Check the username field now has focus
        ST.textField('textfield[name="user"]')
            .focused();
    });
});

[isi.dev.user]

Hi Daniel,

Unfortunately this isn't doing anything in our app. I wonder if it is how we have the keyboard navigation set up begin with.
We are using a KeyNav to handle tab and shift-tab globally and the KeyNav creation looks like this:

new Ext.util.KeyNav({
    target: document.body,
    tab: function (e) {
        console.log('Caught tab key.');
        if (e.event.shiftKey) {
            this.onShiftTab(e);
        } else {
            this.onTab(e);
        }
    }
    scope: this,
});

I do not ever see the console.log statement above when/after the ST.play you provided executes.

I am able to get the tab key to be recognized and its handler to be executed with the following:

ST.element('//body')
    .type({key: 'Tab'});

But similar to shift-tab, the app does not recognize tab when I try to use the pattern you provided with ST.play. (of course this may be wrong but here's what I tried.)

ST.play([
    { type: 'keydown', target: '//body', key: 'Tab' },
    { type: 'keyup', target: '//body', key: 'Tab' }
])

In case it is relevant, we are navigating through fields in view-only components (e.g. grids and trees.) There are no editable text fields in the part of the application I'm attempting to test here.

Do you have any other suggestions for shift-tab? Is there any way to execute that with something similar to what IS working for tab?

[daniel.gallo]

Please try this instead:

ST.play([
    { type: 'keydown', target: '//body', key: 'Shift' }
]);
    
ST.element('//body')
    .type({
        key: 'Tab'
    });


ST.play([
    { type: 'keyup', target: '//body', key: 'Shift' }
]);

I tried this on an app that was configured with a KeyNav (with "target" set to "document.body"), and the Shift-Tab was detected.

[isi.dev.user]

For some reason the ST.play key events are not being recognized still in our app. (or at least not that I can tell by debugging the tests.) This example didn't activate our shift-tab function.

However, it got me thinking and I tried this, which did work, interestingly enough.

ST.element('//body').type({key: [ 'Shift','Tab']})

[daniel.gallo]

Interesting! I don't believe we've specifically tested multiple keys like in the example code you posted, but that works for me too. Glad you've found a solution!