How to Verify Tool-Tips in HTML

There's more than one way to implement Tool-tips in HTML. They are usually implemented using the Title attribute that gets applied to elements. Consider this HTML code snippet:


<p>Test Studio, made by <span title="Telerik is a leading vendor of development, team productivity, and automated testing tools.">Telerik</span>, is a quantum leap forward in Web test automation.</p>


When you hover your mouse over the word Telerik, the tool-tip will be displayed as shown in this screenshot:



To validate the tool-tip, create a verification using the Sentence Verification Builder to build and add a verification test step as shown in this screenshot:



If you're using the Telerik Testing Framework, write the code as follows:


Find.ByName<HtmlSpan>("myHtmlSpan").AssertAttribute().Value("title", ArtOfTest.Common.StringCompareType.Same, "Telerik is a leading vendor of development, team productivity, and automated testing tools.");


Now when you execute your test it will verify that the Title attribute, i.e. the tool-tip, of your HTML element contains the correct text.


Often verifying a tool-tip will be much more complex. A lot of the time tool-tips are loaded on demand. This means they only become a part of a page's DOM tree after a certain event takes place (most often Mouse Hover over). In this case you might be able to use Freeze Mode to work around the problem. Let's take this tool-tip for our example. You will need to invoke a hover over on one of the images before you can perform any verifications on the tooltip. You might need to manually update the DOM Tree before searching for a load-on-demand tool-tip (ActiveBrowser.RefreshDomTree(); as a coded step).


Note: If you're using Telerik Testing Framework only (no Test Studio available), you'll need to do some research in order to determine how to identify the tool-tip (your developers could give you some info). Tools like Firebug can help you inspect the tool-tip and determine how to locate it. This can be very tricky especially if the tool-tip is loaded-on-demand or if it's not part of the DOM Tree.