javascript - Protractor, Failed: unknown error: cannot focus element on custom input field - Stack Overflow

Jumped on the testing wagon and now implementing some E2E tests of a website, but I have run into a troublesome little issue.

I'm trying to select a field then send keys to that input field to change the value, the only problem is the Failed: unknown error: cannot focus element error I can't seem to get past. I have it working on other fields, just not ones with this setup.

pageObject file.

var profilePage = function() {

this.firstName = element(by.id('firstname')); 
this.lastName = element(by.id('lastname'));
this.saveBtn = element(by.css('ng-click="saveLocalAccount()"'));
this.cancelBtn = element(by.css('ng-click="cancelChanges()"'));

this.changeName = function(firstname, lastname) {

    this.firstName.click();

    var input = firstName.element(by.css('input'));
    input.click();
    this.input.sendKeys(firstname);

    this.lastName.click();
    this.lastName.sendKeys(lastname);
    browser.waitForAngular();
}
};

module.exports = new profilePage();

The spec.

var profilePage = require('TestProtractor/E2E/PageObjects/profile.pageObject.js');

describe('Testing the profile page functionality', function() {

var firstNameTest = "firstTest";
var lastNameTest = "lastTest";

it('Navigate to profile page.' ,function() {
    browser.get('xxx');

    expect(browser.getCurrentUrl())
        .toContain('xxx');
}); 

it('Should change the firstname and lastname successfully', function() {
    profilePage.changeName(firstNameTest, lastNameTest);
    expect(element(by.id('firstname')).getText()).toContain(firstNameTest);     
    expect(element(by.id('lastname')).getText()).toContain(firstNameTest);
});

});

html

Jumped on the testing wagon and now implementing some E2E tests of a website, but I have run into a troublesome little issue.

I'm trying to select a field then send keys to that input field to change the value, the only problem is the Failed: unknown error: cannot focus element error I can't seem to get past. I have it working on other fields, just not ones with this setup.

pageObject file.

var profilePage = function() {

this.firstName = element(by.id('firstname')); 
this.lastName = element(by.id('lastname'));
this.saveBtn = element(by.css('ng-click="saveLocalAccount()"'));
this.cancelBtn = element(by.css('ng-click="cancelChanges()"'));

this.changeName = function(firstname, lastname) {

    this.firstName.click();

    var input = firstName.element(by.css('input'));
    input.click();
    this.input.sendKeys(firstname);

    this.lastName.click();
    this.lastName.sendKeys(lastname);
    browser.waitForAngular();
}
};

module.exports = new profilePage();

The spec.

var profilePage = require('TestProtractor/E2E/PageObjects/profile.pageObject.js');

describe('Testing the profile page functionality', function() {

var firstNameTest = "firstTest";
var lastNameTest = "lastTest";

it('Navigate to profile page.' ,function() {
    browser.get('xxx');

    expect(browser.getCurrentUrl())
        .toContain('xxx');
}); 

it('Should change the firstname and lastname successfully', function() {
    profilePage.changeName(firstNameTest, lastNameTest);
    expect(element(by.id('firstname')).getText()).toContain(firstNameTest);     
    expect(element(by.id('lastname')).getText()).toContain(firstNameTest);
});

});

html

• javascript
• jquery
• angularjs
• protractor

Share Improve this question Follow edited Feb 6, 2017 at 19:57 theHussle asked Feb 2, 2017 at 21:54 theHussletheHussle 32133 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You will see Failed: unknown error: cannot focus element error when you are trying to sendKeys() to an element which is not an input

In your re-usable method changeName() you are trying to sendKeys() into lastName = element(by.id('lastname')) which is not an input element. You have to approach it in the same way as you were entering text for first name

Assuming their is an input inside lastname too

this.changeName = function(firstname, lastname) {

    this.firstName.click();

    var input = firstName.element(by.css('input'));
    input.click();
    this.input.sendKeys(firstname);

    this.lastName.click();
    var input2 = lastName.element(by.css('input'));
    input2.click();
    this.input2.sendKeys(lastName);
}
};

Figured this one out:

var input = firstName.element(by.css('input')); //declare the input
browser.actions().click(input).sendKeys("owiejf").perform(); //sendkeys

where browser is the name that's declared here

import { browser, element, by, ElementFinder } from 'protractor';