Results 1 to 6 of 6

Thread: How to "type" shift+tab in WebDriver test

  1. #1
    Sencha Premium User
    Join Date
    Oct 2014
    Posts
    17
    Answers
    1

    Default Answered: How to "type" shift+tab in WebDriver test

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

    Code:
    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.

  2. 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.


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

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

    Default

    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:

    Code:
    // 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();
        });
    });
    Daniel Gallo
    Sales Engineer
    Sencha

  4. #3
    Sencha Premium User
    Join Date
    Oct 2014
    Posts
    17
    Answers
    1

    Default

    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:

    Code:
    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:

    Code:
    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.)

    Code:
    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?

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

    Default

    Please try this instead:

    Code:
    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.
    Daniel Gallo
    Sales Engineer
    Sencha

  6. #5
    Sencha Premium User
    Join Date
    Oct 2014
    Posts
    17
    Answers
    1

    Default

    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.


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

  7. #6
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    372
    Answers
    64

    Default

    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!
    Daniel Gallo
    Sales Engineer
    Sencha

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
  •