Ben Simms

Step 2: Using the Selenium factory

Feel free to clone the example here:

git clone https://[email protected]/zerosimms/sense.git

Switch to the branch: WebDriver-Factory

Selenium Factory

Selenium has a factory which can be used in your automated framework to make your life that little bit easier. A great benefit, on-top of it’s ease to setup is that it eliminates Stale objects forming. That is, an object that has lost it identity.

Stale objects can happen when bouncing around web pages using navigation, when you return the elements don’t always have the same ID that Selenium originally assigned to them so it can no longer find them and Bang!! Your script fails! So, the factory can take care of that for you.

The factory also handles lazy objects, this will save your script from bombing out if it can’t find an element because it only instantiates the object when you call it. It can also help keep your scripts just that bit smaller as you don’t need to instantiate your elements.

So how do you use the factory?
In your Page Object class, fairly simply. Add the annotation:

@FindBy(id"element id")
private WebElement myElementID

If your using IntelliJ you can Alt + Enter on the annotation and import or just add:

import org.openqa.selenium.support.FindBy;

 

Your page class should then look something like this:
Screen Shot 2014-09-20 at 20.26.48

That’s its, you now can use the element in your methods with the comfort of knowing that it will never become stale.
It is a slightly different way of thinking but it does speed up creating scripts especially for small scale projects.

Just to add, though my screen shot uses Xpath, you can use all the standard Selenium search methods ID, CSS, CLASSNAME etc

Step 1: How to get selenium up and running in under 10 mins!

Feel free to clone the example here:

git clone https://[email protected]/zerosimms/sense.git

Switch to the branch: WebDriver

Selenium

Hopefully your reading this post because you know what Selenium is about, so I’ll just carry on:)

I wanted to show and help others learn how to get an automation framework of the ground by starting from the beginning. It’s also good practice for me to document what I know because Frameworks on an enterprise level quickly become massive mazes!

So, from the beginning, fresh start with the absolute minimal code and working examples along the way!

The first stage, getting Selenium running!

To begin with, all my examples will be done in IntelliJ.

There are a number of reasons why but the biggest reason comes later, when we introduce Cucumber. Out of the box IntelliJ has better support for this and hell, they have a free version (which I am using) so why the Devil not?

 

The Code

I always create a new Maven project so that I can take advantage of the POM, using a POM is the easiest way to manage and update your dependencies. The very first one being Selenium itself :)

Add selenium as a dependency to your project.

<dependencies>
      <dependency>
         <groupId>org.seleniumhq.selenium</groupId>
         <artifactId>selenium-java</artifactId>
         <version>2.42.2</version>
      </dependency>
</dependencies>

Now, create a class and add the following to get you started:

public class ExampleTest {
   public static void main(String[] args) throws InterruptedException {
      WebDriver senseDriver = new FirefoxDriver();
      WebDriverWait wait = new WebDriverWait(senseDriver, 10);
 
      senseDriver.get("http://www.google.com");
      WebElement feelingLuckyButton = wait.until(ExpectedConditions.elementToBeClickable(By.id("gbqfbb")));
      feelingLuckyButton.click();
      senseDriver.quit();
   }
}

Right click on your class and select Run:

Screen Shot 2014-09-20 at 21.07.21

That’s it, Selenium in under 10 minuets running!

The tiny test launches Firefox, heads to Google and then clicks the ‘Feeling Lucky’ button.

 

 

ASCII Visualiser

AsciiVisualiser1 AsciiVisualiser

The Plan

In an attempt to make a fake QR visualiser I started thinking if I could export the pixels as 0’s and 1’s to generate a unique URL So naturally I started thinking about a way to generate this output. My thought was to convert the image to black and white, make the blacks 1 and whites 0 which is what I did.

At which point the output of the video was an image vaguely visible and at which point I though ASCII art! So the plan changed slightly to make a poor mans ASCII art visualier!

The Result

