Dropdown In Protractor With Typescript
Solution 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.
Solution 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.
Post a Comment for "Dropdown In Protractor With Typescript"