I am doing a website using asp.net C# and I would like to popup a small window with information as soon as mouse hover a particular word. I know that I have to use jquery but I don't know exactly how to do it.
Any suggestions please?
There are many plugins out there that will help you achieve what you are looking for. However it is also very possible to implement this functionality yourself. I wouldn't be surprised either if some of the plugins you come across also use similar code.
The following is my attempt to demystify tooltip/popup plugin behaviour.
You could wrap the desired word in a <span> element and give it a .hover class.
<div>
This is some text with a <span class="hover">special</span>
word that has hovercraft capabilities.
</div>
Your jQuery (ver 1.7+) would look something like this :
$(".hover").on('mouseenter',function(){
// The popup must be shown here (mouse is over element).
}).on('mouseleave',function(){
// The popup must be hidden here (mouse has left element).
});
I should add here that I am using a great and yet sometimes forgotten capability of jQuery called "chaining". The on() function actually returns the object that it was attached to. In this case $(".hover") - so if I want to call another function on that object I can just add it as another function at the end. Another example of this would be :
$("#myElement").text("An error has occured!").css("color","#FF0000");
That line of code would also at the text to #myElement and also turn the colour red.
With regard to your actual popup - I would suggest two things :
Have an element at the bottom of your markup (written last so highest index - or manually set the highest z-index)
You could also have the popup in a hidden element right next to the element that is supposed to trigger the popup.
What you're after sounds like a 'tool tip'.
The solutions using jQuery are somewhat involved - so I'll just direct you to external resources.
Possible solutions:
ToolTip Plugin for jQuery
Build a Better Tooltip with jQuery Awesomeness
Related
im trying to make an automation with Watin and i'm having an issue reaching to a text fill in an HTML body..
when i log into the site i manage to reach the search box and to put input there and even press "enter" when it moves to the second page, i cant reach the input form there
This is my code - first step is working smooth but second isnt.
browser.GoTo("mywebsiteaddress");
browser.TextField(Find.ByName("sysparm_search")).TypeText(ticketNumber.Text);
System.Windows.Forms.SendKeys.SendWait("{ENTER}");
//browser.TextField(Find.ByName("sys_display.sc_task.u_category")).TypeText(ticketNumber.Text);
browser.Element("sc_task.work_notes");
This is the Browser source code when i check it with google chrome
<textarea wrap="soft" onkeypress="" onkeyup="multiModified(this);fieldTyped(this);" onfocus="this.isFocused=true;" autocomplete="off" data-charlimit="false" rows="16" id="sc_task.work_notes" data-length="4000" style="; width:100%; overflow:auto; " name="sc_task.work_notes" onblur="this.isFocused=false;" onchange="this.isFocused=false;multiModified(this)" onkeydown="multiKeyDown(this);;"></textarea>
Thanks all!
It could be a number of things including what you're looking for is in a frame or less likely you're looking for it before it is loaded. If in a frame, you'll need to specify which frame. If it is not loaded yet the easy way to check is by putting in a generic sleep() call, though that is not the best long term.
When I deal with something I can't find, I make heavy use of the Flash() method. In your case, you'd probably want to start at the whole page level and work your way down to your object. Flash() will show you where you're looking at to make sure you're looking in the right spot on the page, ideally getting down to the parent element of what you're looking for and being able to correctly identify and flash that and then figure out what is amiss with trying to get the textarea you're really trying to get at.
Use Fire fox. Install an add on by the name Firebug.
Whichever element that you want to inspect, you right click on it and say inspect element with fire bug.
once you know the id or name of that element, you can easily access it using the Find class.
Sometimes it so happens that the element is in a different frame than the main frame. watin cannot directly access that element if it is not accessed via the frame.
Without posting pages of C# code and markup, has anyone got a reason why this code
var link = _driver.FindElement(By.Id(field + "Field"));
var id = link.GetAttribute("id");
var text = link.Text;
given this markup
<a id="ForenameField" href="/MyUrl/MyFolder/MyId">3 errors</a>
Assigns an empty string to the text variable, but if I put a breakpoint on the second or third line and inspect the link variable, I can see the inner text of the element against the Text property on the inspector, it reads "3 errors", but the value of text is an empty string. It is not hidden, I can see the text if I add a watch or use quickview, any ideas?
Ok, it's my bad. Using jquery to toggle class on the div that contains the html in the question, meant that although users see the div appearing, the class that hides the div is still in the tag. A bit like this
<div class="hideThis showThis"><!-- my elements /--></div>
This makes it so that Selenium is right not give me a text value. It is strange however that the Visual studio debugger thinks that there should be a value. Visual Studio seems to go with what I can see, but Selenium is more pedantic about the hideThis class being there.
I go with the idea that if you can't see it you can't interact with it, so it is worth looking up the html graph from the element you expect to have a value to see if any class is present which would hide your element.
Feel free to recommend that I delete this rather obvious wisdom.
I know this was posted over a year ago, but I had this exact problem too and came across this thread. I was able to solve it by just waiting for the DOM to load--some elements aren't visible until the DOM is updated. So just putting Thread.Sleep(6000) or whatever after navigating to the page got it to work for me.
We have automated a few test cases using the Ranorex automation framework for a Silverlight web application. These test cases involve clicking buttons in order to invoke certain messages on the screen. In order to grab the button on the screen, we first create an Ranorex button object and then point it to the appropriate element using Ranorexpath. Then, we use the RanorexButton.Click() event to click the button. However, this event is unreliable. It works sometimes and at other times the button is not clicked. When the button is not clicked, we have to run the test case again from the start. What are we doing wrong? If this is a known problem of ranorex, please suggest workarounds.
I was facing the same problem but I am able to resolve the problem by introducing a Validate.Exists(infoObject) just before the click. Please make sure that you pass infoObject of your button or any element in Validate.Exists API.
Example:
Validate.Exists(repo.MyApp.LoginBtnInfo);
var button = repo.MyApp.LoginBtn;
button.Click();
With regards,
Avinash Nigam
I haven't heard about such a problem with Ranorex yet, maybe this is just a timing issue.
You could add a Validate.Exists(yourButton) right before the click, this ensures that the click is performed after the button was successfully loaded.
If it is a WebElement you could also use the PerformClick() method instead of the normal Click() method.
There are also different methods which will ensure that the button is in the visible area and has focus, like the EnsureVisible() or the Focus() method.
You will find the available methods of the used adapter in the online API of Ranorex.
If the Button is not within the area you can see without scrolling, you can use a
var button = repo.Buttons.button1;
button.EnsureVisible();
button.Click();
In this way the button is forced to be watched.
It might as well be an issue with the xpath and element Id-s.
If you have changing element Id-s even when the page is navigated away from and moved back (for example we have this issue with SAP related components) you might need to make a more robust xPath path variable using regular expressions.
Try to find object and parts of the path that do not change (eg. "iFrame id="MainContent"" or "btn id="ID_XXXX_Search_Button"") - ofcourse this will only help if the issue is within this.
Ranorex Regular Expression info can be found here: http://www.ranorex.com/support/user-guide-20/ranorexpath.html#c3294
A quick example of what I'm talking about:
Let's say we have an input field that has a changing ID in it's name:
US_EL.ID_F2B49DB60EE1B68131BD662A21B3432B:V_MAIN._046A-r
And I know that the part in the Id that doesn't change is:
:V_MAIN._046A-r
I can create a path for this searching the element by the ending of the elements' id that doesn't change using regular expression:
/dom[#domain='test.example.com']//iframe[#'identifier']//iframe[#'identifier2']//input[#id**~'^**:V_MAIN._046A-r']
The bold part will specify to search for an input element with an Id that ends with ":V_MAIN._046A-r".
An issue that might arrise from this is if you have elements using partially the same names you might get multiple elements returned for the same path. So it's wise to add a few more certain points to the path (eg. "iframe[#'identifier2']") when this issue arrises.
As you know, Selenium IDE can show you a script and tell you what element you just manipulated.
I don't know the what happened behind this. Every automation framework can know what element you are clicked, inputed, or selected..
I want to have a console output and display every element I just manipulated in browser.
How can I implement this?
Using jQuery:
$("*").click(function(e) {
console.log(this);
}.blur(function(e) {
console.log(this);
};
Just pop this on your page somewhere and it'll log the element that was manipulated whenever it's clicked or selected. I'm sure there are other ways of manipulation, but the above is a start. It would be trivial to add more handlers--.change() and .hover() come to mind.
I am writing a simple personal app that has a browser control and I want it to automatically "Refresh" gmail to check it more often than it does by default. There are monkey scripts that do this but I'm trying to add my personal style to it.
Anyhow, I've looked around and found everything but what I can do in csharp using the browser control.
I found this:
// Link the ID from the web form to the Button var
theButton = webBrowser_Gmail.Document.GetElementById("Refresh");
// Now do the actual click.
theButton.InvokeMember("click");
But it comes back with null in 'theButton' so it doesn't invoke anything.
Anyone have any suggestions?
It's been awhile since I've used JavaScript, but given the other answers and comments that there is no real ID associated with the element, could you do something like the following:
Search all Div's with an attribute of Role == 'Button' and an InnerHtml == 'Refresh'.
Once the correct InnerHtml is found, get the Element.
Invoke the click on the found Element.
Again, this may be blowing smoke, but thought I'd throw it out there.
edit: Just realized you are doing this with C# and a browser control; however, the concept would still be the same.
The best suggestion I could give you at this point involves an existing API that is used for .NET web browser based automation:
http://watin.org/
Since the div tag with the desired button really only seems to identify itself with the class name, you could use the Find.BySelector(“”) code included with the most recent version of watin.