warpedjavaguy

Imperative by day and functional by night

Archive for the ‘automation’ Category

Page Objects Begone

with 2 comments

Because we can emulate them with page scopes instead.

Page objects are a commonly used design pattern for developing web tests with Selenium web driver. But coding page objects and tests to an API is a very developer centric activity. The role of a tester is to write and execute tests and not to develop and compile code. The same can be said for developers when they put their test hats on.

Gherkin features that describe the expected behavior of a system are good enough to drive tests. There is no need for a fancy GUI interface that requires up front modelling and compiling to generate tests. It is much simpler to just specify the expected behavior and have an interpreter dynamically evaluate it against the system under test.

Introducing gwen-web

gwen-web is a tool that aims to give testers this dynamic capability and do away with page objects and compilation altogether. It is powered by gwen; a functional specifications interpreter that maps gherkin features to executable code. In the case of gwen-web, it maps Gherkin features to precompiled Selenium code to drive a web browser. As a user of this tool, you never have to write any Selenium code or develop any page objects at all.

Page Scopes

Gwen-web introduces the concept of page scopes. A page scope is a stack of name-value pairs bound to a namespace in memory. They can be used to store information about individual pages and how their web elements can be located. In this way gwen does not store or manage any web element references but rather just binds their names to locator expressions (or lookup strings) that you provide. You specify what pages and bindings you require through a prescribed set of steps that gwen-web knows how to interpret and understand.

It is best to illustrate with an example. The floodio challenge walks you through a series of web pages and asks you to perform some relatively simple tasks. In the remainder of this post, we will use the gwen REPL (read-eval-print loop) console to perform these tasks for us and complete the challenge.

Build and install gwen-web – Note that gwen-web is an open source project that is currently still under development and a binary release is not yet available. On the bright side it is fully functional and you can download the source and build and install it on your local machine by following the instructions here. Gwen is written in Scala and you will need to download the sbt build tool to build it (the details are in the instructions). But once built, you only need Java to run it.

After completing the installation, open a command prompt to your installed gwen-web directory and enter the following command:

bin/gwen

REPL Console

The gwen REPL will start and you will see the following console displayed:

page-objects-begone-1

The REPL is case sensitive and does not accept fuzzy input. So be sure to enter all steps and commands exactly as shown in this post.

When gwen starts up, it always implicitly creates and activates a default global page scope with no bindings in it. This global scope can be used to set bindings for elements that are common and accessible across multiple pages.

The first thing we will do is create and activate a new page scope explicitly for the floodio start page. No need to write a page object, just type the following into the gwen prompt and hit enter:

When I am on the start page

Gwen will create a new page scope called “start” and activate it in memory before informing you that it has successfully completed the step. If you enter env at the gwen prompt, you will see the output of the environment context in memory and our newly created page scope called “start” at the bottom.

{
  "env" : {
    "data" : [ {
      "page" : [ {
        "scope" : "global",
        "atts" : [ ]
      }, {
        "scope" : "start",
        "atts" : [ ]
      } ]
    } ]
  }
}

All we have done here is defined a new page scope called “start” and made it the currently active scope. Now we will store the url of the floodio start page into this scope so that gwen can know where to navigate to. Enter the following to bind the floodio start page URL to the currently active “start” page scope:

Then the url will be "https://challengers.flood.io/start"

When it successfully completes, enter env at the prompt again to see our bound URL:

..
{
  "scope" : "start",
  "atts" : [ {
    "navigation/url" : "https://challengers.flood.io/start"
  } ]
}
..

We have now told gwen what the url of the floodio start page is. We will now instruct gwen to open a browser to that page. Enter the following, and observe!

Given I navigate to the start page

This step will start a new browser window, locate the URL for the start page, and point the browser to that location.

page-objects-begone-2

Gwen-web supports the Firefox, Chrome, Safari, and IE browsers. It uses Firefox as the default browser since it does not require you to install a native web driver on your local machine. To use a different browser, follow the instructions in this user guide.

Now we will tell gwen how to locate the Start button that appears on the start page. But to do that, we need to know how the button has been defined on the page. If you right click the Start button in the browser page and click “inspect element”, you will see that it is defined as an input element with a name attribute set to “commit”.

