AngularJS e2e test difference between select (dropdown), input radio, input checkbox

Question

There is not a consistent way of e2e testing different form attributes in AngularJS. I know AngularJS updated their e2e testing with Protractor, but for everybody that still uses the old version, I would like to know the difference between:

Select items:

1a. Selecting an item from a select (dropdown) list

1b. Selecting a radio button

1c. Checking a checkbox

Check if selected:

2a. Check if dropdown is selected

2b. Check if a radio button is selected

2c. Check if a checkbox is checked

Answer 1

Replace two variables in all examples:

• replace "modelName" with the name of your model
• replace "value" with the value of your form attribute

Select item:

1a. Selecting item from a select (dropdown) list:

select('modelName').option('value');

1b. Selecting item in a radio button:

input('modelName').select('value');

1c. Checking a checkbox:

input('modelName').check();

Check if selected:

2a. Check item in a select (dropdown) list:

expect(input('modelName').val()).toEqual(value);

2b. Check item in a radio button

expect(element('input[ng-model="modelName"]:checked').val()).toEqual(value);

2c. Check item in a checkbox

expect(element('input[ng-model="modelName"]').prop('checked')).toBeTruthy();

Answer 2

For checking if a radio button is checked, I've been using: element(by.id('radiobutton')).getAttribute('checked').then(function(value) { expect(value).toBe('true'); // value is 'true' if checked, and is null if not checked });