Dreamteam: Selenium WebDriver and FitNesse

This year’s fantastic Hackathon at immobilenscout24.de in Berlin, offered me a productive environment (Club-Mate, pizza and really nice talks to really smart people) to dive deeper in the wiring of Selenium and FitNesse. And here we go:
Prerequisites
Read this article to find an overview of testing-frameworks and their use for acceptance testing.
Read Specification by Example, as FitNesse is a cool tool for that approach.
Read my guide to setup Selenium.
Read my guide to setup FitNesse.
Prologue
My primary goal, that I want to accomplish with any acceptance-test-framework: I want the non-programmers (managers, product owner, …) to understand which tests are implemented for their web-application yet – and which tests are still missing. I want to be sure, that the tests I (as a test-automater) have in my mind, really meet the requirements. The responsibles for the business-logic of a web-application should be able to check that at a glance. Additionally I like to give them a tool to easily change/enhance the test-data and simply push a test-button to get immediate feedback from their web-application (or its staging page). And yes, I’m really talking about automated functional tests with Selenium WebDriver.
Concrete
I’m presenting a really simple example to just show one possible wiring between Selenium and Fitnesse (without using Page Object-Pattern and just running Selenium locally).
In the specification we have everything lovely included: descriptive text, nice pictures/drafts of your feature and you have a button that executes the specifiation of that feature = the feature-test:
wiki-page
This pretty specification was created with that piece of code:

!*< [configurations]
!define TEST_SYSTEM {slim}
!path C:\Users\IT Kosmopolit\Dropbox\IT Kosmopolit\Blogging\Fitnesse
!path C:\Users\IT Kosmopolit\Dropbox\IT Kosmopolit\Blogging\Fitnesse\selenium-server-2.28.0\selenium-2.28.0\selenium-server-standalone-2.28.0.jar
|import|
|de.itkosmopolit.fixtures|
*!
Test if the page title is displayed correct (case-sensitive), after search for "Cheese!"
!img http://www.public-domain-image.com/cache/food-and-drink-public-domain-images-pictures/cheese-public-domain-images-pictures/port-salut-cheese_w128.jpg
|Test Google page title|
|textInTitle|isTitleCorrect?|
|Google|yes|
|google|no|
|bing|no|

With !*< [configurations] I start an invisible block.
With !define TEST_SYSTEM I select the engine.
With !path I define a classpath.
|import| works like an import statement
Simple text doesn’t need any mark-up – just write it down.
!img brings us an image to the wiki-page.
And with |something| you start a table.
To dive deeper into the subject: In the TwoMinuteExample you find general information about the decision table, a main concept in FitNesse. In the MarkupLanguagReference you find more information about the markup I’ve used in the wiki-page:
If you like to have this nice specification on your computer, too:
1.) execute „localhost“ in the address-bar (be sure to have set up FitNesse on your computer)
2.) push the Add-button
3.) select Test page
4.) write GoogleBasicTest for the Page name
5.) delete the default in the code box (!contents -R2 -g -p -f -h)
6.) copy&paste the above code in the code box
7.) click save
You can find your page under: http://localhost/GoogleBasicTest now.
Note: Be sure to name your future wiki-pages as WikiWords.
Now you have a cool specification, but it’s not doing anything valuable, if you push the Test-button. FitNesse uses so-called fixtures to wire a wiki-page with the Application Under Test. I appreciate the decision table as a plain, clear, noise-less way of defining all the scenarios of a feature (*waving at Gherkin*) – so find the appropriate description here. Note: Every row in the decision table represents one scenario.
Go to the folder in which your fitnesse-standalone.jar resides. Create there the folder-structure: de\itkosmopolit\fixtures, open an editor, copy&paste the following code in it and save it with the name TestGooglePageTitle.java (compare this name with the title of our decision table!)

package de.itkosmopolit.fixtures;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import java.util.List;
public class TestGooglePageTitle {
  private String text;
  private String pageTitle;
  public void table(List
&amp;lt;list&amp;lt;string&amp;gt;&amp;amp;gt; table) throws InterruptedException{
		// Create a new instance of the html unit driver
        // Notice that the remainder of the code relies on the interface,
        // not the implementation.
        WebDriver driver = new FirefoxDriver();
        // And now use this to visit Google
        driver.get("http://www.google.com");
        // Find the text input element by its name
        WebElement element = driver.findElement(By.name("q"));
        // Enter something to search for
        element.sendKeys("Cheese!");
        // Now submit the form. WebDriver will find the form for us from the element
        element.submit();
        // Check the title of the page
        pageTitle = driver.getTitle();
		driver.quit();
		Thread.sleep(500);
  }
  public void setTextInTitle(String text) {this.text = text;}
  public String isTitleCorrect() {
		if (pageTitle.contains(text)) return "yes";
		else return "no";
  }
}

