Using Typescript with Protractor for Dropdown Menus

Question

Using Typescript with Protractor for Dropdown Menus

As a newcomer to Protractor, I am looking to automate the selection of a dropdown. While I have some knowledge in JavaScript, I am currently working with typescript. Can someone advise me on how to select the dropdown option based on the text provided?

For example:

<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>

My main query is regarding how I can choose the dropdown value by matching it with the visible text.

javascript typescript drop-down-menu protractor

Answer 1

Answer №1

While there may be more efficient methods available, the following code offers a quick workaround:

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)`

Although this approach may not be the most ideal solution, it is straightforward and functional. If you need to select a specific item from a large list of items within the dropdown, consider modifying the code above to use

sendKeys('whatever item you need')

. This modification can be useful for scenarios where selecting a particular li element in a form is necessary for validation purposes. Keep in mind that this method may not be applicable if your form does not support manual typing into the dropdown field.

Answer 2

While there may be more efficient methods available, the following code offers a quick workaround:

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)`

Although this approach may not be the most ideal solution, it is straightforward and functional. If you need to select a specific item from a large list of items within the dropdown, consider modifying the code above to use

sendKeys('whatever item you need')

. This modification can be useful for scenarios where selecting a particular li element in a form is necessary for validation purposes. Keep in mind that this method may not be applicable if your form does not support manual typing into the dropdown field.

Answer 3

Answer №2

To achieve this, you can follow these steps:

// locating the combobox
let container = element(by.css('ul'));
// selecting an option
container.element(by.cssContainingText('value 1')).click();

If you wish to automate this process, you can create a wrapper class. Here's an example tailored to your scenario:

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 instance: 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);
  }

}

Subsequently, in your test script, you can implement the following:

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

Please note that I have not conducted a test on this yet, but it should function correctly as I employ a similar methodology.

Answer 4

To achieve this, you can follow these steps:

// locating the combobox
let container = element(by.css('ul'));
// selecting an option
container.element(by.cssContainingText('value 1')).click();

If you wish to automate this process, you can create a wrapper class. Here's an example tailored to your scenario:

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 instance: 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);
  }

}

Subsequently, in your test script, you can implement the following:

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

Please note that I have not conducted a test on this yet, but it should function correctly as I employ a similar methodology.

Using Typescript with Protractor for Dropdown Menus

Answer №1

Answer №2

Similar questions

Next.js API route is showing an error stating that the body exceeds the 1mb limit

Having difficulty integrating framer-motion with react-router

Develop a radio button filter utilizing the "Date of Creation" attribute, implemented with either jquery or JavaScript

The return type of Array.find is accurate, however, it contains an error

Making an Ajax request using jQuery to retrieve content in the application/x-javascript format

Combining NPM Script Commands: A Comprehensive Guide

What are the best methods for repairing a malfunctioning Drawer?

Uh-oh! A circular dependency has been detected in the Dependency Injection for UserService. Let's untangle this web and fix the issue!

Using Express.js to leverage Vega for generating backend plots

Enhancing interface properties with type safety in a function declaration using Typescript

Creating custom designs for a HTML button using CSS

Verify if Angular 2 route parameters have a legitimate value

Use JQuery to gradually decrease the opacity of divs individually

Including a unicode escape sequence in a variable string value

Sharing information through a hyperlink to a Bootstrap popup window

Adjusting the properties of an element with Javascript

Modify the color of the components in Select from Material-UI

Chrome: When enlarging an image, the overflow of the outer div is disrupted

Node and Express Fundamentals: Delivering Static Resources

sending information to PHP through AJAX dynamically