Cannot use Arrow keys to select option in a drop down

[philipbeadle]

I used the TAB key to navigate to a drop down and the DOWN_ARROW on the drop down to open it. That bit works fine. I have tried lots of different options to then use the arrow keys to move down the list of options, none of which worked. How do I use the arrow keys to move to an option and then select it with ENTER?

I am trying to automate the page with just keys to prove the page is accessible and also to test that it works for power users who prefer keyboard to mouse so click etc will not suffice.

To navigate the page with TABs I wrote this:

exports.tab = function (identifier) {
    browser.driver.actions().sendKeys(protractor.Key.TAB).perform().then(function () {
        browser.driver.switchTo().activeElement().getAttribute('id').then(function (id) {
            if (identifier === id) {
                console.log('found ' + id);
            } else {
                console.log('looking for ' + identifier);
                exports.tab(identifier);
            }
        });
    });
};

I was hoping to do something similar for KeyDown, keep pressing keyDown until the right value is selected. The following code opens the drop down and then logs the html of the selected element which is the drop down.

exports.arrowDown = function (identifier) {
    return browser.driver.actions().sendKeys(protractor.Key.ARROW_DOWN).perform().then(function(){
        browser.driver.switchTo().activeElement().getAttribute('id').then(function (id) {
            element(by.id(id)).getOuterHtml().then(function(value){
                console.log(value);
            });
        });
    });
};

I can't even send ENTER to select the first option.

Cheers

[sjelin]

Just to clarify, what your saying is that you've built a website which is navigable using the keyboard only, but protractor is failing to properly send those keystrokes into the website?

[philipbeadle]

Correct. Add a drop down to a page and see if you can tab to it and use the arrow keys and ENTER to select an option using protractor. Can be done easily with the keyboard :)

[sjelin]

How are you making this dropdown? A <select> tag?

[philipbeadle]

[philipbeadle]

using the tab function above you can nav to the select by tab('frequencySalary');
then use the arrowDown method which opens the drop down fine. The problem is I cant get arrows to go through the list of options in the open drop down. With the browser left open after running the automation you can press arrows and it works as expected.

[hankduan]

Hi @philipbeadle

You can use one of the two ways to select an option:

    var options = element(by.id('frequencySalary'));
    options.sendKeys('Monthly')

or

    var optionsElements = element(by.id('frequencySalary')).all(by.tagName('option'));
    optionsElements.count().then(function(count) {console.log('I have ' + count + ' options')});
    optionsElements.get(1).click(); // click on 2nd option

I am trying to automate the page with just keys to prove the page is accessible and also to test that it works for power users who prefer keyboard to mouse so click etc will not suffice.

It's a bad idea to test the chore browser's behavior as it's not your logic, i.e. you should not need to test that arrow keys work with options since that's something your browser implements.

For follow up questions, please ask on stackoverflow as Github is for issues and feature requests. Thanks!

[juliemr]

If this is something that's not allowed by webdriver, we should be able to link to a bug though - I'm still curious if/why this doesn't work.

[philipbeadle]

That's no good though. I want to use the arrow keys to prove the page is accessible.

Sent from my iPhone

On 8 Jan 2015, at 9:13 am, Hank Duan notifications@github.com wrote:

Hi @philipbeadle

You can use one of the two ways to select an option:

var options = element(by.id('frequencySalary'));
options.sendKeys('Monthly')

or

var optionsElements = element(by.id('frequencySalary')).all(by.tagName('option'));
optionsElements.count().then(function(count) {console.log('I have ' + count + ' options')});
optionsElements.get(1).click(); // click on 2nd option

I am trying to automate the page with just keys to prove the page is accessible and also to test that it works for power users who prefer keyboard to mouse so click etc will not suffice.
It's a bad idea to test the chore browser's behavior as it's not your logic, i.e. you should not need to test that arrow keys work with options since that's something your browser implements.

—
Reply to this email directly or view it on GitHub.

[sallojusuresh]

Hi @philipbeadle

Hope below code will help you:

browser.actions().sendKeys(protractor.Key.TAB).perform().then(function(){
browser.actions().sendKeys(protractor.Key.ENTER).perform().then(function(){
browser.actions().mouseMove(element(by.xpath(".//*[normalize-space(text())='Monthly']"))).click().perform();
});
});

[butterdave]

I too have a desire to navigate drop downs with only keyboard entries like tab, down arrow and enter. Similarly like @philipbeadle, I get stuck where he does. 😢 😢