<input class="btn blue" name="commit" value="Start" type="submit">

Now enter the following at the gwen prompt to bind this information to the “start” page scope that is currently active:

And the Start button can be located by name "commit"

Type env at the command prompt again if you would like to see how this locator information is bound to memory.

Before continuing, be sure to close the “inspect element” pane if you still have it open in your browser. Leaving it open may interfere with gwen and could result in errors.

Now enter the following to verify that gwen can locate the Start button:

And I highlight the Start button

This step locates the Start button and highlights it for a short time. You should see the Start button being highlighted and then unhighlighted.

page-objects-begone-3

This confirms that gwen can locate the button and that we have bound the locator correctly. Now enter the following to have gwen click the Start button:

When I click the Start button

Gwen will now click the Start button and the browser will navigate to the next page.

page-objects-begone-4

To proceed from here, we again first need to create a new page scope for this page, and then tell gwen how to locate the elements we wish to interact with. Enter the following to create a new page scope for this page:

Then I am on the step 2 page

This will create a new empty page scope in memory called “step 2″ and make it the currently active scope. If you type env at the command prompt, you will see it printed at the bottom right after the “start” page scope we created earlier.

{
  "env" : {
    "data" : [ {
      "page" : [ {
        "scope" : "global",
        "atts" : [ ]
      }, {
        "scope" : "start",
        "atts" : [ {
          "navigation/url" : "https://challengers.flood.io/start"
        }, {
          "the Start button/locator" : "name"
        }, {
          "the Start button/locator/name" : "commit"
        }, {
          "the Start button/action" : "click"
        } ]
      }, {
        "scope" : "step 2",
        "atts" : [ ]
      } ]
    } ]
  }
}

All page scopes are managed in memory as JSON objects on a stack with the most recently active scope appearing at the bottom. For more details about how this stack works, you can study the documented source on the gwen project site here.

Moving on, we can now proceed to bind the locator information for the ‘how old are you’ dropdown and the ‘Next’ button elements that appear on the step 2 page. If you inspect these elements in the page source, you will find that they are defined as follows:


<select class="select optional" id="challenger_age" name="challenger[age]">
  <option value="">How old are you?</option>
  <option value="18">18</option>
  <option value="19">19</option>
  ...
</select>

<input class="btn" name="commit" value="Next" type="submit">

Again, be sure to close the “inspect element” pane (if you opened it) in the browser before continuing.

Enter the following into the gwen prompt to let gwen know how to locate the ‘how old are you’ dropdown element (in this instance we locate it by Id).

Given the how old are you dropdown can be located by id "challenger_age"

Now for the next button. We could locate it by name in the same way we did for the Start button on the start page, but to mix things up a bit (and because we can), we will locate it by class instead. Enter the following to let gwen know how to locate the next button:

And the next button can be located by class name "btn"

You can confirm that both of these locators work by entering the following steps in the console (one after the other) to highlight them:

And I highlight the how old are you dropdown
And I highlight the next button

After confirming the above, we can proceed to select an age and click the next button before creating a scope for the next page:

And I select "21" in the how old are you dropdown
And I click the next button
Then I am on the step 3 page

We are now on the step 3 page. Here we need to select and enter the largest order value from the list of radio buttons displayed on the page.

page-objects-begone-5

How do we instruct gwen to find the largest order value? Lets see if we can find it with some JQuery scripting first. Open the browser console view and enter the following lines of script to locate the largest order value:

var orderRadios = $('.radio'); 
var orderValues = $.map(orderRadios, function(x) { return parseInt($(x).text()); });
var maxValue = Math.max.apply(Math, orderValues);
var maxRadio = $('.radio:contains("' + maxValue + '")').get(0);
$(maxRadio).text(); // should return largest order value

The above can be reduced to a one-liner to get the maxRadio element as follows:

$('.radio:contains(' + Math.max.apply(Math, $.map($('.radio'), function(x) { return parseInt($(x).text()); })) + ')').get(0);

We have shown above that we can locate the largest order value using JQuery. Luckily for us, gwen-web allows us to locate elements by JavaScript (but only through one liner expressions). Futhermore, if the page in the browser has loaded the JQuery library then we can use it too. Now enter the following into the console so that gwen can know how to locate the element containing the highest order value (note that we use the one-liner expression version here to locate and return the element):

Given the largest order value can be located by javascript "return $('.radio:contains(' + Math.max.apply(Math, $.map($('.radio'), function(x) { return parseInt($(x).text()); })) + ')').get(0);"

Now enter the following to highlight the largest order value and confirm that the locator works:

And I highlight the largest order value

We had to use some JQuery scripting here to locate the largest order value. Scripting is necessary in this case because we need to enter values and select buttons based on the results of functions applied to the elements and values on this page. This is a good example of an interaction that cannot be readily automated without some level of scripting. For this reason, gwen-web supports locating elements by javascript.

The other things we need to locate on this page are the input field into which we will need to enter the largest order value into and the next button. We define the location of these by entering the following:

And the largest order value field can be located by id "challenger_largest_order"
And the next button can be located by class name "btn"

We are now ready to let gwen find the largest order value, enter it into the input field, click the radio button for that value, and then click next. We do that by entering the following steps:

When I enter the largest order value in the largest order value field
And I click the largest order value
And I click the next button
Then I am on the step 4 page

The step 4 page merely asks us to click the next button when we are ready. We do this straight away by entering the following:

Given the next button can be located by class name "btn"
When I click the next button
Then I am on the step 5 page

This will bring us to the step 5 page (the last page in the floodio challenge).

page-objects-begone-6

This page requires that we copy a provided token value into a field and then click next. Inspecting the page source reveals that the token is displayed in a span element defined with a class="token" attribute. The input field has an id of “challenger_one_time_token”, and the next button is defined in the same way it was in the previous pages. We now define locators for these by entering:

Given the one time token can be located by css selector ".token"
And the one time token field can be located by id "challenger_one_time_token"
And the next button can be located by class name "btn"

If you take a closer look at the source you will see that the token value is actually loaded by an ajax request when the page is loaded. Waiting for this value to load is not a problem when running gwen in REPL mode as the ajax request will have most likely completed in the time that the REPL is idly waiting for us to enter the next step at the prompt. But if we were running all the steps we’ve entered so far very quickly (as if in automated batch mode), then we would need to wait for the ajax request to complete and the token value to be populated first before attempting to access the value. Enter the following to have gwen wait for the token value to be populated (note: if the token is already populated, then gwen will immediately return without waiting).

And I wait for the one time token text

Now that we know the token is loaded, we can proceed to copy it into the input field and click the next button to complete the challenge. Enter the following steps to do that:

When I enter the one time token in the one time token field
And I click the next button
Then I am on the done page

This will take us to the done page, telling us that we’re done.

page-objects-begone-7

To finish, type exit at the gwen prompt. The browser and the REPL will shut down.

Separation of Concerns

Two major benefits that page objects provide include the separation of test logic from configuration and the elimination of unwanted redundancies. Gwen can provide these same benefits through meta features.

Configuration by Meta

A meta feature is simply a configuration specification expressed as a gherkin feature (a feature describing a feature if you like). Recall that some of the steps we typed into the REPL above just configure (or tell gwen) what the url to a page is or how an element on a page can be located. This configuration information can all be captured in a meta feature file and loaded into gwen on startup. We can also eliminate duplicated steps and other redundancies too. For example, you will have noticed that the step that configures the next button locator was repeated above for every page that contains a next button. Since this button is common across multiple pages, it makes sense to define it once and reuse it. This can be done by binding it to the default global page scope that is implicitly created and activated by gwen when it starts up.

So we can now capture all the configuration steps into a single meta feature file. Note that this meta is representative of everything that would otherwise need to be programmed into a page object. But with gwen meta features, that programming is never necessary.

Now create a new file called floodio.meta in your gwen-web install directory and edit it to contain the following meta specification:

 Feature: Flood IO Meta

Scenario: Configure common locators
    Given the next button can be located by class name "btn"

Scenario: Configure start page
     When I am on the start page
     Then the url will be "https://challengers.flood.io/start"
      And the Start button can be located by name "commit"