I thought the output looked good, but if you compared it with a real ASCII art image you would notice straight away the lack of varying characters in my images and that was true because I simply converted the pixel colours either ‘255’ or ‘o’ to a”#” and “.@.”. I could have, if I was serious about taking this to the next level (which I wasn’t) start thinking about ways to add extra details. But anyhow, it worked fine the way it was and the result were good enough for my liking.

It can be hard to see the image, so squinting the eyes helps!

The Instructions

  • Spacebar to capture frames
  • Q to export your gif animation

The Download

mac

 

The Code

import processing.video.*;
 
int cameraScale = 9;
int columns;
int rows;
Capture camera;
 
void setup() {
  size(288, 280);
  columns = width/cameraScale;
  rows = height/cameraScale+1;
  camera = new Capture(this, columns, rows, 30);
   selectFolder("Export Location:", "folderSelected");
}
 
void draw() {
 
  camera.start();
  background(255);
  if (camera.available()) {
    camera.read();
  }
  camera.loadPixels();
  camera.filter(THRESHOLD, 0.5);
 
  for (int column = 0; column < columns; column++) {
    for (int row = 0; row < rows; row++) {
      int x = column*cameraScale;
      int y = row*cameraScale;
      float r = red(camera.pixels[column + row*camera.width]);
      float g = green(camera.pixels[column + row*camera.width]);
      float b = blue(camera.pixels[column + row*camera.width]);
      noStroke();
 
      if (r <=120 && g <=120 && b<=120) {
        text(".@.", x, y);
        fill(0);
      } else  if (r >120 && g>120 && b>120) {
        text(" # ", x, y);
        fill(0);
      }
    }
  }
}
 
void keyPressed() {
  if (key == ' ') {
    saveImage();
  }
  if (key == 'q') {
    createAnimation();
  }
}

Virtual Boy Visualiser

The Plan

VirtualBoyMe  VirtualBoyMe

Thinking of my next tinker with video capture I remembered the work I had done with image comparison and wondered what would happen if I used live video feeds instead of images. The results were quiet interesting and I just so happened to choose red as my colour to define the changing pixels which reminded me a-lot of the Virtual Gameboy which seemed a bit weird seeing as my last project was recreating images as if they were from a Gameboy so I decided to run with it.

The Result

I was really happy with the result, it wasn’t as clear cut or defined as the Virtual boy, but the effect is very similar. I think for my next project I may try and recreate the SNES look… Seeing as though a theme is forming!

The Instructions

  • Spacebar to capture frames
  • Q to export your gif animation

The Download

mac

The Code

import processing.video.*;
 
PImage imageOne;
PImage imageTwo;
 
Capture camera;
int pixelYPosition;
int pixelXPosition;
 
public void setup() {
  saveFrame("imageOne.jpg");
  saveFrame("imageTwo.jpg");
  size (288, 288);
 
  imageOne = new PImage(width, height);
  imageTwo = new PImage(width, height);
  camera = new Capture(this, width, height, 30);
  camera.start();
  selectFolder("Export Location:", "folderSelected");
}
 
public void draw() {
  loadPixels();
 
  if (camera.available()) {
    camera.read();
    camera.filter(THRESHOLD, 0.3);
    image(camera, 0, 0);
    saveFrame("imageOne.jpg");
    saveFrame("imageTwo.jpg");
  }
 
  loadPixels();
  imageOne = loadImage("imageOne.jpg");
  imageOne.loadPixels();
 
  for (pixelYPosition = 0; pixelYPosition < imageOne.height; pixelYPosition++) {
    for (pixelXPosition = 0; pixelXPosition < imageOne.width; pixelXPosition++) {
      //
      int loc = pixelXPosition + pixelYPosition * imageOne.width;
      int loc1 = pixelXPosition + pixelYPosition * imageTwo.width;
      //
      float r = red(imageOne.pixels[loc]);
      float g = green(imageOne.pixels[loc]);
      float b = blue(imageOne.pixels[loc]);
      //
      float r1 = red(imageTwo.pixels[loc1]);
      float g1 = red(imageTwo.pixels[loc1]);
      float b1 = red(imageTwo.pixels[loc1]);
      if (r==r1 && g == g1 && b == b1) {
        r = 155;
        g = 0;
        b = 0;
      } else {
        r = 0;
        g = 0;
        b = 0;
      }
      pixels[loc] = color(r, g, b);
    }
  }
  updatePixels();
}

 

 

