I am trying to resolve the links in a google search results list by executing a javascript on the page that would normally resolve when you click the link. Basically, I am trying to resolve all of them when the page loads.
Here is the html generated by google of the first two search results:
<H2 class=hd>Search Results</H2>
<DIV id=ires>
<OL id=rso eid="3gHFUYToG6LD0gGJ2IDAAQ">
<LI class=g>
<DIV class=rc data-hveid="43"><SPAN style="FLOAT: left"></SPAN>
<H3 class=r><A onmousedown="return rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)" href="http://prezi.com/wnx5jat2oene/ipad/">IPad by <EM>Frunk La Je</EM> on Prezi</A></H3>
<DIV class=s>
<DIV>
<DIV style="WHITE-SPACE: nowrap" class="f kv"><CITE>prezi.com/wnx5jat2oene/ipad/</CITE>
<DIV class="action-menu ab_ctl"><A aria-haspopup=true aria-expanded=false id=am-b0 class="clickable-dropdown-arrow ab_button" role=button href="#" jsaction="ab.tdd; keydown:ab.hbke; keypress:ab.mskpe" data-ved="0CC0Q7B0wAA" aria-label="Result details"><SPAN class=mn-dwn-arw></SPAN></A>
<DIV class="action-menu-panel ab_dropdown" role=menu tabIndex=-1 jsaction="keydown:ab.hdke; mouseover:ab.hdhne; mouseout:ab.hdhue" data-ved="0CC4QqR8wAA">
<UL>
<LI class="action-menu-item ab_dropdownitem" role=menuitem><A class=fl onmousedown="return rwt(this,'','','','1','AFQjCNHsvjmPpYAOeqVOHIIs_PWPuD5JaQ','','0CC8QIDAA','','',event)" href="http://webcache.googleusercontent.com/search?q=cache:bKCj-2ogWdIJ:prezi.com/wnx5jat2oene/ipad/+frunk+la+je&cd=1&hl=en&ct=clnk&gl=us">Cached</A></LI></UL></DIV></DIV></DIV>
<DIV class="f slp"></DIV><SPAN class=st>IPad. No description. by <EM>Frunk La Je</EM> on 7 June 2012 4 Tweet <B>...</B> thanks</a></p>. Make a copy Share Embed Like. by <EM>Frunk La Je</EM> on 7 June 2012 4.</SPAN></DIV></DIV></DIV></LI>
<LI class=g>
<DIV class=rc data-hveid="48"><SPAN style="FLOAT: left"></SPAN>
<H3 class=r><A onmousedown="return rwt(this,'','','','2','AFQjCNE7-nvy-ymTrBI0x4zleJOUXlY6nA','','0CDEQFjAB','','',event)" href="http://prezi.com/user/q53evqg1dnrn/"><EM>Frunk La Je</EM> on Prezi</A></H3>
<DIV class=s>
The function that resolves the first link:
onmousedown="return rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)"
I tried this:
foreach (HtmlElement h in web.Document.All)
{
h.RaiseEvent("onmousedown");
}
I tried replacing "onmousedown" with "MouseDown".
I tried this too:
web.Document.InvokeScript("rwt(this,'','','','1','AFQjCNH7JvhrnBRwX-7DKsGJZoasX9zqFA','','0CCwQFjAA','','',event)");
Any ideas how I can get this function to execute? I've also looked at the getElementByID function, but I don't know what the ID is for this.
Try to simulate a click programmatically, let's say in one of your anchor tag <a>. Now using your own code we will simulate a click on your first anchor tag which is subscript 0 (as shown below), like this:
HtmlElement simulateClickAnchor = webBrowser1.Document.GetElementsByTagName("a")[0];
simulateClickAnchor.InvokeMember("click");
HtmlDocument doc = browser.Document;
HtmlElement head = doc.GetElementsByTagName("head")[0];
HtmlElement s = doc.CreateElement("script");
s.SetAttribute("text","function sayhello() { alert('hello'); }");
head.AppendChild(s);
browser.Document.InvokeScript("sayHello");
Related
Dropdown - On clicking on div,Ul style attribute is changed to display:block from display:none but this happens in fraction of second unable to take list of li elements from ul
<div id="main_filter" class="drop-select-wrap">
<span data-title="Active Clinic Patients" data-value="101" class="optionValue ov-gradient">Active Clinic Patients ▼</span>
<ul class="dropSelect" id="parentFilter" style="display: none; width: 175px;">
<li id="filterTypes" data-value="102" onclick="tier1FilterChanged(this);" data-rel="My Active Patients">
<span data-title="My Active Patients">My Active Patients</span>
</li>
<li id="filterTypes" data-value="101" onclick="tier1FilterChanged(this);" data-rel="Active Clinic Patients">
<span data-title="Active Clinic Patients">Active Clinic Patients</span>
</li>
<li id="filterTypes" data-value="126" onclick="tier1FilterChanged(this);" data-rel="Inactive Patients">
<span data-title="Inactive Patients">Inactive Patients</span>
</li>
</ul>
</div>
Initial :
On page load, i am having dropdown of above code where - UL tag is having attribute style="display: none; , so all li elements are hidden . Only span value i.e. default selected value is displayed.
In this case, for dropdown on page load - Active Clinic Patients is displayed.
On Click of dropdown :
Once i click on dropdown, UL attribute is changed to style="display: block;"
and li elements are visible.
Problem Faced :
On clicking on span , dropdown values are displayed for fraction of second - so unable to handle Ul style attribute changes and selecting value from li.
I am struggling for this, it would be great if anyone can provide some solution.
Thanks in advance.
Tried Code Snippet :
private IWebElement parentFilter => driver.FindElement(By.XPath("//div[#id='main_filter'][1]/span"));
public void SelectFilter(string filterOption)
{
IWebElement elementToShow = driver.FindElement(By.XPath("//ul[#class='dropSelect']"));
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].style='display: block;'", elementToShow);
IWebElement option = elementToShow.FindElement(By.XPath("//li/span[contains(text(),'" + filterOption + "')]"));
Actions action = new Actions(driver);
action.ClickAndHold(parentFilter).MoveToElement(option).Click().Build().Perform();
}
It looks like your code is attempting to directly modify the style using ExecuteScript. Instead, the code should emulate what a user does by executing a Click() method on elementToShow. This should open the list, allowing you to find your target option.
I want to click on div[#id='main_filter'] and then select a li element from the dropdown.
But the problem i am facing is, parent tag has attribute
style = display: none, so li items are hidden. so I am unable to get elements from the li tag.
I am creating a generic method to selectfromdropdown.
<div id="main_filter" class="drop-select-wrap">
<span data-title="Active Clinic Patients" data-value="101" class="optionValue ov-gradient">Active Clinic Patients ▼</span>
<ul class="dropSelect" id="parentFilter" style="display: none; width: 175px;">
<li id="filterTypes" data-value="102" onclick="tier1FilterChanged(this);" data-rel="My Active Patients">
<span data-title="My Active Patients">My Active Patients</span>
</li>
<li id="filterTypes" data-value="101" onclick="tier1FilterChanged(this);" data-rel="Active Clinic Patients">
span data-title="Active Clinic Patients">Active Clinic Patients</span>
</li>
<li id="filterTypes" data-value="126" onclick="tier1FilterChanged(this);" data-rel="Inactive Patients">
<span data-title="Inactive Patients">Inactive Patients</span>
</li>
</ul>
</div>
my solution :
private IWebElement parentFilter => driver.FindElement(By.XPath("//div[#id='main_filter'][1]/span"));
public void SelectFilter(string filterOption)
{
ElementHandler.Click(parentFilter);
IWebElement element = driver.FindElement(By.Id("parentFilter"));
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].removeAttribute('style')", element);
IWebElement filterName = element.FindElement(By.XPath("//li/span[contains(text(),'" + filterOption + "')]"));
//driver.FindElement(By.XPath("/ul[#id='parentFilter']/li/span[contains(text(),'"+ filterOption + "')]"));
ElementHandler.SelectFromDropdown(parentFilter, filterName);
}
public static void SelectFromDropdown(IWebElement element1,IWebElement element2)
{
Actions action = new Actions(driver);
action.ClickAndHold(element1).Build().Perform();
action.ClickAndHold(element1).MoveToElement(element2).Click().Build().Perform();
}
You could try executing some Javascript on the hidden ul element to change its style attribute and display it. I see you're already trying to remove the style attribute, but let me show you an approach I've taken before that has worked:
IWebElement elementToShow = driver.FindElement(By.XPath("//ul[#class='dropSelect']"));
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].style.display = 'block';", elementToShow);
If that works, then you should be able to click on the li elements.
One of the core features of Selenium is that when a Webdriver tries to interact with an element that is covered or hidden, it will fail to do so. This is a good thing, since it allows us to detect such anomalies in our testing environments instead of exposing such behaviour to our users.
This can be a bit confusing at times, though. For example, a Webdriver that tries to click a <div> that is covered by another transparent <div> will fail to do so since it is covered, although it might look like a clickable element to a human eye.
I'm working on a page, where page loads dynamically and the data gets added while scrolling. To identify the properties of an item, I identified the parent div, where to identify the address, I have to locate an XPath from the parent to span element.
Below is my DOM structure:
<div class = "parentdiv">
<div class = "search">
<div class="header">
<div class="data"></div>
<div class="address-data">
<div class="address" itemprop="address">
<a itemprop="url" href="/search/Los-Angeles-CA-90025">
<span itemprop="streetAddress">
Avenue
</span>
<br>
<span itemprop="Locality">Los Angeles</span>
<span itemprop="Region">CA</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Here I want to locate the three spans, where I' currently in parent div.
Can someone guide how to locate an element using XPath from particular div?
You can try the following XPaths,
To locate the street address:
//div[#class="parentdiv"]/div/div/a/span[#itemprop="streetAddress"]
To locate the locality/city:
//div[#class="parentdiv"]/div/div/a/span[#itemprop="Locality"]
To locate the state:
//div[#class="parentdiv"]/div/div/a/span[#itemprop="Region"]
To print the list of <span> tagged WebElements with texts like Avenue with respect to div class = "parentdiv" node you can use the following block of code :
IList<IWebElement> myList = Driver.FindElements(By.CssSelector("div.parentdiv > div.address > a[itemprop=url] > span"));
foreach (IWebElement element in myList)
{
string my_add = element.GetAttribute("innerHTML");
Console.WriteLine(my_add);
}
Your DOM might become fairly large, since it adds elements while scrolling, so using CSS selectors might be quicker.
To get all the span tags in the div, use:
div[class='address'] span
To get a specific span by using the itemprop attribute use:
div[class='address'] span[itemprop='streetAddress']
div[class='address'] span[itemprop='Locality']
div[class='address'] span[itemprop='Region']
You can store the elements in a variable like so:
var streetAddress = driver.FindElement(By.CssSelector("div[class='address'] span[itemprop='streetAddress']"));
var locality = driver.FindElement(By.CssSelector("div[class='address'] span[itemprop='Locality']"));
var region = driver.FindElement(By.CssSelector("div[class='address'] span[itemprop='Region']"));
I have a bootstrap alert like so :
<div class="alert alert-danger">
×
First Error
</div>
My problem is I want to be able to change this text dynamically in my code behind, c#. Ideally, I would like to have multiple bullet pointed error messages in one alert like the image below:
Can anyone provide me with any ideas of how to achieve this?
In your html, have this
<div id="BootstrapErrorMessage" runat="server">
</div>
and in your code, do this
....
MyErrorString += "<li>Bad Password</li>";
....
MyErrorString += "<li>Invalid Date</li>";
....
if (!MyErrorString.isNullOrEmpty()) {
BootstrapErrorMessage.InnerHtml += "×" +
"<ul>" + MyErrorString + "</ul>";
BootstrapErrorMessage.Attributes["class"] = "alert alert-danger";
}
You can download the error messages to the client when he request the model of your page(recommended solution). Or you can post your data to the server and get list of errors to show.
Your html code should be like this:
<div class="bs-example">
<div class="alert alert-danger fade in">
<ul>
<li><strong>First</strong> Error </li>
<li>Second Error</li>
</ul>
</div>
</div>
And each li element should be updated from server(One of the options you choose).
I have an list that toggles with no problem in FF. I need this working IE for it to be production ready.
It seems (IE) to apply the js to the first #orderItem and the first #familiy only. The rest of the items in the list are ignored.
Any help would be great.
A piece of the HTML (large list):
<div class="classificationContainer">
<ul class="classification" id="orderUL">
<li id="orderItem" class="ordrheading">
<div class="order">
<a href="?nav=search_recherche&lang=en">
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="By Classification" id="OrdListImage" />
Apodiformes (Swifts and Hummingbirds)
</a>
</div>
<ul class="classification" id="FamilyList">
<li id="familiy">
<div class="family">
<a href="?nav=search_recherche&lang=en">
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" />
Apodidae (Swifts)
</a>
</div>
<ul class="classification" id="SpiecesList">
<li>
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
Chimney Swift (Chaetura pelagica)
</li>
</ul>
</li>
<li id="familiy">
<div class="family">
<a href="?nav=search_recherche&lang=en">
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_closedc.gif" alt="Family" id="FamListImage" />
Trochilidae (Hummingbirds)
</a>
</div>
<ul class="classification" id="SpiecesList">
<li>
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
Ruby throated Hummingbird (Archilochus colubris)
</li>
<li>
<img src="http://dev.ncr.ec.gc.ca/publications/bba-aob/images/node_leafc.gif" alt="Species" />
Rufous Hummingbird (Selasphorus rufus)
</li>
</ul>
</li>
</ul>
</li></ul></div>
I have the following jquery functions:
<script type="text/javascript">
$(document).ready(function () {
// toggle action for the order to familiy
$("li#orderItem").click(function (event) {
// toggle the image
var src = ($("#OrdListImage", this).attr("src") == "/images/node_closedc.gif")
? "/images/node_openc.gif"
: "/images/node_closedc.gif";
$("img#OrdListImage", this).attr("src", src);
//toggle the ul
$('ul#FamilyList', this).toggle($('ul#FamilyList', this).css('display') == 'none');
// stop all link actions
return false;
});
//toggle action from familiy to speices
$("li#familiy").click(function () {
// toggle the image
var src = ($("#FamListImage", this).attr("src") == "/images/node_closedc.gif")
? "/images/node_openc.gif"
: "/images/node_closedc.gif";
$("img#FamListImage", this).attr("src", src);
//toggle the ul
$('ul#SpiecesList', this).toggle($('ul#SpiecesList', this).css('display') == 'none');
// stop all link actions
return false;
});
});
Also check if id's are not repeated (there is only one #orderItem, only one #familiy and etc.). "id" attribute must be unique in html document, "class" can be repeated.
The toggle function provided by jQuery is not guaranteed to work. I lost the reference where I read this (was on jQuery's homepage). I encountered the same problem and (as suggested by jQuery) implemented my own toggle function. I'd suggest trying this, as it's not much work and could provide you a solution.