Angular + Selenium: Cannot get value from input field

Question

I have written my tests in Protractor and I've used an expect statement:

loginPage.email.sendKeys( params.login.email );
expect(loginPage.email.getText()).toEqual( params.login.email );

However, my test is failing because signUpPage.email.getText() is returning an empty string. I couldn't find what function to call in Selenium's documentation for input field to return the correct value?

In my Protractor.conf file:

 params: {
      login: {
        email: '[email protected]',
        password: 'blahblah123'
      }

Error in Terminal:

Expected '' to equal '[email protected]'.

So I'm trying to match that the input of the email field is the same as the email address I've sent through. Any suggestions how to do that in Selenium?

Answer 1

If this is an input field, you need to get the value of the value attribute:

expect(loginPage.email.getAttribute("value")).toEqual(params.login.email);

Similarly, to apply Saifur's idea here, if you need to wait for the element to contain the desired value, use textToBePresentInElementValue Expected Condition:

var EC = protractor.ExpectedConditions;
browser.wait(EC.textToBePresentInElementValue(loginPage.email, params.login.email), 5000);

Note that timeout value (in ms) has to be specified.

Answer 2

If you want to get the value of an input field managed by AngularJS using solely a WebDriver instance there is an easy way to achieve that.

I tested it using the FirefoxWebDriver and it worked perfectly.

Basically you'll have to use the JavascriptExecutor to execute a javascript code in the browser.

If your web project has the jQuery plugin, then you can use the following method:

WebDriver driver = DriverFactory.getDriver();

public String getTextAt(String cssId) {
    if (driver instanceof JavascriptExecutor) {
        JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
        return (String) javascriptExecutor.executeScript("return $('" + cssId + "').val();");
    }
    return null;
}

If you want to use raw javascript you can do it like this:

WebDriver driver = DriverFactory.getDriver();

public String getTextAt(String cssId) {
    if (driver instanceof JavascriptExecutor) {
        JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
        return (String) javascriptExecutor.executeScript("return documenet.getElementById('" + cssId + "').value;");
    }
    return null;
}

Note that in this case the cssId should be an id attribute.

Answer 3

Probably element load time is the issue here. In that case you can use ExpectedCondition and even match the text you are looking for.

var EC = protractor.ExpectedConditions;
browser.wait(EC.textToBePresentInElement(loginPage.email ,params.login.email));

Update Missed the time of Expected condition. Thanks @alecxe

browser.wait(EC.textToBePresentInElementValue(loginPage.email, params.login.email), 5000);