Gif Animation For Java

I spent a lot of time trying to find a nice light weight library for Java capable of exporting an animated Gif, so I wanted to share this with others who may find it useful.

I have to provide the Jar from my web site because I cannot for the life of me hunt down the original source, I by no means make claims to this Jar and if anyone out there recognizes it, let me know so I can give full credit.
Original author and full documentation here

Most of my work is done with Processing thus the example code below would be placed in a new tab inside the Processing IDE. Copy the code  into a new tab:

The Code

import gifAnimation.GifMaker;
 
PImage img;
String saveLocation;
int currentFrame = 0;
 
//Gif Animation Options
int playbackSpeed = 250;
int loopAnimation = 0;
int exportQaulity = 100;
String fileExportName = "GameBoyMe";
 
void folderSelected(File selection) {
  if (selection == null) {
    saveLocation = selection.getAbsolutePath();
    println("Default location selected");
  } else {
    saveLocation = selection.getAbsolutePath();
    println(saveLocation);
  }
}
 
//Save a shot of the current screen and increase the frame count.
void saveImage() {
  String frame = "frames/frame" + currentFrame + ".gif";
  saveFrame(frame);
  currentFrame ++;
}
 
//Loop through all our frames and add them to the gif.
void createAnimation() {
  GifMaker gifExport = new GifMaker (this, saveLocation + "/" + fileExportName + ".gif", exportQaulity);
  int framesCount = 0;
  gifExport.setRepeat(loopAnimation);
 
  while (framesCount < currentFrame ) {
    img = loadImage("frames/frame" + framesCount + ".gif");
    gifExport.addFrame(img);
    gifExport.setDelay(playbackSpeed);
    framesCount ++;
  }
  gifExport.finish();
  println("Animation Exported " + saveLocation);
}
 
//Keys for taking the frames and exporting the gif.
void keyPressed() {
  if (key == ' ') {
    saveImage();
  }
  if (key == 'q' || key == 'Q') {  
    createAnimation();
  }
}

 

Dont forget to add the below into your main tab so that we know where to export the Gif.

selectFolder("Export Location:", "folderSelected");

 

Now all you need to do is add the Gif Jar to your project by dragging the below file into Processing

The Jar File

That should be it, ready to run!

I’ve tried to make everything I can remember that’s configurable obvious by placing it at the top of my subclass

The Gameboy Effect

image fuckInstagram2 fuckInstagram1 fuckInstagram

 

 

 

I’ve always liked chunky pixels and “retro” gaming and while I’m taking a step away from games for a bit I wanted to do something with the gaming theme.

I was keen to develop a number of camera applications for a project I have in mind later down the line and thus I wanted to do something with the camera and gaming theme, what I thought of was an attempt at emulating the Gameboy camera!

The Plan

The idea as per, was simple. Use a web camera to oversize the pixels, colour them to look like a Gameboy screen and export an image. To do this I would:

  • Get the web camera running in a squared format
  • Use the Capture class to give me access to the pixel information
  • Create a loop to read the data for every pixel
  • Scale the pixels to a nice large size
  • Use THRESHOLD filter and leave it at it’s default settings so the image is converted to black and white
  • Convert the black and white colours for every pixel to my Gameboy esq colours
  • Allow the user to export image

The Result

Again, I was really happy with the result and it was fairly easy to achieve. Though I was happy with the Gameboy colours, I did some images using different colours that I felt were more “alive”.  Something for me to think about later.

Download the app here (press ‘s’ to export the current frame), or try it yourself using the code below.

windows mac

The Code

import processing.video.*;
 
int cameraScale = 6;
int columns;
int rows;
Capture camera;
 
