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.

Answer 1

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'));
});

Answer 2

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());
};