Dropdown list not working fine in IE10 - drop-down-menu

When i am clicking on my dropdown list, all the values are coming fine in all the older versions of IE but not in IE10. After I am selecting a particular value, next time when i am clicking on my dropdown, the values before the selected values are displayed above the dropdown area.
Example, if I have 4 values in my dropdown, after selecting 3rd value from the dropdown, next time when I am clicking on it to change the value, list dropdown is opening vertically upwards from 3rd otion, instead of downwards.
I tried to add meta tags as well.
I know that this is the default behaviour of IE 10 but want to know how to override it to make it look as in older versions of IE. Checked in other forums, no proper solution is given.
Please help. Here's the sample code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
</head>
<body>
<p id="demo"> Please enter your name </p>
Name: <input type="text" id="fname"> <br>
<label>Cars:</label>
<select id= "cars">
<option value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</body>
</html>

Related

Capybara Datalist Select not visible

I have the following HTML snippet:
<input type="text" id="manufacturer" list="manufacturers" placeholder="Search by manufacturer name or supplier code" class="form-control form-control-2-3" value="" name="manufacturer">
<datalist id="manufacturers">
<select>
<div>
<option value="Jaguar">AA</option>
<div></div>
</div>
<div>
<option value="Audi">AB</option>
<div></div>
</div>
<div>
<option value="Mercedes">AC</option>
<div></div>
</div>
</select>
</datalist>
It's a dropdown menu and I want to select one of the options. No matter what I try with any find command or select function. I always get the same error:
Selenium::WebDriver::Error::ElementNotVisibleError: element not visible: Element is not currently visible and may not be manipulated
Does anyone have any suggestions on how to scope to those options and select one?
Thanks.
What you're trying to do isn't currently possible because it's not actually a dropdown select element. The <datalist> option elements are never actually visible on the page because the standard states "In the rendering, the datalist element represents nothing and it, along with its children, should be hidden." - https://html.spec.whatwg.org/dev/form-elements.html#the-datalist-element . Instead any <option> elements in the datalist are just used as autofill suggestions for the input element (but don't actually restrict the value a user can input in any way). Because of this and since the datalist user can just type anything they want into the input element you can set the input value like any other text input.
fill_in("manufacturer", with: 'Jaguar')

Image not displaying in my view while another image is

I have read a lot of solutions to image problem but none of them are working for me and I can't figure out where I'm going wrong. I've an ASP.Net MVC 4 project I'm working on and all I wanted to do is add an image to one of the views. In this same view is already an image that displays perfectly fine.
Here is some of the code for non-working image:
#Scripts.Render("~/Scripts/Page/QueryForm.js")
<img id="searchPic" src="#Url.Content("~/Images/NereusSearchLogo-small.jpg")" alt="Pic"/>
<input list="RecentQueries" name="q" value="#(Model.SearchResults == null ? string.Empty : Model.SearchResults.Query)" autocomplete="off"/>
<datalist id="RecentQueries">
#{
foreach (var query in Model.RecentQueries)
{
<option value="#query.Text">#query.LastUsed.ToLocalTime()</option>
}
}
</datalist>
<button type="button" id="search">Search</button>
<button type="button" class="hasTooltip" id="new-project-search" title="Start a new search project">New Project Search</button>
Here is the code for the working image:
<span id="search-period-dd" data-dropdown="#search-period-menu" data-horizontal-offset="-8">
<img src="#Url.Content("~/Images/arrow_down-grey-16.png")" class="hasTooltip" title="Filter search results based on date" />
<span id="search-period">#(Model.StartDate == null? Model.SearchPeriodOption.GetAttribute<DisplayAttribute>().Name : "Since " + Model.StartDate.Value.ToLocalTime().ToString("d"))</span>
Here is the html generated:
<img id="searchPic" src="/Images/NereusSearchLogo-small.jpg" alt="Pic"/>
<input list="RecentQueries" name="q" value="" autocomplete="off"/>
<datalist id="RecentQueries">
<option value="Mice">8/7/2013 3:57:38 PM</option>
<option value="Deer">8/7/2013 1:12:49 PM</option>
<option value="Pigs">8/7/2013 12:22:29 PM</option>
<option value="Cats">8/7/2013 9:23:59 AM</option>
<option value="Dogs">8/7/2013 9:23:56 AM</option>
<option value="Birds">8/7/2013 9:23:48 AM</option>
</datalist>
<button type="button" id="search">Search</button>
<button type="button" class="hasTooltip" id="new-project-search" title="Start a new search project">New Project Search</button>
<link href="/Content/Common/ThirdParty/jquery.dropdown.css" rel="stylesheet"/>
<link href="/Content/Page/SearchPeriodDropdown.css" rel="stylesheet"/>
<script src="/Scripts/Common/ThirdParty/jquery.dropdown.js"></script>
<script src="/Scripts/Page/SearchPeriodDropdown.js"></script>
<span id="search-period-dd" data-dropdown="#search-period-menu" data-horizontal-offset="-8">
<img src="/Images/arrow_down-grey-16.png" class="hasTooltip" title="Filter search results based on date" />
<span id="search-period">Any time</span>
</span>
The image is physically in the correct directory, and has been added to the project under the Images folder.
When I inspect the element with Chrome there is no warning/error.
Any help would be greatly appreciated as I am at my whit's end as to why this keeps showing a broken image icon.
Edit Update:
I've confirmed that both images are in the same file location. Both have been added to the project under the same folder. When hovered over in Visual Studio (2012) both images show up. Both have the same full path value (minus their names of course) under the Properties tab when selected in Visual Studio (2012). However, if I swap their names within the code the problem image still doesn't show up and the good one does. I just don't know why at this point. Thanks for all your help.
Danrhul was correct. It was the company's filter. I just changed the file type to png and all is working.

