How do I record HTML Select2 component Follow

Select2 (https://select2.org/) is a jquery component for select boxes.

Our HTML Recorder and Player do not have out of the box support for this component as it logic suppresses the default event handlers.

To workaround it you may use the direct API of the select2 component to select a value. For that do the following steps:

1. Run your application in chrome browser.
2. Find your select2 DOM component (the select2 component is marked as <select...)
3. Select a value in your UI and open chrome devTools
4. In the console command line execute: $('<component selector>').select2("data") ;
   This will return a data structure in which you should find the ID field of the selected value.
5. Use the API command $('<component selector>').val('<id value>').trigger("change"); to change the list box value.

In the HTML IDE use the command 'runScript' to execute the proper javascript command to change the list box value.

e.g. runScript | javascript{$('<component selector>').val('<id value>').trigger("change");}

For additional details on the runScript command see:

http://<service manager>/ServiceManager/resources/docs/HtmlCommands.htm.