void setup() {
  size(288, 288);
  columns = width/cameraScale;
  rows = height/cameraScale;
  camera = new Capture(this, columns, rows, 30);
}
 
void draw() {
  camera.start();
  if (camera.available()) {
    camera.read();
  }
  camera.loadPixels();
  camera.filter(THRESHOLD);
 
  for (int column = 0; column < columns; column++) {
    for (int row = 0; row < rows; row++) {
      int x = column*cameraScale;
      int y = row*cameraScale;
      float r = red(camera.pixels[column + row*camera.width]);
      float g = green(camera.pixels[column + row*camera.width]);
      float b = blue(camera.pixels[column + row*camera.width]);
      noStroke();
      //Fill white pixels black, for background.
      if (r == 255 && g==255 && b ==255) {
        r=96;
        g=109;
        b=11;
 
        //Fill white pixels to selected colour
      } else if (r == 0 && g==0 && b ==0) {
        r=0;
        g=40;
        b=0;
      }
      fill(r, g, b);
      rect(x, y, cameraScale, cameraScale);
    }
  }
  updatePixels();
}
 
void keyPressed() {
  if (key == 's' || key =='S') {
    saveFrame("image.gif");
  }
}

 

Retro Alien Font

Videos shows an updated version that continuously updates without keyboard interaction.

The other day while watching a film I noticed a pseudo font scrolling on a monitor in the background and it got me thinking… I wonder how hard it would be to make something similar.

My idea was pretty simple, create a “grid” with a number of pixels that would flick state and hopefully create a false looking font something similar to poor-mans hieroglyphics.

Using Processing I created a fairly small script that creates one grid of patterns and every-time a key is pressed generates another grid next to the previous, the outcome of which can be seen in these screenshots:

Screen Shot 2014-08-13 at 19.40.51 Screen Shot 2014-08-13 at 19.04.20

 

I included a few options, you could change the colour by pressing 1,2 or 3. You could clear the slate by pressing 0.

I was rather happy with the outcome, see what you think by giving the app a whirl or by doing it yourself…

Download

mac windows

 

 

 

Source Code

If you want to do the same, copy this code into Processing:

int nextXPos=0;
int nextYPos=0;
int padding = 30;
int backgroundColour = 0;
int fontR = 25;
int fontG = 95;
int fontB = 190;
boolean stroke = false;
 
void setup() {
  // size(762, 582);
  noStroke();
  size(1024, 768);
  background(backgroundColour);
}
 
void createCube() {
  if (nextXPos < width - padding) {
    cube(nextXPos, nextYPos);
    nextXPos = nextXPos + 30  + padding;
  } else if (nextXPos >= width - padding) {
    nextXPos = 0;
    nextYPos = nextYPos + 30 + padding;
  }
  if (nextYPos > height){
   nextYPos = 0; 
  }
}
 
void draw() {
}
 
void keyPressed() {
  createCube();
  if (key == '0') {
    background(0);
    nextXPos=0;
    nextYPos=0;
  }
  if (key == '1') {
    fontR = 25;
    fontG = 95;
    fontB = 190;
  }
  if (key == '2') {
    fontR = 190;
    fontG = 95;
    fontB = 25;
  }
  if (key == '3') {
    fontR = 95;
    fontG = 190;
    fontB = 25;
  }
}

Then create a new tab called ‘Cube’ and copy this code:

