Knowledge Base Article

Home Page > Knowledge Base > Rapise

Home Page > Knowledge Base > Rapise > Rapise Web

Article Using Rapise 3.1 to test a web page with a multi-select list

by Elise B. on Monday, July 20, 2015

When you have a multi-select list in a web application, you may need to check which items are selected, or to check whether or not a particular item is selected. This article illustrates how to do that.

For example, say you have the following list:

<!DOCTYPE html>

<html>

<body>

<form action="form_action.asp">

<select name="cars" multiple>

  <option value="volvo">Volvo</option>

  <option value="saab">Saab</option>

  <option value="opel">Opel</option>

  <option value="audi">Audi</option>

</select>

<input type="submit">

</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

</body>

</html>

Then you can use these two functions to find out which item(s) are selected. First copy the two functions into the test: GetSelectedOptionsEmbed and GetSelectedOptions. GetSelectedOptions accepts id of an HTML element that should be a 'select' element. 


    function GetSelectedOptionsEmbed(id)
    {
        var result = "";
        var doc = null;
        if (typeof(getCurrentDocument) != "undefined")
        {
            doc = getCurrentDocument();
        }
        else
        {
            doc = document;
        }
        var el = doc.getElementById(id);
        if (el == null)
        {
            return id;
        }
        for(var i = 0; i < el.childNodes.length; i++)
        {
            var cEl = el.childNodes[i];
            if (cEl.tagName && cEl.tagName.toLowerCase() == "option" && cEl.selected == true)
            {
                result += cEl.value + ",";   
            }
        }
        return result;
    }
   
    function GetSelectedOptions(id)
    {
        var script = "" + GetSelectedOptionsEmbed + "\n execResult = GetSelectedOptionsEmbed(" + JSON.stringify(id) + ");";
        script = script.replace(/[\n\r]/g, "");
        var selectedOptions = Navigator.ExecJS(script);   
        return selectedOptions;
    }
   
    var select = SeS('inputSelectMultiple');
    select.DoSelect('Option1');
    select.DoAddSelection('Option2');
    Tester.Message("Value: " + select.GetValue());
    var options = GetSelectedOptions(select.GetId());
    Tester.Message("Selected Options: " + options);
Attachments
Article Info
Last Updated: 7/20/2015
Article ID: KB166
# Views: 596
Powered by KronoDesk v1.1.0.15 | © Copyright Inflectra Corporation 2011-2016 | Licensed to Inflectra Corporation.