Usage of Click NLP Statement to select elements from lists

We have a couple of NLP statements for regular Select elements on Web pages. Some of them are:

  • Select multiple options by index test data in the ui identifier list
  • Select option by index test data in the ui identifier list
  • Select option by index test data in the list with label text containing attribute
  • Select option by text test data in the ui identifier list
  • Select option by text test data in the list with label text containing attribute
  • Select option using value test data in the ui identifier list
  • Select option using value test data in the list with label text containing attribute
  • Select option with label test data in the radio button group ui identifier


These NLP Statements will work without issues on regular HTML Select lists. However, modern web pages might use a different implementation for Select lists(plugin based Select lists - material, bootstrap, or jquery select lists). In those cases, we need to use the Click NLP Statement to select the element from the list.


The most common usage pattern that we can follow for non native select lists consists of two actions:
1. Click on the list to reveal the list elements


2. Click on the desired list element to be selected


Info: You may use the Testsigma Recorder to record both the Select list and the required Select list element.


Alternative NLP Statements for non-native Select lists

For some other NLP Statements that involve Select lists, the Step might fail if those are not regular Select element. Here's an example:

  • Get all available options from the ui identifier list
  • Get the number of selected options from ui identifier list
  • Get the selected options from ui identifier list
  • Get the total number of available options from ui identifier list
  • Store the text of the selected option from ui identifier list into a variable test data
  • Verify that the list ui identifier allows selection of multiple options
  • Verify that the ui identifier list has test data number of options
  • Verify that the ui identifier list has option with text test data selected
  • Verify that the ui identifier list has option with value test data selected
  • Verify that the ui identifier list has some option selected

Please make sure those are regular Select element instead of plugin based select lists. Otherwise, you might need to use alternative NLP Statements. 


Example

The web page contains a select list which uses 'md-select' element from material theme library instead of native 'select' element. The user needs to verify the selected option in the list. They could do this easily if it was a regular select element using the NLP Statement - Verify that the ui identifier list has option with text test data selected




As you might already know, a plugin-based select list uses different methods to mark the selected element. The most common method is to use class names. However, this class names might be different for different plugins.


In this case, the user could use another NLP to verify the selected list element - Verify that the element ui identifier displays text test data


Similarly, you can find alternatives for your required NLP in the NLP Grammar page. If you can't find a suitable NLP for the scenario, please feel free to contact the Testsigma Support team or create a ticket at https://support.testsigma.com