Beyond Page Objects

Beyond Page Objects
Dante Briones
SeleniumConf
5 April 2011

http://electronicingenuity.com
dante@electronicingenuity.com
@dantebriones

Wednesday, 06 April, 2011

Let’s Start With A Story


A long time ago* in an investment bank
far, far away...

*(2005)


Our Hero


A Chance Encounter


A New Weapon


Engaging The Enemy


Victory

MUCH more readable!


What’s The Moral?

(hint: it’s not about the developer, the
author, or the book)


The Details


Why Page Objects?


Tests Are Code

They need TLC


Readability

selenium.click(“id=itemAction1138”);
assertEquals(“1”, selenium.getText(“css=#cart .count”));

vs.
item.clickAddToCart();
assertEquals(1, cart.getItemCount());


Stay DRY
Test class:
selenium.click(“id=zoom_out_action”);

vs.
Test class:
map.zoomOut();
map.zoomOut();
Map class:


Robustitude

Thread.sleep(250); //wait for button to appear
selenium.click(“id=a_button”);
Thread.sleep(500); //wait for results to show up
assertEquals(selenium.getText(“id=results”),
“False Negatives suck!”);


Sensible Names

• catalogItem.addToCart()
• blogEntry.post()
• auction.bid(25.00)


Small Classes


How Do We Get
There?

• Refactoring
• Apply Design Patterns
• Continuous Improvement


How Do We Get
There?


Context

• Several consulting gigs over the past few
years
• Current client:
• consumer-facing RIA
• tests written with Selenium 1 API in Java


PRO TIP

Use WebDriver


Page Objects Recap

• Model the application’s UI
• Expose methods that reﬂect the things a
user can see and do on that page
• Hides the details of telling the browser
how to do those things


Page Object Beneﬁts

• Readable tests
• Reduced or eliminated duplication
• Self-veriﬁcation
• Reusability


So Why Go “Beyond”?

Web Apps Are Different Now


Why Go “Beyond”?

meh

OMG SOOO MUCH BETTER



Because modern web apps are
dynamic and rich


Example: Pivotal Tracker


Modeling The UI
public class IssueSummary {
public IssueDetail expand() {...}
}

public class IssueDetail {
public void save() {...}
public void cancel() {...}
public String getStoryId() {...}
}


What’s This, Then?

I call them “Page Components”


Method Chaining: Focus
Stays Put
public void save() {...}
public IssueDetail addComment(String comment) {
...
return this;
}
}

issueDetail.addComment().save();


Method Chaining: Focus
Moves Elsewhere
public ConfirmationDialog delete() {
...
return new ConfirmationDialog();
}
}

issueDetail.delete().confirm();
or
issueDetail.delete().cancel();


Page Component
Recap

• Just like Page Objects... but littler
• Use return types to model the user
experience


ComponentFactory

Do you like to type? I don’t.


ComponentFactory

1/(keystrokes
Job Satisfaction = required write
useful code)


ComponentFactory
public class ComponentFactory {
public IssueSummary issueSummary() {
return new IssueSummary(...);
}
}
public abstract BaseTestCase {
protected ComponentFactory withComponent() {
return new ComponentFactory();
}
}


ComponentFactory

new IssueSummary(selenium).expand();

vs.
withComponent().issueSummary().expand();


ComponentFactory
Recap

• Interactive documentation
• Easier entry point into component creation
• Another way to use strong typing to make
the tests easier to write


Indexed Components


Indexed Components

IssueSummary summary =
withComponent().backlog().issueSummary(0);
assertEquals(summary.getTitle(), “some title”);


Indexed Components

CSS locators:
Backlog = #backlog
First issue summary = #backlog .issue-summary:nth(0)
“Expand” button = #backlog .issue-summary:nth(0) .expand
Title = #backlog .issue-summary:nth(0) .title


The Locator Class
public class Locator {
protected int index;

public Locator(String rootLocator, int index) {
this.rootLocator = rootLocator;
this.index = index;
}

public String of(String containedElement) {
return String.format(rootLocator, index) +
" " + containedElement;
}
}


Using A Locator
public IssueDetail expand() {
selenium.click(“#backlog .issue-summary:nth(0) .expand”);
...
}

vs.

public IssueDetail expand() {
selenium.expand(locator.of(“.expand”));
...
}


Synchronization Issues

Two kinds:
1. Element not present yet
2. Element content not updated yet


Thread.sleep()

NO.*
STEP AWAY FROM THE KEYBOARD.


Thread.sleep()

NO.*
STEP AWAY FROM THE KEYBOARD.

(*unless you have no other choice)


Thread.sleep()

Just be sure to wrap it in an appropriately named method:


Thread.sleep()


• sleepAsALastResortWhenNothingElseWorks()


Thread.sleep()


• sleepToMakeThisTestMoreFlakyThusEnsuringMyJobSecurity()


Thread.sleep()


• sleepToMakeThisTestMoreFlakyThusEnsuringMyJobSecurity()
• sleepBecauseImTooLazyToSolveThisProperly()


Use The Wait Class

...to delay the test until the app exhibits
certain behavior rather than waiting for an
arbitrary amount of time.


Two Options

1. Subclass DefaultSelenium and override the
click() method
2. Extract a BaseComponent class that
provides a click() method for use by all
subclasses


Next Issue

The element is present in the DOM, but
doesn't contain the right data yet.


Cleanest Solution

Build the app for testability


Next Best Solution

public IssueDetail addComment() {
int initialCount = getCommentCount();
selenium.type(locator.of(“.comment-entry”));
selenium.click(locator.of(“.add-comment”));
waitUntilCommentCountIs(initialCount + 1);
return this;
}


Final Thoughts

Beyond “Beyond”?


Thank You!

http://electronicingenuity.com
dante@electronicingenuity.com
@dantebriones


References

• Dan North on Best Practices:

• http://www.viddler.com/explore/kvarnhammar/videos/6/

• Adam Goucher on built-in test synchronization:

• http://saucelabs.com/blog/index.php/2011/02/advanced-selenium-
synchronization-with-latches/


Beyond Page Objects

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Beyond Page Objects

Similar to Beyond Page Objects (20)

Recently uploaded

Recently uploaded (20)

Beyond Page Objects