Beyond Page Objects

Beyond Page Objects

Dante BrionesSeleniumConf 5 April 2011

http://[email protected]

@dantebriones

Wednesday, 06 April, 2011

http://electronicingenuity.com


mailto:[email protected]


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 reflect 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 Benefits

• Readable tests

• Reduced or eliminated duplication

• Self-verification

• 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

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


ComponentFactorypublic 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 Classpublic 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 Locatorpublic 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://[email protected]

@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

Technology

Transcript of Beyond Page Objects