Scenario: Configure step 2 page
     When I am on the step 2 page
     Then the how old are you dropdown can be located by id "challenger_age"

Scenario: Configure step 3 page
     When I am on the step 3 page
     Then the largest order value can be located by javascript "return $('.radio:contains(' + Math.max.apply(Math, $.map($('.radio'), function(x) { return parseInt($(x).text()); })) + ')').get(0);"
      And the largest order value field can be located by id "challenger_largest_order"

Scenario: Configure step 4 page
   # noop - this page only has a next button (we have already defined a common locator for it above)
    
Scenario: Configure step 5 page
     When I am on the step 5 page
     Then the one time token can be located by css selector ".token"
      And the one time token field can be located by id "challenger_one_time_token"

Loading Meta

The above meta can now be loaded into gwen on startup through the -m command line option as follows:

bin/gwen -m floodio.meta

You will notice this time that the REPL console will load the meta when it starts up.

page-objects-begone-8

You can type env at the gwen prompt to view the meta bindings in memory:

{
  "env" : {
    "data" : [ {
      "page" : [ {
        "scope" : "global",
        "atts" : [ {
          "the next button/locator" : "class name"
        }, {
          "the next button/locator/class name" : "btn"
        } ]
      }, {
        "scope" : "start",
        "atts" : [ {
          "navigation/url" : "https://challengers.flood.io/start"
        }, {
          "the Start button/locator" : "name"
        }, {
          "the Start button/locator/name" : "commit"
        } ]
      }, {
        "scope" : "step 2",
        "atts" : [ {
          "the how old are you dropdown/locator" : "id"
        }, {
          "the how old are you dropdown/locator/id" : "challenger_age"
        } ]
      }, {
        "scope" : "step 3",
        "atts" : [ {
          "the largest order value/locator" : "javascript"
        }, {
          "the largest order value/locator/javascript" : "return $('.radio:contains(' + Math.max.apply(Math, $.map($('.radio'), function(x) { return parseInt($(x).text()); })) + ')').get(0);"
        }, {
          "the largest order value field/locator" : "id"
        }, {
          "the largest order value field/locator/id" : "challenger_largest_order"
        } ]
      }, {
        "scope" : "step 5",
        "atts" : [ {
          "the one time token/locator" : "css selector"
        }, {
          "the one time token/locator/css selector" : ".token"
        }, {
          "the one time token field/locator" : "id"
        }, {
          "the one time token field/locator/id" : "challenger_one_time_token"
        } ]
      } ]
    } ]
  }
}

Now we can open a new browser session to the floodio start page and click the start button by entering only the following steps into the REPL:

Given I navigate to the start page
When I click the Start button
Then I am on the step 2 page

And similarly for the remaining pages..

Step 2 page:

Given I select "21" in the how old are you dropdown
When I click the next button
Then I am on the step 3 page

Step 3 page:

Given I enter the largest order value in the largest order value field
And I click the largest order value
When I click the next button
Then I am on the step 4 page

Step 4 page:

When I click the next button
Then I am on the step 5 page

Step 5 page:

Given I wait for the one time token text
And I enter the one time token in the one time token field
When I click the next button
Then I am on the done page

When ready, type exit to close the browser and quit the REPL.

Conclusion

In this post, we used the gwen REPL to directly interact with a web application from scratch. We then factored out the configuration steps into a meta feature and loaded that into the REPL and interacted with the same web application again without reentering any of the configuration steps. We did it all with no page objects too! :)

Next..

In the next post we will write a feature file to automate the same floodio challenge in batch mode and generate evaluation reports. We will also compose custom step definitions and perform some assertions on each page. Lastly we will solve some common ajax and page loading problems that arise when automating web tests.

Written by warpedjavaguy

August 27, 2014 at 12:28 am

Posted in automation

Tagged with ,

One Gwen Interpreter, Many Evaluation Engines

with 5 comments

There is so much more that can be achieved with Gherkin.

In the previous post, I announced the open sourcing of the Gwen interpreter project. In this post I will introduce the interpreter and evaluation engine concepts and describe the difference and relationship between them.