Note:
1.) Putting the Selenium code in the table-method feels a bit … hack-y, but … it works.
2.) Because of black magic, you need a Thread.sleep() – otherwise while executing you’d get the wrong(!) error-message: „Testing was interupted and results are incomplete.“
Then compile it, e.g. with your Command Prompt: (being in the folder where fitnesse-standalone.jar resides) javac -classpath "pathToSeleniumJAR\selenium-server-standalone-x.y.z.jar" de\itkosmopolit\fixtures\TestGooglePageTitle.java
And after pushing the test button you find this result:
success_of_fitnesse
The results are beautiful and I’m quite confident, that Selenium WebDriver & FitNesse are becoming a new dreamteam in the future. Anyhow consider, that I haven’t seen this aproach running on large projects yet – there may be some challenges …

</list

Installing FitNesse on Windows

FitNesse is a promising test tool, implementing the Specification by example-approach.
Installing it on Windows works like a charm:
1.) Download the latest .jar from the download-page
2.) Be sure to have java on your computer and to have java.exe available in your PATH-variable (if you need an instruction look here).
3.) Open your Command Prompt and navigate in the folder where the downloaded fitnesse-standalone.jar resides.
4.) Execute java -jar fitnesse-standalone.jar in the Command Prompt – if everythings ok, you find written something like this:
Image 051 and you find a new folder named FitNesseRoot. Keep the Command Prompt opened.
5.) Open your browser and type „localhost“ in the address bar. You should see now something similar to this:
fitnesse_welcome
Note: As FitNesse is a (web) server, you have to restart it every time when you restart your computer. (=redo step 4. and 5).

Getting started with Selenium WebDriver in Java (Windows)

[renewed at 5 Dec 2018]
IMHO Java is the most popular programming language in the Selenium project, which means, that whenever you face a Selenium problem, the probability of finding the solution in Java is the highest. So start using Selenium in Java!
 
There are generelly 3 approches to get started with Selenium in Java:
Maven
The official one: Setting Up a Selenium-WebDriver Project
The sophisticated one (by Mark Collin, aka Ardesco): Selenium-Maven-Template
IDE
The official one: The 5 Minute Getting Started Guide Note: Here you find an example with HtmlUnitDriver. I experienced too often, that HtmlUnitDriver wasn’t working even with correct Selenium code, so I recommand not using it at all.
Without IDE, without Maven
This approach takes the most time but is the most back-to-the-roots one and shows best how Java works under the hood.
 

Approach without IDE, without Maven

Some backgrounds to Java
This paragraph is only a little refreshment for your aged Java knowledge. If you never had Java knowledge, you should go for a tutorial.
If you haven’t done yet, download the Java JDK from the download page (take the most actual Java Platform (JDK)). Execute it and follow the wizard. After that, set PATH.
The Java JDK not only comprises the JRE (jre.exe) – the JRE is the environment to run java-programs – but also the Java Compiler (javac.exe). The Compiler is necessary, because you have to compile the file of your source-code (yourname.java) to become an executable file. The result of that compilation is yourname.class. The program then can be executed by java yourname in your Command Prompt (after you navigated in the directory, where the yourname.class resides).
 
Selenium Setup
Download Selenium Standalone Server and put it e.g. on your desktop.
Selenium on Chrome works pretty out of the box: Download ChromeDriver, unzip it to e.g. the desktop and just run it.
If you want to run your tests on Internet Explorer, you need more time for configuration: look
 
Your first Selenium program
1.) Copy the following code in an editor and save it as Example.java e.g. on your Desktop:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class Example  {
    public static void main(String[] args) {
        // Create a new instance of the Chrome driver
        // Notice that the remainder of the code relies on the interface,
        // not the implementation.
        WebDriver driver = new ChromeDriver();
        // And now use this to visit Google
        driver.get("http://www.google.com");
        // Find the text input element by its name
        WebElement element = driver.findElement(By.name("q"));
        // Enter something to search for
        element.sendKeys("Cheese!");
        // Now submit the form. WebDriver will find the form for us from the element
        element.submit();
        // Check the title of the page
        System.out.println("Page title is: " + driver.getTitle());
    }
}

2.) As every Java program, it needs to be compiled. For the Java Compiler to find your Selenium library, you have to provide it in the so-called classpath. Execute the following in your Command Prompt (of course with the correct version number):

javac -classpath "%UserProfile%\Desktop\selenium-server-standalone-3.141.59.jar" %UserProfile%\Desktop\Example.java

3.) If everything is ok, you find Example.class on your desktop. Execute the following in your Command Prompt to run your first Selenium program (of course with the correct version number):

cd "%UserProfile%\Desktop

java -classpath .;"%UserProfile%\Desktop\selenium-server-standalone-3.141.59.jar" Example
… for historical reasons the JRE needs to point also to the actual folder, that is .;
 
Now Chrome should write „Cheese!“ in google search and finally you should find in the Command Prompt: „Page title is: Google“. The browser-window is not closing, as you might admire the results for some time!