Have to send values in placeholder for Name and Email using protractor

Question

Following is the HTML where we have placeholder for name and email

<section slot="drawer" for="account" class="iron-selected">
    <form class="form ng-pristine ng-valid">
      <h4>CONTACT US</h4>
      <p type="Name:"><input placeholder="Write your name here.."></p>
      <p type="Email:"><input placeholder="Let us know how to contact you back..">
      </p>
      <button>Send Message</button>
    </form>
  </section>

Answer 1

Depending on what you exactly want to change.

Change the value of the attribute

Changing the value of an attribute can be done with "pure" javascript. This can be done with the browser.executeScript('your javascript code here');, docs can be found here

Take in consideration that changing an attribute-value:

• is in my opinion a unit test, not a UI test
• can never be changed by a user through the UI (only if he uses developer tools)
• a placeholder is a hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. Note: Do not use the placeholder attribute instead of a element, their purposes are different. The attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it. (source and search for placeholder)

Change input

If you would like to send a value (so not changing the placeholder-attribute) you can use the sendKeys()-method. More info about how to use it look here

In your case you first need to identify the element you want to send the value to. It would be nice that the input-element you need to send a value to has an unique selector. But with the code you gave you can solve it with this

// Because you can't select the input directly we can access it by it's parent
// `p` tag and then go to the input
element(by.css('p[type="Name:"] input')).sendKeys('my name is');
element(by.css('p[type="Email:"] input')).sendKeys('[email protected]');

At last you need to submit your form by clicking on the button. Because your button doesn't have an unique selector you can use the by.buttonText method. This isn't a recommended method because you don't want to find elements based on their text. But for now u can do this

element(by.buttonText('Send Message'));

Your complete script will become

element(by.css('p[type="Name:"] input')).sendKeys('my name is');
element(by.css('p[type="Email:"] input')).sendKeys('[email protected]');
element(by.buttonText('Send Message'));

Hope this helps.