Input Text

Input text can be done by finding a specific element and calling the sendKeys function.

Test Scenario

As a user I want to type in my username and password to login to the web page.

describe('As a user of website', function() {
  it('should allow me to enter username', function() {
    browser.get('http://thisWebsite/');

    //using element by.id syntax
    element(by.id('username')).sendKeys('sholmes');
    expect(element(by.id('username')).getAttribute('value'))
      .toBe('sholmes');
  });

  it('should allow me to enter password', function() {
    browser.get('http://thisWebsite/');

    //using JQuery style by css
    $('[id="password"]').sendKeys('pmoriarty');
    expect($('[id="password"]').getAttribute('value'))
      .toBe('pmoriarty');
  });
});

In this basic form we have 2 input fields that we need to run some operations on. The first is entering a username and the second is a password. Functionally both these tests do the same thing to different fields. Notice the difference in the JQuery style to find an element by id on password versus how it was done on the username. Its rather short. With the JQuery like syntax you can find any element by a specific attribute withing the HTML tag. for example if you had a custom attribute like.

<input type="text" custom_attr="custom" />

You could access it by.

$('[custome_attr="custom"]')