Testing Web Pages

With Selenium

Philip H. Schlesinger

Introducing PICS

PICS simplifies the

prequalification process. We help companies to create a safe

and sustainable prequalification

program for your contractors,

vendors and suppliers using a

simple, online interface.

PICS Technology Stack

Cobertura

About Me

• Since October 2012: Software Development

Manager for back-end Java Developers

What’s Selenium

Open-source

browser automation

framework

Why Not Just Unit Test?

Supported Browsers

12.0.712.0+

3+

7+

2+ 8+

Supported Operating Systems

Supported Programming Languages

Supported Testing Frameworks

(3rd party)

Selenium Methodology

Let’s Get Started!

Selenium IDE 101

Using Struts2 Archetype In IntelliJ 12

Simple Form Input Verification

Welcome Testers

Verify Searching For A Name

Returns Some Expected Results

Not As Easy As It Sounds

Welcome BankRate.com Testers

Verify The Loan Calculator

Returns Valid Calculations

For Several Different Scenarios

Will Require Additional Coding

Another Use For Selenium

Automating Interfaces:

Filling In Forms With Same Data Over And Over

Penetration Testing:

Filling In Forms With Different Data Over And Over

Hitting URLs With Different Data Over And Over

Questions?

Philip H. Schlesinger

1.949.936.4508

pschlesinger@picsauditing.com

@PhilSchlesinger

http://tipsfromphil.tumblr.com/

http://www.linkedin.com/in/philiphschlesinger

We’re Hiring!

Our Blog:

http://tech.picsauditing.com/

Currently Open Positions:

• Java Architect

• Front-End Architect

• QA Engineer (SDET)

Apply Directly Here (JobVite Link):

http://tinyurl.com/hiremeplz

Addendum

How To Replicate The Examples

Setting Up The Basic Struts2 Web Form

In IntelliJ 12:

1. New Project / Maven

2. Create from archetype / org.apache.struts:struts2-

archetype-starter

3. Correct problems in struts.xml

4. Configure for Tomcat and Run

5. Site will be at http://localhost:8080/index.action

Selenium IDE Firefox Plugin and Server JAR

Download from

http://docs.seleniumhq.org/download/

Encoding Hitting The Enter Key In Selenium

Command: keyPressAndWait

Target: id=q [depends on your form of course]

Value: \\13 [for enter - any ascii value can go here]

Source: http://stackoverflow.com/a/8186216

Code To Simulate A Mouse Hover

In the BankRate.com test, one must hover over the text “MORTGAGES” in order to be able to display its drop-down menu, where the link to the “Mortgage Calculator” is found. Here’s the code to simulate that mouse hover in Selenium. Use it immediately after the line driver.get(baseUrl + "/");

Actions action = new Actions(driver);

action.moveToElement(driver.findElement(By.linkT

ext("MORTGAGES"))).perform();

Capturing A Screenshot In Selenium Code

WebDriver driver = new FirefoxDriver();

driver.get("http://www.google.com/");

File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);

// Now you can do whatever you need to do with it, for example copy somewhere

FileUtils.copyFile(scrFile, new File("c:\\tmp\\screenshot.png"));

Source: http://stackoverflow.com/a/3423347

Maven Dependency Code

<dependency>

<groupId>org.seleniumhq.selenium</groupId>

<artifactId>selenium-java</artifactId>

<version>2.35.0</version>

</dependency>

…will do the basic job. To start the Selenium server as part of running your tests with Maven:

<dependency>

<groupId>org.seleniumhq.selenium</groupId>

<artifactId>selenium-server</artifactId>

<version>2.35.0</version>

</dependency>

Source: http://docs.seleniumhq.org/download/maven.jsp

For Verifying A Page’s “Look”

At the 2013-10-10 OCJUG presentation, someone asked if Selenium could test if a page actually ended up displaying exactly as expected – or if an image was shifted by a pixel or two.

At the time I said I wasn’t aware of a way to test a page’s “look” via Selenium, but then I received a tip:

1. Take a snapshot of the “correct look” of a page via Selenium code

2. Crop at (X,Y) for a certain size A by B 1. This is now your “correct” snapshot

3. Modify the Selenium code to: 1. Take a snapshot of the web page each test

2. Crop at (X,Y) for size A by B

3. Compare the “correct” snapshot that just-taken-and-cropped snapshot with file size, file hashes, via ImageMagick, or some other methodology

To Learn More About Creating A Selenium

Framework For Your Website

Google the following terms:

• Data Driven Testing (aka DDT) – Involves data mapping and canonical schema mapping between

DB and WebObjects, in this sense, it's also a part of Data Integrity Checking effort

• Component Modeling

• Domain Specific Language (or Layer) (aka DSL) – Component Model and DSL is a pure OOD (Object Oriented

Design) and that's the core engine to give you an action-command type script interface

… or just contact me