Selenium tests, the Object Oriented way.The workshop

Corina Pip

@imalittletester

https://iamalittletester.wordpress.com/

• Blog: https://iamalittletester.wordpress.com/

• Travel blog: https://travelwithcori.com/

• Photos: https://www.flickr.com/photos/capreoara

• Twitter: @imalittletester

@imalittletester

The task

- Navigate to https://iamalittletester.wordpress.com/

- Look at the ‘featured’ content section

- Test that the ‘featured’ content is the one from the image

below

- Do this task by using only ONE assert

Phase 1: Analysis

Phase 1: Analysis

• Structure of module:• 3 articles

• Each article:• 1 clickable image with link

• 3 assigned tags which are links

• 1 link to the post

• 3 articles

• Each article:• 1 clickable image with link

<article>

<a href=…>

<img width=… height=… src=… />

</a>

...

</article>

• Each article:• 3 assigned tags which are links

<article>

...

<a href=… rel="category tag"> Label </a>

<a href=… rel="category tag"> Label </a>

<a href=… rel="category tag"> Label </a>

...

</article>

• Each article:• 1 link to the post

<article>

...

<a href=… rel="bookmark"> Label </a>

</article>

• So, for each article:

<article><a href=…>

<img width=… height=… src=… /></a>

…<a href=… rel="category tag"> Label </a><a href=… rel="category tag"> Label </a><a href=… rel="category tag"> Label </a>

... <a href=… rel="bookmark"> Label </a>

</article>

Phase 2: Defining the objects

The featured content module

• Will be an object with 3 properties:• Featured content 1

• ClickableImage: href, width, height, src• TagSection

• Link1: href, label

• Link2: href, label

• Link3: href, label

• Link: href, label

• Featured content 2: same properties as first one

• Featured content 3: same properties as first one

Each object consists of

•Properties•Constructor for expected content•Constructor for actual content•equals() and hashCode() methods – for comparing objects•toString() method – to print object to the console

An image object: ClickableImage

•Will be named: ClickableImage

•Will be an object with 4 properties: href, src, width, height

•Will have two constructors

•Will have the additional methods: equals(), hashCode(), toString()

ClickableImage

• Will be an object with 4 properties: href, src, width, height

