QTP/UFT unable to recognize toolbar and menu items

I'm trying to record a desktop application and noticed that UFT won't pick up activity from the menu bar. It's able to record the app being opened but it doesn't detect when I clicked on File then Exit, for example.



In use: HP UFT 11:50

Here's what worked for me: On Record >> Record and Run Settings >> Under Windows Applications tab:
Select "Record and run test on any open Windows-based application". Click Apply then OK.


After the change, it's now able to record toolbar activity, yey!


Hope it works out for you too! :)
Share:

Start Recording button disabled in HP LoadRunner Vugen 11.50

I was trying to record a web application using Web/Http protocol, but somehow I couldn't begin recording because the "Start Recording" button is disabled.


Current setup:
HP LoadRunner Vugen 11.50
Internet Explorer 11 Cause:
Internet Explorer 11 is not supported by Vugen 11.50

Possible solutions:

  1.  Downgrade to Internet Explorer 10 or
  2. Upgrade to LoadRunner Vugen 12.00 or
  3. Install LoadRunner 11.52 service pack - this worked for me! I can't simply upgrade to Vugen 12 because it's team standard, and IE11 is the company standard browser hehe. In short I can't touch those two. Helpful links here and here.
Share:

How to add a 'Back to Top' button on your blog with smooth scrolling (for Blogger)


This isn't something new, I picked this up from here and thought I should make a guide of my own specifically for Blogger users like myself.

Features
  • 'Back to Top' button that fades into view at the bottom right corner of the page as you scroll down
  • Fades out when you reach the top
  • Smooth scrolling
  • HTML, CSS, JQuery, FontAwesome
Code

Part 1: CSS

On Blogger >> Dashboard >> Template >> Edit HTML
Go to the CSS section of your blog and insert the code below:

.back-to-top {
    display:none;
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    color: rgb(207, 72, 94);
    font-size: 12px;
    padding: 1em;
}

.back-to-top:hover {
    text-decoration:none;
    color: rgba(207, 72, 94, 0.8);
}

If you can't find where to put it, search for this ]]></b:skin> and paste the code above it.

You can edit the color and size of the button by changing the values in red and blue respectively. Unless you want a different hover color, keep the two RGB values the same. The alpha value (0.8) tells how transparent the button becomes when you hover on it.
Part 2: JQuery

Still inside the HTML code, paste the code below inside the <head> portion of your template

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

If it's already existing, no need to do this.

Part 3: HTML

Still inside the editor, paste the code below directly above the </body> tag.

<a href="#" class="back-to-top">Back to Top</a>
<script>
 jQuery(document).ready(function(){
  var offset = 220;
  var duration = 500;
  jQuery(window).scroll(function(){
   if (jQuery(this).scrollTop() > offset) {
    jQuery('.back-to-top').fadeIn(duration);
   } else {
    jQuery('.back-to-top').fadeOut(duration);
   }
  });

  jQuery('.back-to-top').click(function(event){
   event.preventDefault();
   jQuery('html, body').animate({scrollTop: 0}, duration);
   return false;
  })
 });
</script>

You may replace 'Back to Top' with any icon you want. In my case, I used an icon from FontAwesome and replaced the text in purple with this:

<i aria-hidden='true' class='fa fa-arrow-circle-up' style='font-size:50px'/>

Bonus: FontAwesome

It's basically a set of web fonts featuring scalable vector icons. In short, just a bunch of icons turned into fonts so you don't need to use an image every time you need one. Awesome!

To use FontAwesome, you must first install it like you did with JQuery by adding the line below inside the <head> portion of your template

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>

 Then choose the icon you want from here and get the corresponding markup in order to display it.

Done!

Save the HTML code of your blog and check to see if it works. :)
Share:

How to add syntax highlighter on Blogger

This solution is helpful in prettifying code blocks we share on our posts. Usually I'll just add custom CSS to the <pre> tag to improve the look and feel of the pre container, but that's as far as I can get. So you could imagine how nicer it would be to apply an actual syntax highlighter on our posts!

Many thanks to Alex Gorbatchev for creating this syntax highlighter, and this site for documenting a step by step post on how to apply it on Blogger. Here's my own version of the guide and a usage demo as well so I know where to check when I forget about it! Setting it up:

Open Blogger's HTML editor and paste the following before the </head> tag:


//Core script




Save it. Now it's ready to use :)

Themes

Notice the highlighted line above (line 7), there are many themes you can use, in this blog I'm using the Default theme. You can find all available themes here.

How to use it?

Simply surround your code in a <pre> tag with a custom class:

PLACE YOUR CODE HERE

Notice the class attribute. "brush:html" says we're using the HTML syntax highlighter. Learn the different syntaxes you can use here. I guess what I'll be using most often is html, js, css, vb, and c. Simply replace the alias with the syntax of your choice. As long as it's supported, it's gonna look fine.

Demo (HTML, JS, CSS, VB, C):

HTML

Hello World


Javascript
function alertMsg(){
window.alert("Hello world!");
}

CSS
body {
background: #000000;
font-size: 12px;
position: absolute;
}

Visual Basic
Public Module mod
Sub Main()
Console.WriteLine ("Hello world!")
End Sub
End Module

C
#include 
int main()
{
printf("Hello, World!");
return 0;
}

Looks nice. :)

Finally

While it's definitely a neat way to display code on Blogger, it's not a convenient solution.

First, you have to insert the pre markup using the HTML editor instead of the Compose editor. That alone makes it troublesome, but heck inserting any type of code makes the HTML view mandatory so it can't be helped. Second, if you notice, it doesn't follow any indentation. That's a big deal for some because it takes away some readability. Lastly, all the javascript resources we included on the head of our template will definitely eat loading time. So if you're concerned with that, one way to reduce it (albeit marginally) is to remove any syntax you won't be using on your site, 'cos what's the point right.

Anyway, I guess Blogger just really isn't a friendly place for coding blogs like these. I could imagine this being super easy on Wordpress, but well, here we are! :D I'm still hoping for a better solution, something that will allow me to insert a code snippet via the Compose view, with all the fanciness of a syntax highlighter. Wait is there one already? LET ME KNOW.
Share:

CSS Horizontal drop-down menu

Here's how you can create a horizontal navigation bar with drop-down feature using CSS. The limitation of this code is that it can only handle 1 level of sub menu. So if you intend you create more levels, you have to add to the code.

See jsfiddle here


CSS properties will vary depending on your existing layout and styles, but basically the horizontal drop-down menu works by converting an unordered vertical list into a horizontal one, and hiding any sub list from sight until the parent is hovered by the mouse.
Share: