Send keys not working with Page Object Model

Question

I'm just starting to experiment with Page Object Models using Protractor on a non-angular application. I'm not a newbie, but nowhere near an expert so forgive me if my verbiage is all wrong. I've been researching and trying suggestions for days with no luck. I have this element-

<input type="text" class="form-control" name="form_component_data[AgentsSettings][agent][chat_welcome_msg]" id="agentssettings-agent-chat_welcome_msg" value="How can I help">

In my POM I have

var txtWelcomemessage = element(by.css("input[name='form_component_data[AgentsSettings][agent][chat_welcome_msg]']"));

    this.clearWelcomemessage = function(){
    txtWelcomemessage.clear();
    };

    this.clearWelcomemessage = function(){
    txtWelcomemessage.clear();
    };

    this.setWelcomemessage = function(){
    txtWelcomemessage.sendKeys();
      };

In My Test Script I have

settings.clearWelcomemessage();
browser.sleep('5000');

settings.setWelcomemessage('Hey, Hey, Hey');
browser.sleep('5000');

Clear message works, I see the cursor in the field after clearing the message, but send keys does nothing and there are no errors.

However, when I enter the code below directly into the test script, the message clears and the send keys works perfectly.

driver.findElement(by.css("input[name='form_component_data[AgentsSettings][agent] 
[chat_welcome_msg]']")).click();
browser.sleep('3500')
driver.findElement(by.css("input[name='form_component_data[AgentsSettings][agent] 
[chat_welcome_msg]']")).sendKeys('Hey, Hey, Hey');

This is the 3rd field I am working with in the application so far. The first two fields work using the POM without any issue. I'm not sure what's different about this one. I can use this as a work around, but I'm just wondering what I'm missing in the page object.

Answer 1

If your real code looks like this:

settings.clearWelcomemessage();
browser.sleep('5000');

settings.setWelcomemessage('Hey, Hey, Hey');
browser.sleep('5000');

Then this will not work, because all of these operations are asynchronius functions. Means, that they do not execute "linear". Other programming languages do usually wait for a function to finish before going to next line, but in case of async operations in js/nodejs it's not the case.

Please try to properly await each of the functions executed::

settings.clearWelcomemessage().then(() => {
    console.log('cleared welcome messgae! ')
    return browser.sleep('5000').then(() => {
        console.log('slept 5000')
        return settings.setWelcomemessage('Hey, Hey, Hey').then(() => {
            console.log('welcome message set!')
            return browser.sleep('5000').then(() => {
                console.log('second sleap done!')
            })
        })
    })
}).catch(err => console.error('error occured!', err))

You also have to adjust the functions itself. They execute async operations and you should always return the result, since they return a Promise object. Docs

Edit:

Actually, add a parameter to sendKeys() . Wuithout no keys would be sent..

this.clearWelcomemessage = function(){
        return txtWelcomemessage.clear();
    };

    this.clearWelcomemessage = function(){
        return txtWelcomemessage.clear();
    };

    // add message parameter. Or no message will be sent :) 
    this.setWelcomemessage = function(message){
        return txtWelcomemessage.sendKeys(message);
      };

If that solves the problem, you should learn about promises resp. async & await etc.

If you are aware of async operations and how they work, please adjust your code in the question since it's not the original code..