Databases
StackOverflow2013
Postsdbo
POselecting an option item using selenium with c#
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POselecting an option item using selenium with c#
    text
    copied!<p>I have just started using selenium today to write a few UI tests. It seems pretty straight forward to use and making some good progress.</p> <p>I have a page that is using a kendoui with the latest beta. They have a multiselect control I am trying to test.</p> <p>The outputted html of the control looks like</p> <pre><code>&lt;div class="k-widget k-multiselect k-header" style=""&gt; &lt;div class="k-multiselect-wrap floatWrap"&gt; &lt;ul role="listbox" unselectable="on" class="k-reset" id="StoreIds_taglist"&gt;&lt;/ul&gt; &lt;input class="k-input k-readonly" style="width: 119px;" accesskey="" role="listbox" aria-expanded="false" tabindex="0" aria-owns="StoreIds_taglist StoreIds_listbox" aria-disabled="false" aria-busy="false"&gt;&lt;span class="k-loading" style="display: none;"&gt;&lt;/span&gt;&lt;/div&gt; &lt;select data-val="true" data-val-required="Please select at least 1 store" id="StoreIds" multiple="multiple" name="StoreIds" data-role="multiselect" style="display: none;" aria-disabled="false"&gt; &lt;option value="d0f36ef4-28be-4d16-a2e8-37030004174a"&gt;stoe jo blogs&lt;/option&gt; &lt;option value="0f0afaec-797a-4b70-8599-ffb4176d7933"&gt;Store 3&lt;/option&gt; &lt;option value="11774315-a0e0-4686-8c70-b882a8f75ab4"&gt;store 5&lt;/option&gt; &lt;option value="28f32bc1-17de-4c73-8bed-b0abd7f5bd81"&gt;store 6&lt;/option&gt; &lt;option value="daf9927c-26a2-4395-ba6d-800d5af85ca7"&gt;store4&lt;/option&gt; &lt;option value="86bd876f-3312-4d1f-96ce-640e0dbf46df"&gt;z&lt;/option&gt; &lt;option value="7da8dfe0-f395-4dc3-9aed-1ce44ac280c0"&gt;zxzxc&lt;/option&gt; &lt;/select&gt; &lt;span style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; letter-spacing: normal; text-transform: none; line-height: 18.328125px; position: absolute; visibility: hidden;"&gt;Select stores... &lt;/span&gt; &lt;/div&gt; </code></pre> <p>I am trying to write a selenium test to select an index from the select list.</p> <p>So far I have</p> <pre><code> IWebElement sTag = driver.FindElement(By.Id("StoreIds")); SelectElement selectTag = new SelectElement(sTag); var availableOptions = selectTag.Options; </code></pre> <p>availbleOptions has the 7 items however the text is always empty. Basically I am trying to select an item from the list.</p> <p>I try without luck</p> <pre><code> foreach (IWebElement item in availableOptions) { item.Click(); Console.WriteLine(item.Text); } </code></pre> <p>I get an error</p> <blockquote> <p>Cannot click on option element. (UnexpectedJavaScriptError)</p> </blockquote> <p>What do I need to do to enable selecting an item?</p> <p>Ok a full test example</p> <pre><code> [Test] public void TestMultiSelect() { driver.Navigate().GoToUrl("C:/temp/HTMLPage1.html"); WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(5)); wait.Until((d) =&gt; { return d.Title.StartsWith("Test"); }); var stores = driver.FindElement(By.Id("required")); IWebElement sTag = driver.FindElement(By.Id("required")); SelectElement selectTag = new SelectElement(sTag); var availableOptions = selectTag.Options; foreach (IWebElement item in availableOptions) { item.Click(); Console.WriteLine(item.Text); } } </code></pre> <p>Html Page</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Test&lt;/title&gt; &lt;link href="https://da7xgjtj801h2.cloudfront.net/2013.1.226/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /&gt; &lt;link href="https://da7xgjtj801h2.cloudfront.net/2013.1.226/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://da7xgjtj801h2.cloudfront.net/2013.1.226/js/kendo.web.min.js"&gt;&lt;/script&gt; &lt;script src="https://da7xgjtj801h2.cloudfront.net/2013.1.226/js/kendo.aspnetmvc.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="example" class="k-content" role="application"&gt; &lt;div class="demo-section"&gt; &lt;h2&gt;Invite Attendees&lt;/h2&gt; &lt;label for="required"&gt;Required&lt;/label&gt; &lt;select id="required" multiple="multiple" data-placeholder="Select attendees..."&gt; &lt;option&gt;Steven White&lt;/option&gt; &lt;option&gt;Nancy King&lt;/option&gt; &lt;option&gt;Anne King&lt;/option&gt; &lt;option&gt;Nancy Davolio&lt;/option&gt; &lt;option&gt;Robert Davolio&lt;/option&gt; &lt;option&gt;Michael Leverling&lt;/option&gt; &lt;option&gt;Andrew Callahan&lt;/option&gt; &lt;option&gt;Michael Suyama&lt;/option&gt; &lt;option&gt;Anne King&lt;/option&gt; &lt;option&gt;Laura Peacock&lt;/option&gt; &lt;option&gt;Robert Fuller&lt;/option&gt; &lt;option&gt;Janet White&lt;/option&gt; &lt;option&gt;Nancy Leverling&lt;/option&gt; &lt;option&gt;Robert Buchanan&lt;/option&gt; &lt;option&gt;Margaret Buchanan&lt;/option&gt; &lt;option&gt;Andrew Fuller&lt;/option&gt; &lt;option&gt;Anne Davolio&lt;/option&gt; &lt;option&gt;Andrew Suyama&lt;/option&gt; &lt;option&gt;Nige Buchanan&lt;/option&gt; &lt;option&gt;Laura Fuller&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;style scoped&gt; .demo-section { width: 350px; height: 200px; padding: 30px; } .demo-section h2 { font-weight: normal; } .demo-section label { display: inline-block; margin: 15px 0 5px 0; } .demo-section select { width: 350px; } #get { float: right; margin: 25px auto 0; } &lt;/style&gt; &lt;script&gt; $(document).ready(function () { // create MultiSelect from select HTML element $("#required").kendoMultiSelect(); }); &lt;/script&gt; </code></pre> <p> </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload