jQuery Blog Posts

April 29, 2019

Y Position of an Element

Using jQuery, it's easy to find out exactly where an element is on the page. Simply use jQuery's position() function:

<script>
var p = $( "h2" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );
</script>

Using the Coordination plane terminology, the position "top" is the Y-axis and "left" is the X-axis.

By default the position() method returns the first instance of the element. The position is relative to the parent element.

Why is this Important for QA testing?

This would be useful if you need to verify an element is in a particular location on the page, for example, to make sure that the footer logo has enough headroom in the Div tag.

Why this Posting?

Today's A-Z challenge letter is 'Y.' This is not an easy topic, as there's really not many tools that begin with the letter 'Y' for jQuery and QA.

This will be the last post for jQuery for a while. On Monday's in May I'll switch back to focus on general QA topics.

April 22, 2019

Selector using JQuery

jQuery selector functionality is pretty powerful. You can select All, IDs, Names, etc. It's a good way to perform an action. There's a trick to use when you don't have an ID and the page content tree changes. You can use the jQuery Contains() selector.

This is useful when you want to click on a specific Anchor tag and using an XPath isn't going to help since the content may change. (Thus frequently failing automation runs)

Simple Example

<script>
$( "a:contains('Sign up')" ).click();
</script>

The only problem with the above is if you have multiple anchor tags with the same text. Simply add the following reference:

<script>
$( "a:contains('Sign up')" ).eq(0).click();
</script>

April 15, 2019

Map - Jquery

jQuery map() function is useful when you want to verify that a list (unordered, ordered) are in the right order. Simple create the jQuery object as a Map array and then join it.

Sample Data

<div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="Boston" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="Concord" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="Stow" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="Carlisle" name="number[]">
</div>

Your jQuery Action

$( ":checkbox" )
  .map(function() {
    return this.id;
  })
  .get()
  .join();

Your Results would be:

"Boston,Concord,Stow,Carlisle"

Javascript results:

 return $( ":checkbox" )
  .map(function() {
    return this.id;
  })
  .get()
  .join()
  .includes("Boston,Concord,Stow,Lowell")

April 8, 2019

Get Image Size (Using JQuery)

Sometimes the Quality Assurance team needs to get the size of an image that is rendered on a page. Usually, this is to validate that the rendered image meets the specifications.

This will show you what the image actually rendered on the page:

$imageCheck = "Height: " + $('#facebook').height() + " Width: " + $('#facebook').width() ;

If you want to know the actual physical dimensions of the image:

$NaturalCheck = "Natural Height: " + $('#facebook').naturalHeight() + " Natural Width: " + $('#facebook').naturalWidth() ;

Sample Output

Natural Height Check

April 1, 2019

Add Link Check - JQuery

There's a cool jQuery trick to check to see if all the hyperlinks on the current page are going to a certain URL. This is useful if you want a quick way to make sure that links are pointing to a Dev environment.

Enable jQuery

if the site isn't using jquery, you'll need to add it, if you don't know it doesn't hurt to run this as it won't break the site (Unless the site is using some bleeding edge jQuery code.)

Open up the Chrome Console and paste the following:

var script = document.createElement("script");
script.setAttribute("src", "[https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js](https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js)");
script.addEventListener('load', function() {
var script = document.createElement("script");
document.body.appendChild(script);
}, false);
document.body.appendChild(script);

You should get back the following:

<script src="[https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js](https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js)"></script>

Now run this:

$("a[href*='[company.com](http://company.com/)']").css("color", "orange");

This will highlight any link going to [company.com](http://company.com) to orange. You probably won't see any changes on your site, so change it to something reasonable.

If something did get changed, you should see how many links got changed:

init(213)