How do I assert an element is focused?

Question

I am attempting to verify that the focused element is set on page load as one of my tests.

This seems to be working, and I can verify with the element explorer, but the Jasmine matchers don't seem to pick up on this.

Here's my code:

var LoginPage = function () {
    this.basePath = browser.params.baseUrl;
    this.loginPart = "/#/login";
    this.usernameInput = element(by.model('username'));

    this.get = function () { ... }
}

it('should focus on the username field on load', function () {
     loginPage.get();
     expect(loginPage.usernameInput).toBe(browser.driver.switchTo().activeElement());
});

The field itself is correctly getting focus when the page loads (and element explorer correctly allows me to query this via browser.driver.switchTo().activeElement(), so I think this test should be passing, but it isn't.

Instead I get an enormous stacktrace which doesn't offer any useful information.

What happens with `expect(browser.driver.switchTo().activeElement()).toBe(loginPage.usernameInput)` ? — ivarni, Mar 31 '14 at 05:34
@ivarni - I get `Error: expect called with WebElement argment, expected a Promise. Did you mean to use .getText()?` rather than the big stacktrace. — joshschreuder, Mar 31 '14 at 05:37
OK, I was thinking maybe the problem was that `.switchTo().activeElement()` had some kind of asynchronous side-effect and the the focus wasn't actually changed untill after the expect was evaluated, but that wasn't the case then. — ivarni, Mar 31 '14 at 05:40

glepretre · Accepted Answer · 2014-05-14T07:06:40.713

23

I think I found a workaround:

Since expect expects to be called with a promise, you can compare some attribute of the two webElements (your input and the currently activeElement) :

it('should focus on the username field on load', function () {
     loginPage.get();
     expect(loginPage.usernameInput.getAttribute('id')).toEqual(browser.driver.switchTo().activeElement().getAttribute('id'));
});

edited May 14 '14 at 07:06

answered Mar 31 '14 at 07:54

glepretre

8,154
5
43
57

Thanks - I figured I could do something like that, just wished there was a way of testing element equality without relying on attributes. I guess this does the same job, but it also relies on me having set a unique attribute. – joshschreuder Mar 31 '14 at 21:57
I suppose I could probably do `.getInnerHtml()` or `.getOuterHtml()` which would achieve the same thing. – joshschreuder Mar 31 '14 at 21:57
I understand, that's why I said it was only a workaround ;). Yes, you can compare the inner or outer HTML too if you prefer – glepretre Apr 01 '14 at 06:40
Hey @glepretre, if you have time, please take a look at the follow-up to your solution here: http://stackoverflow.com/questions/28679364/asserting-an-element-is-focused. Thanks! – alecxe Feb 25 '15 at 17:45

score 1 · Answer 2 · answered Jun 25 '15 at 17:14

1

I ended up using this nice simple function to assert focus.

var expectToBeFocused = function(element){
  return expect(element.getInnerHtml()).
    toBe(browser.driver.switchTo().activeElement().getInnerHtml());
};

answered Jun 25 '15 at 17:14

Jonathan Leitschuh

822
1
8
29

1

this is not a solution for an input element: it is empty everytime – iRaS Mar 18 '16 at 13:21

score 1 · Answer 3 · answered Jul 13 '17 at 08:26

1

I managed to find a way to compare an element with the focused one without relaying to any attributes:

element(by.css('div.my-class')).equals(browser.driver.switchTo().activeElement())
    .then(equals => expect(equals).toBe(true));

answered Jul 13 '17 at 08:26

lovery

11
2

How do I assert an element is focused?

3 Answers3

Linked