How to click Dropdown list

<div id="ab100">
<iframe width="1000" height="600" src="...">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
<form id="form1" action=".." method="post">
<select id="abl03" style="..">..\',\'\')', 0)" name="l03ue">
<option value="0" selected="selected"><Select a Value></option>
<option value="1">AB</option>
<option value="2">AD</option>
<option value="3">BC</option>
<option value="4">CA</option>
</select>
</div>
When I want to click on DDL, I normally do this:
browser.select_list(:id => 'ab103').select('CA')
and it will select the option value = "4". But I am getting this error:
Watir::Exception::UnknownObjectException: unable to locate element, using {:id=>
"abl03", :tag_name=>"select"}
from C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.2/lib/watir
-webdriver/elements/element.rb:490:in `assert_exists'
Maybe this problem is due to its in a iframe.
Thanks in advance.
A few things:
There is no opening <select> tag in your example. I'm assuming <div id="abl03"> should be <select id="abl03"> or that it's simply missing.
The id for <select id="abl03"> is abl03, but id locator value in select_list(:id => 'ab103') is ab103.
<Select a Value> in <option value="0" selected="selected"><Select a Value></option> should be <Select a Value>.
So, the unable to locate elementerror is valid because a <select> tag with the specified id does not exist.
If you run into issues with frames, check out http://watirwebdriver.com/frames/ and https://github.com/watir/watirspec/blob/master/frame_spec.rb for examples.
I seen a similar question like this on stackoverflow. Sorry for posting it again. Thanks.
browser.frame(:index => 0).select_list(:id => ab103).select(/CA/)
any other suggestions are welcome too. Thanks.

Finding elements in html pages with dynamic frames

I am working with a vendor developed web page (SAP BusinessObjects InfoView login page) and am trying to identify and then select a drop-down element on a page. No matter what I try, I get an exception:
require 'watir-webdriver'
ie = Watir::Browser.new
ie.goto "http://svr-boj-bop-01.mgc.mentorg.com:8080/InfoViewApp"
ie.select_list(:id, "authenticationSelectBox").select("secLDAP")
#=> 'error: "unable to locate element, using :id=>"authenticationSelectBox", :tag_name=>"select"....'
I have FireFox and Firebug installed, I can use Firebug to select the element which gives me info about the element. I've tried to specify :id, :name, .div, .browser, .frame, ... nothing changes the error. My suspicion is that the inner frame(s) is creating the page dynamically, based on the select of the "Authentication", but I don't know how to check / validate that is the case.
I've searched and tried most of the suggestions on the site, nothing is helping.
The page has lots of Java code, forms, etc. Here is a snip from the page I'm trying to search for elements:
<body onload="logonPageLoad()">
<div class="logonContainer">
<div class="logonIFrame">
<iframe id="infoView_home" width="80%" frameborder="0" align="center" title="Log On to InfoView" name="infoView_home" onload="resizeFrameToContent("infoView_home")" src="jsp/listing/blank.jsp" style="height: 287px;">
<html class="logon_body">
<body class="logon_body" onload="loadInit();">
<div class="logon_body">
<div id="logonCredentials">
<form action="../../../PartnerPlatformService/service/app/logon.object" method="POST" name="logonForm">
<div class="logon_table">
<div id="authentication" class="logon_input">
<label class="logon_input_label" onclick="businessobjects.webutil.accessibility.setFocusOnElement('authenticationSelectBox'); return false;" tabindex="-1" for="authenticationSelectBox"> Authentication: < /label>
<select id="authenticationSelectBox" class="logonSelectBox" onchange="SetAuthType(false);resizeFrameToContent('infoView_home')" name="authType">
<option value="secEnterprise" selected=""> Enterprise `</option>
<option value="secLDAP"> LDAP </option>
<option value="secWinAD"> Windows AD </option>
<option value="secSAPR3"> SAP</option>
</select>
For elements in frames, you have to explicitly call out the frame:
my_frame = ie.frame(:id, "infoView_home")
my_frame.select_list(:id, "authenticationSelectBox").select("secLDAP")
Though it sounds like you might have already tried that. It is possible, that the element is not being loaded before Watir thinks the page is loaded. If that's the case, you can add a wait using something like the when_present method.
my_frame = ie.frame(:id, "infoView_home")
my_frame.select_list(:id, "authenticationSelectBox").when_present.select("secLDAP")
Note that you can do it in one line (ie you do not need the my_frame). It is just added to make it easier to read (ie minimize horizontal scrolling).

Watir question regarding selecting a hidden dropdown

I have two dropdowns, the second dropdown does not show until a choice is made from the first one. Using watir, i can select the first dropdown, and when i watch it, the second one becomes active, but it cannot select it. i just tried the regular select_list using name and id. Here is the code for the second drop down.
<td>
<input type="hidden" value="1" name="list" id="list">
<script type="text/JavaScript" language="JavaScript"></script>
<select>
<option value="">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
I've also notice the value for the hidden field change as i select different options.
Thanks for any help
The way that I usually access drop down lists is by using this string:
#browser.select_list(:name, "list").set("3")
Does this help?
I usually select hidden dropdowns this way
ie.hidden(:name=>"list").value='2'
Try this:
browserObj = Watir::Browser.new
browserObj.goto('you html in browser')
//browserObj.hidden(:id,"list").value
browserObj.select_list(:name, "list").select_value('2')

Resources