Notes on JQuery

Google Download JQuery
jquery.com

Select “Download the compressed, production jQuery 2.1.1” to go to code.jquery.com

Save this code into a file named ‘jquery.js’.


<head>
  <script src="jquery.js"></script>
</head>

Or use the ajax.googleapis.com via:


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

PUTTING IT TOGETHER
Create a file named index.html.


<html>
<head>
  <script src="jquery.js"></script>
  <script src="index.js"></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

In the same folder, add the jquery.js file downloaded above and add a new file index.js with the following code:


$(document).ready(function() {
  console.log('...Hello World');
});

Open index.html in Google Chrome. Right click the heading and select “Inspect Element”. Then, click on the Console tab. This will show the message from the index.js file. This prints “…Hello World” to the console when the page is ready.

FINDING ELEMENTS
See api.jquery.com for more details.


$(document).ready(function() {
  $('div.mydiv').addClass('classToAdd'); // <div class='mydiv classToAdd'>
  $('#myID > li').addClass('classToAdd'); // <div id='myID'><li class='classToAdd'>
  $('#myID li.myclass').addClass('classToAdd'); // <div id='myID'><li class='myclass classToAdd'>
  $('#myID li:not(.classToAdd)').addClass('classToAdd'); // <div id='myID'><li class='classToAdd'> // Adds the classToAdd class to any li tag contained within an element whose id is myID which does not currently have the classToAdd class
  $('a[href^="mailto:"]').addClass('mailto'); // <a href='mailto:scottizu@gmail.com'>e-mail me</a> // Adds the mailto class to any anchor whose href starts with "mailto"
  $('a[href$="pdf"]').addClass('pdflink'); // Ends with pdf
  $('a[href^="http"][href*="google"]').addClass('googleClass'); // <a href='http://www.google.com' class='googleClass'>www.google.com</a>

  $('tr:even').addClass('classToAdd');
  $('tr:nth-child(odd)').addClass('classToAdd');
  $('td:contains(Henry)').nextAll().andSelf().addClass('classToAdd');
  $('td:contains(Henry)').parent().children().addClass('classToAdd');
  $('li li li').addClass('classToAdd');
  $('tr').find('td:eq(2)').addClass('classToAdd');
  $('td:contains(Henry)').parent().first().addClass('classToAdd');
  $('li > a').siblings().addClass('classToAdd');
  $('a[href$="pdf"]').closest('ul').addClass('classToAdd');
}); // starts with http and contains google

Advertisements

Setting Capabilities to Use Selenium WebDriver for Mobile Testing

If you visit: http://www.i4info.info

and then: http://www.i4info.info/history

on your mobile phone, you will get a User Agent.

Anytime a mobile device make a request for a webpage, it sends the User Agent in the headers of the HttpGet, HttpPost request. This in turn lets the server know which page to serve. You may allow WebDriver to test the appropriate environment by setting the Capabilities for Selenium WebDriver appropriately. Here is a class that will help with handling the user agent and setting the appropriate capability for the browser you are testing with.


import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxProfile;
import org.openqa.selenium.remote.DesiredCapabilities;

public class UserAgentHandler {
	public void handle(String useragent) {
		if (useragent != null && !useragent.trim().isEmpty()) {
			handleFirefox(useragent);
			handleChrome(useragent);
			handlePhantom(useragent);
		}
	}

	private void handleFirefox(String useragent) {
		try {
			DesiredCapabilities dc = DesiredCapabilities.firefox();
			FirefoxProfile profile = new FirefoxProfile();
			profile.setPreference("general.useragent.override", useragent);
			dc.setCapability(FirefoxDriver.PROFILE, profile);
		} catch (Exception ex) {
			ex.printStackTrace();
		}
	}

	private void handleChrome(String useragent) {
		try {
			DesiredCapabilities dc = DesiredCapabilities.chrome();
			ChromeOptions chromeOptions = new ChromeOptions();
			chromeOptions.addArguments("--user-agent=" + useragent);
			dc.setCapability(ChromeOptions.CAPABILITY, chromeOptions);
		} catch (Exception ex) {
			ex.printStackTrace();
		}
	}

	private void handlePhantom(String useragent) {
		try {
			DesiredCapabilities dc = DesiredCapabilities.phantomjs();
			dc.setJavascriptEnabled(true);
			dc.setCapability("phantomjs.page.settings.userAgent", useragent);
		} catch (Exception ex) {
			ex.printStackTrace();
		}
	}
}

Run Javascript through a Firefox Bookmark to Highlight Components

Read <a href=’https://scottizu.wordpress.com/2014/10/31/executing-javascript-through-a-firefox-bookmark/’>Executing Javascript Through A Firefox Bookmark</a> to find out how to run javascript through a bookmark.

The modification from that page will allow you to store your BookmarkScript.js file in the root directory of Tomcat.  This is accessed in the Firefox Bookmark via:

http://localhost:8080/BookmarkScript.js

This code will highlight components whose id matches the string given. For instance, the following code will place an overlay on top of all div elements whose id starts with “abc_”.

This code needs to reside in the Root directory of your local Tomcat instance and be named as BookmarkScript.js.


// Print a message at the bottom of the page
err=function(e){
  s=e.description;
  if(!s){
    s=String(e);
  }
  d=document.createElement("div");
  d.innerHTML=s;
  d.style.color="red";
  document.body.appendChild(d);
  return d;
};
// Create an overlay above the placement
createOverlayDiv=function(e, zind){
  d=document.createElement("div");
  d.id=e.id+"_epo";
  d.name=e.name+"_epo";
  
  // Set style, width and height, top and left offset based off e
  d.style.cssText=e.style.cssText;
  d.style.width=e.clientWidth+"px";
  d.style.height=e.clientHeight+"px";
  d.style.top=e.offsetTop+"px";
  d.style.left=e.offsetLeft+"px";

  // Add extra overlay styling
  d.style.zIndex=zind;
  d.style.position="absolute";
  d.style.opacity = .5;
  d.style.display="block";
  d.style.textAlign="center";
  d.style.border="2px solid #A7A"; // Pink Outline
  d.style.background="#ADF"; // Blue Background
  
  // Set Minimum Width/Height and add text (undefined, auto, 0)
  w=e.clientWidth;
  if((!w)||((w!="auto")&&(w<150))){
	w=150;
	d.style.width="150px";
  }
  h=e.clientHeight;
  if((!h)||((h!="auto")&&(h<50))){
    h=50;
    d.style.height="50px";
  }
  d.innerHTML=d.id+"<br>"+w+" x "+h;
	
  return d;
}
// Highlights the placement by creating an overlay
highlighter=function(es, match){
  els=[];
  for(i=0;i<es.length;i++){
    e=es[i];
    if(e.id.indexOf(match)>-1){
      els.push(e);
    }
  }
  for(i=0;i<els.length;i++){
    e=els[i];
    d=createOverlayDiv(e, 10+i);
	e.parentNode.appendChild(d);
  }
};
err("Highlighter, Version 1.0");
err("Errors:");
err("").style.paddingTop="50px";
// Highlight Divs with Ids starting with abc_
try{
  highlighter(document.getElementsByTagName("div"), "abc_");
}catch(e){
  err(e);
}