The Gwen interpreter translates Gherkin features into executable code. The code that each step is translated to is not defined in the interpreter itself, but rather in separate modules called evaluation engines. When a feature is executed, the interpreter delegates the processing of each step to a mixed in engine that you define or provide. This is necessary since evaluation varies across systems and it would be futile to try and code for every conceivable behavior in one implementation. For this reason Gwen abstracts the evaluation engine to support many implementations. In this way, you decide which engine to use based on the type of software behavior that you want to evaluate. For example, if you want to evaluate the behavior of a web application, then you would choose to mix in a web engine. Each engine must prescribe a supported set of steps and use at least one API to interact with a system.

one-gwen-interpreter-many-engines

Engines can be defined to replicate any software behavior that is reproducable through one or more API’s.

There are many useful engines that can be built. A web engine for automating web application testing is an obvious one that comes to mind. But Gwen engines need not be confined to just testing. Engines can be defined to automate, emulate, or simulate any mechanical process that can be driven by software. Engines can also be built to generate data and other resources too.

In summary,

I hope that many engines emerge from the community and that many of them are shared for everyone to download and use. But everyone is also permitted to build their own proprietary or commercial engines too.

Written by warpedjavaguy

May 27, 2014 at 12:17 am

Posted in automation, bdd, gherkin, scala

Tagged with

Gwen – A Gherkin DSL Interpreter

leave a comment »

A common platform for mapping Gherkin features to executable code.

Gherkin is a language for describing software behavior. Any software behavior. It makes sense to use it for evaluating software behavior too. But how can you evaluate any software behavior?

A Gherkin interpreter with an abstracted evaluation engine could be one way to do it.

This interpreter would parse Gherkin features and dispatch the processing of each step to an evaluation engine that you provide and mix in. You could implement your own specialised engines to support specific steps and target specific types of software. You could share them too. The interpreter would translate plain text feature specifications into executing instructions and report the evaluated results. It would support sequential or parallel execution. Ideally it would also have a REPL. It would provide all the necessary processing and tooling required to interpret gherkin features and execute them against any software system for which a compatible engine has been defined. A public library of engines would emerge and be available for download. The one interpreter would work with all of them.

It’s a simple idea that a colleague and I have been working on. We haven’t built a library of engines but we have built a core interpreter that any engine can be mixed into. We wrote it in Scala and open sourced it as a project called Gwen.

gwen-logo-1

Check it out and have a play. We would like to get some feedback and help from the community before publishing a 1.0 release.

Written by warpedjavaguy

May 17, 2014 at 3:31 pm

Posted in automation, bdd, gherkin, scala

Tagged with

How I defeated the maven-release-plugin in a flat structured multi module project

Rules are made to be broken so that paradoxes can be created.

Maven is a handy tool and has a lot of available plugins. It adopts the convention over configuration philosophy and provides a standard build lifecycle out of the box. This makes it very easy to automate a build and release process without writing a single line of script. But there’s a catch! It only works if you do things the “maven way” and follow the maven rules.

Most projects are made up of one or more multiple smaller projects. In the maven world, such projects are called multi module projects. A multi module project has a parent project and one or more nested child projects known as modules. When you build the parent project the child projects are also built. The recommended maven way of structuring a multi module project is to mirror the parent child hierarchy using a nested project structure.

So maven recommends that you create a parent project that contains the child projects using a physical project structure like this:

workspace/parent/pom.xml
workspace/parent/child1/pom.xml
workspace/parent/child2/pom.xml

Modules are then declared in the parent POM like this:

<modules>
  <module>child1</module>
  <module>child2</module>
</modules>

This was good for maven but it was is not good for eclipse. The eclipse IDE does not support nested projects. This was clearly a problem! I wanted to import all my projects (parent and children) into eclipse but the nested structure made this impossible. So I decided to use a flat project structure instead and moved all my child projects out of the parent project.

Now my parent and child projects were organised in a flat physical structure like this:

workspace/parent/pom.xml
workspace/child1/pom.xml
workspace/child2/pom.xml

And I then redefined the maven modules in the parent POM like this:

<modules>
  <module>../child1</module>
  <module>../child2</module>
</modules>