public class ClickableImage {

private String imageHref;

private String imageWidth;

private String imageHeight;

private String imageSource;

Generating constructors

- inside the class, click Alt + Ins:

- then, select all the displayed properties

ClickableImage – constructor for EXPECTED

public ClickableImage(String imageHref, String imageWidth, String

imageHeight, String imageSource) {

this.imageHref = imageHref;

this.imageWidth = imageWidth;

this.imageHeight = imageHeight;

this.imageSource = imageSource;

}

ClickableImage – constructor for ACTUAL

public ClickableImage(WebElement element) {

this.imageHref = element.getAttribute("href");

this.imageWidth =

element.findElement(By.cssSelector("img")).getAttribute("width");

this.imageHeight =

element.findElement(By.cssSelector("img")).getAttribute("height");

this.imageSource =

element.findElement(By.cssSelector("img")).getAttribute("src");

}

equals(), hashCode(), toString()

•Click Alt + Ins yet again

•Choose: equals() and hashCode()

•Click Alt + Ins yet again

•Choose: toString()

Link

• Each item in the tag section is an object of type Link

•A Link object has two properties: href, label

public class Link {

private String href;

private String label;

Link – constructor for EXPECTED

public Link(String href, String

label) {

this.href = href;

this.label = label;

}

Link - constructor for ACTUAL

public Link(WebElement element) {

this.href

= element.getAttribute("href

");

this.label = element.getText();

}

+ equals(), hashCode(), toString()

TagSection

•An Object with 3 properties of type Link

public class TagSection {

private Link tag1;

private Link tag2;

private Link tag3;

TagSection – constructor for EXPECTED

public TagSection(Link tag1, Link tag2, Link

tag3) {

this.tag1 = tag1;

this.tag2 = tag2;

this.tag3 = tag3;

}

+equals(), hashCode(), toString()

TagSection – constructor for ACTUAL

public TagSection(List<WebElement> elementList)

{

this.tag1 = new Link(elementList.get(0));

this.tag2 = new Link(elementList.get(1));

this.tag3 = new Link(elementList.get(2));

}

Article

•One of the 3 items of the featured content = Article

public class Article {

private ClickableImage

clickableImage;

private TagSection tagSection;

private Link postLink;

Article – constructor for EXPECTED

public Article(ClickableImage clickableImage,

TagSection tagSection, Link postLink) {

this.clickableImage = clickableImage;

this.tagSection = tagSection;

this.postLink = postLink;

}

Article - constructor for ACTUAL

public Article(WebElement imageElement,

List<WebElement> tagElementList, WebElement

postElement) {

this.clickableImage = new

ClickableImage(imageElement);

this.tagSection = new TagSection(tagElementList);

this.postLink = new Link(postElement);

}

Featured content section

• FeaturedContent Object – made up of three Article Objects

public class FeaturedContentSection {

private Article article1;

private Article article2;

private Article article3;

Featured content section - EXPECTED

public FeaturedContentSection(Article article1,

Article article2, Article article3) {

this.article1 = article1;

this.article2 = article2;

this.article3 = article3;

}

Featured content section - ACTUAL

public FeaturedContentSection(WebElement _1_imageElement, List<WebElement>

_1_tagElementList, WebElement _1_postElement,

WebElement _2_imageElement, List<WebElement>

_2_tagElementList, WebElement _2_postElement,

WebElement _3_imageElement, List<WebElement>

_3_tagElementList, WebElement _3_postElement) {

this.article1 = new Article(_1_imageElement, _1_tagElementList, _1_postElement);

this.article2 = new Article(_2_imageElement, _2_tagElementList, _2_postElement);

this.article3 = new Article(_3_imageElement, _3_tagElementList, _3_postElement);

}

Phase 3: Define the PageObject

Define the PageObject

• @FindBy(how = CSS, using = "#post-564 a") public WebElement image1Element;

@FindBy(how = CSS, using = "#post-564 header

a") public List<WebElement> tagList1Element;

@FindBy(how = CSS, using = "#post-564 h1 a")

public WebElement post1Element;

Phase 4: Write the tests

Generate expected content

private ClickableImage image1 = new ClickableImage("https://iamalittletester.wordpress.com/2016/02/02/ho

w-to-identify-the-test-scenarios-you-have-to-automate/", "346","192", "https://iamalittletester.files.wordpress.com/2016/01/24680224896_5c3e7335c5_o.jpg?w=672&h=372&crop=1");private ClickableImage image2 = new ClickableImage(

"https://iamalittletester.wordpress.com/2015/04/03/working-with-cookies-in-selenium/", "346", "192",

"https://iamalittletester.files.wordpress.com/2015/04/dsc_0882.jpg?w=672&h=372&crop=1");private ClickableImage image3 = new ClickableImage(

"https://iamalittletester.wordpress.com/2014/05/05/useful-generating-random-strings-with-randomstringutils/",

"346", "192", "https://iamalittletester.files.wordpress.com/2014/05/13643775275_e4d2dd2da3_o.jpg?w=672&h=372&crop=1");

Generate expected content

private Link tag_automation = new Link("https://iamalittletester.wordpress.com/category/automation/", "AUTOMATION");private Link tag_code = new Link("https://iamalittletester.wordpress.com/category/code/", "CODE");private Link tag_testing = new Link("https://iamalittletester.wordpress.com/category/testing/", "TESTING");private Link tag_selenium = new Link("https://iamalittletester.wordpress.com/category/selenium/", "SELENIUM");private Link tag_flavours = new Link("https://iamalittletester.wordpress.com/category/flavours/", "FLAVOURS");

Generate expected content

//below part of the article - the link to the postprivate Link postLink1 = new Link("https://iamalittletester.wordpress.com/2016/02/02/how-to-identify-the-test-scenarios-you-have-to-automate/",

"HOW TO IDENTIFY THE TEST SCENARIOS YOU HAVE TO AUTOMATE");private Link postLink2 = new Link("https://iamalittletester.wordpress.com/2015/04/03/working-with-cookies-in-selenium/",

"WORKING WITH COOKIES IN SELENIUM");private Link postLink3 = new Link("https://iamalittletester.wordpress.com/2014/05/05/useful-generating-random-strings-with-randomstringutils/",

"USEFUL: GENERATING RANDOM STRINGS WITH RANDOMSTRINGUTILS");

Generate expected content

//tag sectionsprivate TagSection tagSection1 = new TagSection(tag_automation, tag_code, tag_testing);private TagSection tagSection2 = new TagSection(tag_automation, tag_selenium, tag_testing);private TagSection tagSection3 = new TagSection(tag_automation, tag_flavours, tag_testing);

//articlesprivate Article article1 = new Article(image1, tagSection1, postLink1);private Article article2 = new Article(image2, tagSection2, postLink2);private Article article3 = new Article(image3, tagSection3, postLink3);

//the featured content sectionprivate FeaturedContentSection featuredContentSection = new FeaturedContentSection(article1, article2, article3);

The test

@Testpublic void theTest() {

webDriver.get("https://iamalittletester.wordpress.com/";

assertEquals(new FeaturedContentSection(page.image1Element, page.tagList1Element, page.post1Element,

page.image2Element, page.tagList2Element, page.post2Element,

page.image3Element, page.tagList3Element, page.post3Element), featuredContentSection);}

Summary

• Analyze the module under test

• Map module and properties to objects and object properties

• Create constructors for expected and actual content

• Add equals(), hashCode(), toString() methods to objects

• Create page objects

• Generate expected and actual content objects

• Compare expected and actual objects

Possible improvements

•Reduce constructor signatures

• Extract common texts into variables/constants

•Add more constructors if needed

•Override display for assertion error

Solution available

• Git project: https://github.com/iamalittletester/learning-

project

• Page objects: https://github.com/iamalittletester/learning-

project/tree/master/src/main/java/pageobjects/seOO/ntd17

• Objects + test : https://github.com/iamalittletester/learning-

project/tree/master/src/test/java/ntd17