Dropdown in Protractor with typescript

问题

I m new to Protractor and I want to automate a dropdown selection. I have some idea on how to get it in javascript, but here i m using typescript. Can anyone suggest me on how to get the dropdown based on the text we pass.

eg :

<ul class="ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset ng-tns-c46-10 ng-star-inserted" style="">
                        <!---->
                        <!----><!---->
                            <!---->
                            <!----><li class="ng-tns-c46-10 ui-dropdown-item ui-corner-all ng-star-inserted">
                                <!----><span class="ng-tns-c46-10 ng-star-inserted">Value 1</span>
                                <!---->
                            </li><li class="ng-tns-c46-10 ui-dropdown-item ui-corner-all ng-star-inserted">
                                <!----><span class="ng-tns-c46-10 ng-star-inserted">Value 2</span>
                                <!---->
                            </li><li class="ng-tns-c46-10 ui-dropdown-item ui-corner-all ng-star-inserted">
                                <!----><span class="ng-tns-c46-10 ng-star-inserted">Value 3</span>
                                <!---->
                            </li>


                        <!---->
                        <!---->
                    </ul>

how can I select the dropdown value based on the text visible.

回答1:

Well this is not the most efficient way, it is a sort of hacky way. You can do somthing along the lines of this:

object class `getDropDown() {
                   return element(by.className('the class you assign to the dropdown');

then in your spec class:

`it('should select an element in the drop down), () => {
                             page.navigateTo(); 
                             page.getDropDown().sendKeys(Key.DOWN)
                             page,getDropDown().sendKeys(Key.RETURN)`

While this is not the most practical way, it works and is very simple to implement. Now something like this is not practical when you have a lot of li and need to select a specific one. For that, depending on how you created your drop down, you can simply do what I did above, expect rather then using down and enter, you can simply do sendKeys('whatever item you need'). In my case, this would work when I would be testing validation for a specific li in my form. But this may not work if your form does not allow you to type into the drop down.

回答2:

You can do something like:

// select combobox
let container = element(by.css('ul'));
// select option
container.element(by.cssContainingText('value 1')).click();

If you want to automate you can create a wrapper class. In your case that would look as follows:

import { browser, element, by, ElementArrayFinder, ElementFinder, Locator } from 'protractor';
import { By } from 'selenium-webdriver';
import { ProtractorLocator } from 'protractor/built/locators';

const locators = {
  byText: (text: string) => by.cssContainingText('li', text)
};

export class ListWrapper {

  constructor(private container: ElementFinder) {
    // for example: let container = element(by.css('ul'))
  }

  public async selectByText(text: string): Promise<void> {
    await this.findChild(locators.byText(text)).click();
  }

  public findChild(locator: By | Locator): ElementFinder {
    return this.container.element(locator);
  }

}

Then in the test you can do something like:

let listWrapper = new ListWrapper(element(by.css('ul')));
await listWrapper.selectByText('Value 1');

I did not test this but this should work as I use it almost the same way.

来源：https://stackoverflow.com/questions/50266723/dropdown-in-protractor-with-typescript

标签

javascript

typescript

drop-down-menu

protractor