tonybranfort / ngpo-ui-select

AngularJS Protractor Page Object for angular-ui ui-select using ngpo

ngpo-ui-select

Create page objects with helper functions for AngularJs Protractor tests for angular-ui ui-select using ngpo.

• makeUiSelectPo returns a protractor element that has these methods (all other Protractor methods are available and not impacted)
  • enterValue
  • getValue
  • clear
  • isVisible - true if both isPresent and isDisplayed
• makeUiSelectMultiPo returns a protractor element that has these methods (all other Protractor methods are available and not impacted)
  • enterValue
  • getValue - Gets string with all values; suggest expect(...).toContain();
  • clear
  • isVisible - true if both isPresent and isDisplayed
• makePos passthrough for ngpo makePos function

ngpo-ui-select v2.x: requires nodejs 6.x or greater (no breaking api changes from ngpo-ui-select v1.x). Tested with angularJs 1.5.0, angular-ui-select 0.19, Protractor 5.1.2, chromedriver 2.31.

ngpo-ui-select v1.x: Tested with Protractor versions 2.5 and 5.1.

Examples

Page Object file using ngpo template

// person.po.js
var ngpoUis = require('ngpo-ui-select'); 

var els = {
  personInput: {
    locator: by.model('person.selected'),
    po: ngpoUiSelect.makeUiSelectPo},
  colorsInput: {
    locator: by.model('multipleDemo.colors'),
    po: ngpoUiSelect.makeUiSelectMultiPo}    
};

var pos = ngpoUis.makePos(els); 

module.exports = pos; 

Protractor test:

var personPo = require('person.po.js');

describe('person', function() {

    it('should allow name to be selected and cleared', function() {
      browser.get('/');

      testPo.personInput.enterValue('Amalie'); 
      expect(testPo.personInput.getValue()).toBe('Amalie'); 

      testPo.personInput.clear(); 
      expect(testPo.personInput.getValue()).toBe(''); 

    });

    it('should colors (multiple) to be selected and cleared', function() {

      testPo.colorsInput.enterValue('Red');
      // getValue() on makeUiSelectMultiPo returns a string with all values
      expect(testPo.colorsInput.getValue()).toContain('Red'); 

      testPo.colorsInput.enterValue('Green'); 
      expect(testPo.colorsInput.getValue()).toContain('Red'); 
      expect(testPo.colorsInput.getValue()).toContain('Green'); 

      testPo.colorsInput.clear(); 
      expect(testPo.colorsInput.getValue()).toBe(''); 

    });

});

See test\test.js and test\test.po.js for more examples.

ngpo-ui-select's Issues

enterValue() doesn't tab out of field when entered value exists in dropdown

Calling enterValue() should tab out of the field automatically after the value is entered. But when the value that is entered exists in the dropdown, tab does not move the cursor out of the field.

This is the normal behavior with ui-select (at least version 0.12 of ui-select and Chrome - needs to be tested on others). It seems the only way in ui-select to 'enter' that value, if it is in the dropdown, is to actually click on that value in the dropdown. These don't work : Enter, arrow down to select & Enter, Tab.

Need to find a way with ngpo-ui-select so that value is truly entered and model updated after the sendKeys() from enterValue().

Workaround: use enterValue() with a value that does not exist in the dropdown (if you are allowing non-dropdown values to be entered).