void cube(int x, int y) {
  int cubeSize = 10;
 
  //Top Layer
  pickColour();
  rect(x, y, cubeSize, cubeSize);
  pickColour();
  rect(x+10, y, cubeSize, cubeSize);
  pickColour();
  rect(x+20, y, cubeSize, cubeSize);
  pickColour();
  rect(x+30, y, cubeSize, cubeSize);
 
  //Second Layer
  pickColour();
  rect(x, y+10, cubeSize, cubeSize);
  pickColour();
  rect(x+10, y+10, cubeSize, cubeSize);
  pickColour();
  rect(x+20, y+10, cubeSize, cubeSize);
  pickColour();
  rect(x+30, y+10, cubeSize, cubeSize);
 
  //Third Layer
  pickColour();
  rect(x, y+20, cubeSize, cubeSize);
  pickColour();
  rect(x+10, y+20, cubeSize, cubeSize);
  pickColour();
  rect(x+20, y+20, cubeSize, cubeSize);
  pickColour();
  rect(x+30, y+20, cubeSize, cubeSize);
 
  //Fourth Layer
  pickColour();
  rect(x, y+30, cubeSize, cubeSize);
  pickColour();
  rect(x+10, y+30, cubeSize, cubeSize);
  pickColour();
  rect(x+20, y+30, cubeSize, cubeSize);
  pickColour();
  rect(x+30, y+30, cubeSize, cubeSize);
}
 
void pickColour() {
  float randomColour = random(0, 1);
  int colour = round(randomColour);
 
  if (colour == 0) {
    fill(backgroundColour);
  } else if (colour ==1) {
    fill(fontR, fontG, fontB);
  }
}

Comparing Two Images And Finding The Differences In Java

After a passing comment about comparing two images by “eyeballing”, I wondered if I could create a little application to do the task in an automated fashion, in Java of course.

I had used the PImage class before and I knew it was capable of reading the values of every pixel in a given image so that was my first stop.

I decided to use the weather icons from the BBC website as they share the same dimensions (very important) and some common pixels values.

The reason the dimensions were so important is that I actually re-draw the image intercepting the differences, and if the dimensions of both images did not match exactly then the script would fail (minor detail for this purpose :) )

1  3

 

The Plan

So, below you can see what I came up with, I’ll quickly walk through it (if only so I have it tracked somewhere)

  • I start by providing the location of the two images, these images could also be local.
  • Then I created an instant of Pimage for both images.
  • I set the size of the frame to the first image width, if the frame size does not match the image then it breaks the redraw process.
  • After this I created a loop and got each RED, GREEN and BLUE value of each pixel from the current location of both images.
  • If the values collected did not match, then I convert them to red so that they were highlighted

This was the outcome of comparing both the above images

The Result

Screen Shot 2014-08-05 at 17.44.48

 

You can clearly see the difference in red, pretty cool!

Give it a whirl yourself by copying the below code into Processing and hitting ‘Run’.

 

String imageOneUrl = "http://static.bbci.co.uk/weather/0.5.284/images/icons/individual_56_icons/en_on_light_bg/3.gif";
String imageTwoUrl = "http://static.bbci.co.uk/weather/0.5.284/images/icons/individual_56_icons/en_on_light_bg/1.gif";
 
PImage imageOne;
PImage imageTwo;
int pixelYPosition;
int pixelXPosition;
 
public void setup() {
  imageOne = loadImage(imageOneUrl, "png");
  imageTwo = loadImage(imageTwoUrl, "png");
  size(imageOne.width, imageOne.height);
}
 
public void draw() {
  loadPixels();
  imageOne.loadPixels();
  imageTwo.loadPixels();
 
  for (pixelYPosition = 0; pixelYPosition < imageOne.height; pixelYPosition++) {
    for (pixelXPosition = 0; pixelXPosition < imageOne.width; pixelXPosition++) {
 
      int loc = pixelXPosition + pixelYPosition * imageOne.width;
      int loc1 = pixelXPosition + pixelYPosition * imageTwo.width;
 
      float r = red(imageOne.pixels[loc]);
      float g = green(imageOne.pixels[loc]);
      float b = blue(imageOne.pixels[loc]);
 
      float r1 = red(imageTwo.pixels[loc1]);
      float r2 = red(imageTwo.pixels[loc1]);
      float r3 = red(imageTwo.pixels[loc1]);
 
      if (!(r == r1) && (!(g == r2) && (!(b == r3)))) {
        r = 255;
        g = 0;
        b = 0;
      }
 
      pixels[loc] = color(r, g, b);
    }
  }
  updatePixels();
}

 

« Older posts

Copyright © 2014 Ben Simms

Theme by Anders NorenUp ↑