We might experience some locator issues during the transition from Selenium 1 to Selenium WebDriver. We face these issues because Selenium WebDriver stays strict to the CSS standard. It might that :contains(‘text’) does not locate the web page elements anymore. The solution is to inject the Sizzle engine into the browser under test. We can make a SizzleSelector class and use the power of Sizzle selector where necessary.

Getting ready

We have to extend our project with the SizzleSelector class.

How to do it…

This is the code of the SizzleSelector class. It injects the Sizzle engine into the browser under test by JavaScript.

import java.util.List;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebDriverException;
import org.openqa.selenium.WebElement;

@SuppressWarnings("unchecked")
public class SizzleSelector {
	private JavascriptExecutor driver;

	public SizzleSelector(WebDriver webDriver) {
		driver = (JavascriptExecutor) webDriver;
	}

	public WebElement findElementBySizzleCss(String using) {
		injectSizzleIfNeeded();
		String javascriptExpression = createSizzleSelectorExpression(using);
		List<WebElement> elements = (List<WebElement>) driver
				.executeScript(javascriptExpression);
		if (elements.size() > 0)
			return elements.get(0);
		return null;
	}

	public List<WebElement> findElementsBySizzleCss(String using) {
		injectSizzleIfNeeded();
		String javascriptExpression = createSizzleSelectorExpression(using);
		return (List<WebElement>) driver.executeScript(javascriptExpression);
	}

	private String createSizzleSelectorExpression(String using) {
		return "return Sizzle(\"" + using + "\")";
	}

	private void injectSizzleIfNeeded() {
		if (!sizzleLoaded())
			injectSizzle();
	}

	public Boolean sizzleLoaded() {
		Boolean loaded;
		try {
			loaded = (Boolean) driver.executeScript("return Sizzle()!=null");
		} catch (WebDriverException e) {
			loaded = false;
		}
		return loaded;
	}

	public void injectSizzle() {
		driver.executeScript(" var headID = document.getElementsByTagName(\"head\")[0];"
				+ "var newScript = document.createElement('script');"
				+ "newScript.type = 'text/javascript';"
				+ "newScript.src = 'https://raw.github.com/jquery/sizzle/master/sizzle.js';"
				+ "headID.appendChild(newScript);");
	}
}

How it works…

The class described above will inject the Sizzle engine into the browser under test. This allows us to use all the Sizzle selector features, such as :contains(‘text’). Other classes can extended this class and we are able to use the findElementBySizzleCss() method to locate the elements.

Related Posts via Categories

• Creating an object repository for Selenium WebDriver
• Creating an UI-map for Selenium IDE