[DevTestOpsCoach]

Yes, there are different work arounds to do the navigation but if we want to use keyboard down/up keys, protractor is not working.
I need something similar to sendKeys(Keys.ARROW_DOWN) which works on selenium.

[giri-sh]

Is there an update to this issue? I am facing similar issue when i try to use arrow down keys for list links.

[ttdmayshark]

Hello,

I am dealing with the same issue, trying to add tests which prove that our dropdown pages are keyboard navigable.

Note that I'm doing something very similar for select boxes, and that works fine -- but something about dropdowns is different. As with the original poster, I am able to open the dropdown just fine with Keys.SPACE, but then Keys.ARROW_DOWN does not move the highlight. (I am also using Keys.ARROW_DOWN successfully in similar tests for other element types, so there appears to be something different about the interaction with listboxes once the box has been opened).

In an interactive Chrome session, using SPACE to open the dropdown, then the down arrow and ENTER to change the selection, works fine...

[sjelin]

Dug into this a bit. Protractor does in fact work with dropdowns and sendkeys, but for some reason the synchronization isn't happening. For instance, this fails:

describe('accessibility', function() {
  it('should get a file to test', function(done) {
    browser.get('http://localhost:3333/index.html');
    var sel = element(by.className('form-control'));
    sel.click();
    expect(sel.$('option:checked').getText()).toBe('Select');
    browser.actions().sendKeys(protractor.Key.ARROW_DOWN).perform().then(function() {
      expect(sel.$('option:checked').getText()).toBe('Weekly');
      done();
    });
  });
});

But if you watch the browser window you'll see that the dropdown is actually changed to "Weekly". If you add a timeout you'll see that the test now passes without issue. So clearly the keys are reaching the browser and doing the right thing but the browser isn't having time to update (or something). Not sure what to do about this one. @juliemr @hankduan thoughts?

[tullmann]

We've seen problems like this that stem from animations. Basically after clicking "ARROW_DOWN" there is a period of time while an animation runs and until the animation is completed, the element isn't in the new state (so the text isn't "Weekly"). If the animation is implemented as a CSS-based transformation, AFAICT, protractor can't "see" it and won't wait for it to complete.

You should be able to see that by polling the text with a wait and logging it? Something like:

browser.wait(function() { 
    sel.$('option:checked').getText().then(function(t) {
        console.log('TEXT', t);
        return t === 'Weekly';
    });
});

Another way to look at this is that any action followed by an "expect" is suspect. The action should be followed by a "wait" for the expected result. Then you're more robust in the face of transient issues. (On the downside, you've moved from an expect failure to a timeout when the test finds a real bug.)

[lux2587]

Hi, I also have a similar issue. But my context menu isn't coded, instead it is the browser context menu.

In my test case, I right clicked on an element and waited for couple of seconds to browser.actions().sendKeys(protractor.Key.ARROW_DOWN).perform().
The Arrow down executed, but the page scrolled up, instead of selecting it on the context menu.

I also tried to take a screenshot in the promise .then() block, but the screen shot also doesn't show the context menu.

Is there any update on the issue? I am using Chrome browser and webDriver is also latest. Let me know if you need more information from my end.

P.S.: I have asked the question on Stackoverflow, just to check if there is issue in my code.

Update: The code I was running on Chrome Browser worked fine for a StackOverflow developer on FireFox. I think it could be a Browser issue. Here is the link

[sjelin]

That sounds like a separate issue which you should raise with the webdriver team. Also, I'm calling this an external bug because there's nothing we can really do.

[juliemr]

@sjelin is there a link to an external bug that I missed glancing over this thread? We should mark as type: external bug if we don't have a concrete one filed.

[sjelin]

It's not exactly an external bug, I just wasn't sure exactly what to label it. Basically webdriver is working as intended, but a lot of people are running into the same race condition as a result (i.e. people try to get the value of the dropdown while an animation is still happening). It's not needs investigation because I already investigated it, but I didn't want to close it either because people keep running into this.

[juliemr]

Ah, I think this is a case for "Webdriver feature/issue".

Let's rename the issue to be easier to find as well.

[juliemr]

Adding this to the polish hotlist, as it's clearly not an ideal situation - @sjelin can we figure out what's causing the animation, is this a browser native thing, or something that Angular could be waiting on?

[sjelin]

The animation is caused naively by the browser. I really don't think there's anything we can do here.