How to select a value from angular dropdown in serenity ?

[Badri Narayanan Sugavanam]

Folks ,

I need to identify a drop-down and select a first value from the drop-down.

I'm having trouble identifying it using  Serenity.The drop-down is developed using UI-select(angular).

Has anybody worked on this using serinity. Does serenity support angular dropdowns?.

I tried using FindBy(ngModel) for the element 

as follows 

 @FindBy(ngModel="person.selected")

    WebElement personSelected;

 Here the having problems with object identification. 

The html for the code is 

<h3>Select2 theme</h3>

  <p>Selected: {{person.selected}}</p>

  <ui-select ng-model="person.selected" theme="select2" ng-disabled="disabled" style="min-width: 300px;">

    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>

    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">

      <div ng-bind-html="person.name | highlight: $select.search"></div>

      <small>

        email: {{person.email}}

        age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>

      </small>

    </ui-select-choices>

  </ui-select>

the Plunker for this code is @ 

http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview

Regards

bad...@acm.org

[Badri Narayanan Sugavanam]

Can somebody throw some light if this very common Angular dropdown is actually supported in Serenity BDD .. ?.. Bit urgent...

[Badri Narayanan Sugavanam]

Can somebody throw me some light on these?.Im leaning towards more angular native automation tools now.

Thanks 

-Badri

[Theo]

Hi Badri

Depends what you need to achieve. Protractor would be better to work with Angular JS - but Serenity is more for automated acceptance criteria using BDD. Therefore, I want my (ATDD) tests to be ideally free from the development framework of choice. Imagine you start developing using Vaadin framework and you write your ATDD tests using Vaadin TestBench and then you switch on using Angular JS. You need to heavily refactor your tests.

You can write unit and integration tests using Protractor (or other frameworks tied up to Angular) and use Serenity for end to end/acceptance/smoke tests.

From what I know, there is no strong integration of Serenity with Angular JS, other than the one mentioned here

Below is an example of mine to setup a value in an Angular JS dropdown using click on arrow and find desired value.

  public void setValueInSimpleDropDown (String value) {

    WebElementFacade myDropdown = getDropdown(0);

    

    clickDropdownArrow(myDropdown);

    setValueInDropdown(value, myDropdown);

  }

  private WebElementFacade getDropdown (int index) {

    return findAll(By.cssSelector(".select2")).get(index);

  }

  private void clickDropdownArrow (WebElementFacade dropdown) {

    By arrow = By.cssSelector(".select2-arrow");

    dropdown.find(arrow).then().click();

  }

  private void setValueInDropdown (String value, WebElementFacade dropdown) {

    ByJQuerySelector desiredValue = new ByJQuerySelector(".dropdown-item:contains('" + value + "')");

    find(desiredValue).waitUntilVisible().then().click();

  }

You can write similar methods for setting a value using search and put them in a separate library.

Theo