Now I could import all my projects into eclipse. This worked well and life was good until I decided to use the maven release plugin to automate the release process. I learned the hard way that the release plugin only supports the nested project structure recommended by maven. Reverting back to the nested structure was not an option. I had broken a maven rule and was being punished for it! I needed a paradoxical solution that would support both the nested and flat structures at the same time. It was then that I realised that my parent POM was responsible for two things: POM inheritance and module composition. It served two “parental” roles. In one role it provided all the common properties, dependencies, plugins, and profiles to all children through inheritance and in the other it defined itself as the parent project of all child projects. In OO terms, this was akin to defining a superclass that contains a list of all its subclasess.

My parent POM had violated the single responsibility principle. So I decided to split it up into two separate parent POMs. I removed the modules declaration from the original POM in my parent project. This POM was now purely to be used for inheritance purposes only. All child POMs continued to reference this POM as the parent POM. Nothing changed there. I then created a new POM that inherited this modified POM and aggregated all the other child POMs. I placed this new top level POM file in the workspace root alongside all my existing projects. My flat project structure now had a top level POM file that defined all the child projects as modules.

The final project structure looked like this:

workspace/pom.xml
workspace/parent/pom.xml
workspace/child1/pom.xml
workspace/child2/pom.xml

The workspace/parent/pom.xml was inherited by all child POMs and also the top level workspace/pom.xml. It was the parent POM for inheritance purposes. The top level workspace/pom.xml aggregated all the child projects into one container project. It was the (root) parent POM for composition purposes. It defined the parent and child modules like this:

<parent>
  <groupId>?</groupId>
  <artifactId>?</artifactId>
  <version>?</version>
  <relativePath>parent/pom.xml</relativePath>
</parent>
<modules>
  <module>parent</module>
  <module>child1</module>
  <module>child2</module>
</modules>

Both the maven release plugin and the eclipse IDE were happy with this structure. It was flat enough for eclipse and hierarchical enough for the maven release plugin.

Note: After experiencing and resolving this problem first hand I later discovered that the issue has already been reported and discussed here and mentioned at the very bottom of the maven eclipse plugin page. But I still cannot find any mention of this limitation on the maven release plugin page itself. I suspect that this is a well known issue in the maven community. If anyone is aware of any fixes or better solutions, please let me know. Interestingly also the title of this issue suggests that the problem has been fixed but the actual contents therein state otherwise.

Sample POM snippets – Posted on 22 Aug 2011 by request

workspace/pom.xml (The top level root POM)

  <parent> 
    <groupId>maven.demo</groupId> 
    <artifactId>parent</artifactId> 
    <version>1.0.0-SNAPSHOT</version>
    <relativePath>parent/pom.xml</relativePath>
  </parent> 

  <groupId>maven.demo</groupId>
  <artifactId>root</artifactId>
  <version>1.0.0-SNAPSHOT</version>
  <packaging>pom</packaging>

  <modules>
    <module>parent</module>
    <module>child1</module>
    <module>child2</module>
  </modules>

workspace/parent/pom.xml (The parent POM)

  <groupId>maven.demo</groupId>
  <artifactId>parent</artifactId>
  <version>1.0.0-SNAPSHOT</version>
  <packaging>pom</packaging>

workspace/child1/pom.xml (The child1 POM)

  <parent> 
    <groupId>maven.demo</groupId> 
    <artifactId>parent</artifactId> 
    <version>1.0.0-SNAPSHOT</version>
    <relativePath>../parent/pom.xml</relativePath>
  </parent> 

  <groupId>maven.demo</groupId>
  <artifactId>child1</artifactId>
  <version>1.0.0-SNAPSHOT</version>
  <packaging>jar</packaging>

workspace/child2/pom.xml (The child2 POM)

  <parent> 
    <groupId>maven.demo</groupId> 
    <artifactId>parent</artifactId> 
    <version>1.0.0-SNAPSHOT</version>
    <relativePath>../parent/pom.xml</relativePath>
  </parent> 

  <groupId>maven.demo</groupId>  
  <artifactId>child2</artifactId>
  <version>1.0.0-SNAPSHOT</version>
  <packaging>war</packaging>

Written by warpedjavaguy

August 8, 2011 at 11:21 pm

Posted in automation, maven

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: