WatirMelon

Web element extensions in C# that I find useful

Alister Scott — Tue, 15 May 2012 11:57:16 +0000

I really miss the Watir API when working with WebDriver in C#. Whilst the C# WebDriver bindings are fantastic (thanks Se team!), simple things I like to do with the Watir API aren’t present, so I find myself writing web element extension methods to make my life easier (and code cleaner). Here’s some of my favourites: (wouldn’t it be neat to see them in WebDriver one day. I can dream…)

IWebElement.Set(text)

I have always found .SendKeys to be an unusual method, as I haven’t come across an instance where I want to fire keys at a field instead of just setting it to a value. So .Set(text) is usually one of the first web element extensions that I write:

namespace WebDriverExtensions
{
  using Microsoft.VisualStudio.TestTools.UnitTesting;
  using OpenQA.Selenium;
  using OpenQA.Selenium.Firefox;
  
  public static class WebElementExtensions
  {
    public static void Set(this IWebElement e, string text)
    {
      e.Clear();
      e.SendKeys(text);
    }
  }
  
  [TestClass]
  public class ExtensionUnitTests
  {
    [TestMethod]
    public void SetTextField()
    {
      var driver = new FirefoxDriver();
      driver.Navigate().GoToUrl("data:text/html,");
      var textField = driver.FindElement(By.Id("t"));
      textField.SendKeys("a");
      Assert.AreEqual("a", textField.GetAttribute("value"));
      textField.SendKeys("b");
      Assert.AreEqual("ab", textField.GetAttribute("value"));
      textField.Set("b");
      Assert.AreEqual("b", textField.GetAttribute("value"));
      driver.Quit();
    }
  }
}

SelectElement.SelectBySubText(subText)

The Selenium Support library provides some useful select element specific methods, but unfortunately the .SelectByText(partial) method doesn’t select by subtext (as advertised), so I wrote a .SelectBySubText(subText) method to actually do this.

namespace WebDriverExtensions
{
  using System.Linq;
  using Microsoft.VisualStudio.TestTools.UnitTesting;
  using OpenQA.Selenium;
  using OpenQA.Selenium.Firefox;
  using OpenQA.Selenium.Support.UI;
  
  public static class WebElementExtensions
  {
    public static string SelectBySubText(this SelectElement me, string subText)
    {
      foreach (var option in me.Options.Where(option => option.Text.Contains(subText)))
      {
        var optionText = option.Text;
        option.Click();
        return optionText;
      }
      me.SelectByText(subText);
      return subText;
    }
  }
  
  public class ExtensionUnitTests
  {
    [TestMethod]
    public void SelectBySubTextTest()
    {
      var driver = new FirefoxDriver();
      driver.Navigate().GoToUrl("data:text/html,VolvoSaab");
      var selectList = new SelectElement(driver.FindElement(By.Id("cars")));
      selectList.SelectByText("Volvo");
      Assert.AreEqual(selectList.SelectedOption.Text, "Volvo");
      selectList.SelectBySubText("Saa");
      Assert.AreEqual(selectList.SelectedOption.Text, "Saab");
      driver.Quit();
    }
  }
}

IWebElement.FindVisibleElement(by) and IWebElement.VisibleElementExists(by)

Web Apps I test often hide elements that are available to use, but unfortunately WebDriver still locates these (even though it won’t allow you to interact with them). So, I wrote two extensions: one to only find an element matching a selector that is visible, and another to check if a visible element exists matching a selector.

namespace WebDriverExtensions
{
  using System;
  using System.Linq;
  using Microsoft.VisualStudio.TestTools.UnitTesting;
  using OpenQA.Selenium;
  using OpenQA.Selenium.Firefox;
  
  public static class WebElementExtensions
  {
    public static IWebElement FindVisibleElement(this IWebDriver driver, By by)
    {
      var elements = driver.FindElements(by);
      foreach (var element in elements.Where(e => e.Displayed))
      {
        return element;
      }
      throw new NoSuchElementException("Unable to find visible element with " + @by);
    }

    public static bool VisibleElementExists(this IWebDriver driver, By by, Int32 implicitWait=10)
    {
      driver.Manage().Timeouts().ImplicitlyWait(new TimeSpan(0, 0, 0));
      var elements = driver.FindElements(by);
      var visibleElements = elements.Count(e => e.Displayed);
      driver.Manage().Timeouts().ImplicitlyWait(new TimeSpan(0, 0, implicitWait));
      return visibleElements != 0;
    }
  }

  public class ExtensionUnitTests
  {
    [TestMethod]
    public void FindVisibleElements()
    {
      var driver = new FirefoxDriver();
      driver.Navigate().GoToUrl("data:text/html,");
      var textField = driver.FindElement(By.ClassName("myfield"));
      Assert.IsFalse(textField.Displayed);
      var visibleTextField = driver.FindVisibleElement(By.ClassName("myfield"));
      Assert.IsTrue(visibleTextField.Displayed);
      Assert.AreEqual("Visible", visibleTextField.GetAttribute("value"));
      driver.Quit();
    }
    
    [TestMethod]
    public void VisibleElementExists()
    {
      var driver = new FirefoxDriver();
      driver.Navigate().GoToUrl("data:text/html,");
      Assert.IsTrue(driver.VisibleElementExists(By.ClassName("myfield")));
      driver.Quit();
    }
    
    [TestMethod]
    public void VisibleElementDoesNotExist()
    {
      var driver = new FirefoxDriver();
      driver.Navigate().GoToUrl("data:text/html,");
      Assert.IsFalse(driver.VisibleElementExists(By.ClassName("myfield")));
      driver.Quit();
    }
  }
}

Summary

These are some web element extensions that I find useful. Do you have any? What would you like to see built into WebDriver?

Writing your own WebDriver selectors in C#

Alister Scott — Tue, 15 May 2012 03:27:00 +0000

I am working on a C# project at the moment, writing tests using WebDriver, and one of the things I miss most about Watir-WebDriver is its variety of selectors, for example, being able to specify a value for value. Since the application I am testing uses value a huge amount, I started using a css selector for each element I was interacting with:

var driver = new FirefoxDriver();
driver.Navigate().GoToUrl("data:text/html,Home");
var divByCss = driver.FindElement(By.CssSelector("[value=\"Home\"]"));

But I got sick of typing out this fairly unattractive CSS selector each time I came across a new element.

I wanted to write an extension method so that I can use something like By.Value(“Home”) instead of By.CssSelector(…) but soon realized that you can’t write extension methods for static classes in C#, as you need an instance of the class to extend.

So, instead of extending the original By class, I wrote my own custom MyBy class that I can use in addition to the original.

namespace WebDriverExtensions
{
  using Microsoft.VisualStudio.TestTools.UnitTesting;
  using OpenQA.Selenium;
  using OpenQA.Selenium.Firefox;

  public static class MyBy
  {
    public static By Value(string text)
    {
      return By.CssSelector("[value=\"" + text + "\"]");
    }
  }

  [TestClass]
  public class WebElementExtensionTests
  {
    [TestMethod]
    public void ByValue()
    {
      var driver = new FirefoxDriver();
      driver.Navigate().GoToUrl("data:text/html,Home");
      var divByValue = driver.FindElement(MyBy.Value("Home"));
      var divByCss = driver.FindElement(By.CssSelector("[value=\"Home\"]"));
      Assert.AreEqual(divByCss, divByValue);
      Assert.AreEqual("Home", divByValue.Text);
      Assert.AreEqual("Home", divByValue.GetAttribute("value"));
      driver.Quit();
    }
  }
}

I think this solves the problem fairly nicely. Do you do something similar? Is there a better way?

Worst security questions… ever.

Alister Scott — Fri, 20 Apr 2012 11:51:17 +0000

I went to buy an old TZU album on iTunes tonight and was asked to enter my iTunes password twice, followed by this weird ‘Security Info’ screen I had never seen before.

This is the full list of questions and my responses

Question 1 requires you to select an answer from one of the following questions:

What was the first car you owned? The first car I owned was a 1996 White Ford Falcon Panelvan I called ‘Panno’. So, should I enter ‘Ford Falcon’, or ‘Ford Falcon Panelvan’ or even ‘Ford Falcon Panel Van’, or maybe for fun ‘Panno the White Ford Falcon’? What’s the chance that at some point I’ll correctly recall what I specifically entered?
Who was your first teacher? I seriously can’t remember who my first teacher was. Was it my kindergarten teacher? Or is it my first school teacher? Unless you’re under 18, I doubt you’d remember your first teacher either.
What was the first album you owned? Surely if anyone Apple would know you don’t actually own an album, you only own a license to listen to it.
Where was your first job? Was this when I helping my parents out in their Cafe when I was 12? Or was it when I was at Uni? Or my first ‘real job’?
In which city were you first kissed? By my parents when I was a baby? On the cheek by the girl in Year 2? Or was it my first pash in high school?

Question 2 requires you to select an answer from one of the following questions:

Which of the cars you’ve owned has been your favourite? I would say my Ford Falcon Panelvan but Apple won’t let me! My first car can’t be my favourite! Ahhhhhhh! The horror!
Who was your favourite teacher? Again, Apple won’t let me say my first teacher was my favourite teacher, and even though I might remember the name of my favourite teacher, I don’t remember exactly: was it ‘Ms Dwyer’, or was that ‘Mrs Dwyer’, or ‘Sherry Dwyer’ I think her name was.
What was the first concert you attended? I think my parents took me to a Play School Concert when I was 5. Does that count?
Where was your favourite job? The recollection of my favourite job today will probably not be my recollection of my favorite job when I need to reset my password in 5 years time.
Who was your best childhood friend? Again, do I write ‘Tim’ or ‘Tim Rose’ or I think his actual name was ‘Timothy Rose’

Question 3 requires you to select an answer from one of the following questions:

Which of the cars you’ve owned has been your least favourite? Well, it was actually my Ford Falcon Panelvan, because whilst it was a fantastically practical and fun car, it was expensive to run and maintain. But Apple says no, my first car can’t be my favourite car, and my favourite car can’t be my least favourite car.
Who was your least favourite teacher? I can’t remember the bastard’s name.
Where was your least favourite job? Because every job I take from now can’t be my least favourite.
In which city did your mother and father meet? FFS, seriously? Was it Sydney? Or Glebe in Sydney? Or it might have been Tamworth. But that’s not really a city, it’s more of a town.
Where were you on January 1, 2000? I am sorry but I have no idea, I could have spent the weekend in Sydney, but again, I wouldn’t know.

What a ridiculous set of questions. I thought Apple were notorious for sweating the small stuff, but from this set of questions it’s obvious they have no clue what they’re doing.

I can’t answer those questions so instead I’ll click ‘cancel’ and maybe go and buy that record in a record store tomorrow. That, or fire up bit-torrent, it’s just less painful.

Using Watir-WebDriver with Safari (at last!)

Alister Scott — Tue, 17 Apr 2012 12:00:38 +0000

Well, it’s official: Watir-WebDriver now supports Safari thanks to the release of SafariDriver.

The downside is the set up is quite lengthy at the moment as it requires a Safari extension (version 5+) and until someone publishes the extension to the online gallery, you’ll have to build it yourself.

Steps to build the extension

First, create and install a Safari extension certificate at Apple. You’ll need to sign up for a (free) Safari developer account, and download your certificate locally.
Now, you’ll need to build the extension. First, you’ll need to check out the selenium source code to do so:
```
svn co http://selenium.googlecode.com/svn/trunk selenium
```
Then change into this directory and build the extension
```
cd selenium
./go safari
```
Finally, install your extension:
1. Launch Safari
2. Ensure develop menu is shown by setting it in Advanced Preferences
3. Open the Extension Builder (Develop > Show Extension Builder)
4. Add your new extension from: $SELENIUM_CHECKOUT_LOCATION/build/javascript/safari-driver/SafariDriver.safariextension

Using Safari with Watir-WebDriver

It’s exactly the same as any other browser:

require 'watir-webdriver'
b = Watir::Browser.new :safari

Caveat Emptor

browser.execute_script is a little flakey
Can’t use local html files as extensions don’t load
Not sure how to configure browser options programatically like user agent strings

Enjoy!

Five page object anti-patterns

Alister Scott — Sun, 01 Apr 2012 10:49:49 +0000

I’ve observed some page object anti-patterns which commonly arise when starting out designing end-to-end automated tests. Chris McMahon recently asked for some feedback on his initial test spike for Wikipedia, and some of these anti-patterns were present.

Anti-pattern one: frequently opening and closing browsers

I often see both RSpec and Cucumber tests frequently opening and closing browsers. This slows down test execution times, and should be avoided unless absolutely necessary.

You can clear cookies between tests if you’re worried about state.

To open and close the browser only once in Cucumber, specify this in your env.rb file:

browser = Watir::Browser.new

Before do
  @browser = browser
end

at_exit do
  browser.close
end

To open and close the browser only once in RSpec:

browser = Watir::Browser.new

RSpec.configure do |config|
  config.before(:each) { @browser = browser }
  config.after(:suite) { browser.close }
end

Anti-pattern two: hard coding URLs on page classes

Chances are you’ll at some point run your automated tests in different environments, even if it’s just to verify that production has been updated correctly. If you’ve hard coded URLs in page classes, this can be problematic.

Fortunately it’s easy to avoid, by creating a module that contains base URLs which can be accessed by page classes. These base URLs can be stored in YAML files which can be switched for different environments.

module Wikipedia
  BASE_URL = 'https://en.wikipedia.org'
end

class BogusPage
  include PageObject
  page_url "#{Wikipedia::BASE_URL}/wiki/Bogus_page"
end

Anti-pattern three: pages stored as instance variables in steps or rspec specs

I don’t like seeing pages stored as instance variables (those starting with an @) in Cucumber steps or RSpec specs, as it introduces state and thus more room for error.

If you’re using the page-object gem, there are two methods available to access pages directly without using instance variables: visit_page and on_page (also visit or on from 0.6.4+). Both of these can be used as blocks, so you can perform multiple actions within these methods.

visit LoginPage do |page|
  page.login_with('foo', 'badpass')
  page.text.should include "Login error"
  page.text.should include "Secure your account"
end

Anti-pattern four: checking the entire page contains some text somewhere

I often see people checking that the entire web page contains some expected text. Even if the text was at the very bottom of the page hidden in the footer the test would probably pass.

You should check the text is where it should be, using a container that it should belong to. Ideally a span or a div may exist that contains the exact text, but even if it’s in a slightly larger container it is still better than asserting it exists somewhere on the page.

class BogusPage
  include PageObject
  cell :main_text, :class => 'mbox-text'
end

visit_page BogusPage do |page|
  page.main_text.should include 'Wikipedia does not have an article with this exact name'
  page.main_text.should include 'Other reasons this message may be displayed'
end

Anti-pattern five: using RSpec for end-to-end tests

This one is contentious, and I am sure I’ll get lots of opinions to the contrary, but I believe that RSpec is best suited to unit/integration tests, and Cucumber is suited to end-to-end tests.

I find I create duplication when trying to do end-to-end tests in RSpec, which is where Cucumber step definitions come in. Trying to do unit tests in Cucumber seems like too much overhead, and in my opinion is more suited to RSpec.

Watir-page-helper has been end-of-lifed

Alister Scott — Thu, 29 Mar 2012 03:15:07 +0000

Intro

I am happy to announce that the watir-page-helper gem has been end-of-lifed: meaning no further development will happen on it and it will remain as it stands. I am thoroughly supportive of Cheezy’s page-object gem and recommend you move onto this when you have the first opportunity to do so.

Background

When I initially released this gem, Cheezy had yet to release his page-object gem. I borrowed a lot of his concepts and packaged them into a gem specifically for watir-webdriver. A few weeks later, Cheezy released his page-object gem that not only supports watir-webdriver, but also selenium-webdriver. He has iterated faster than I have and his gem has come along way to support additional features such as defining page-routes and default data. I have supplied a couple of tiny pull requests to him and there is nothing now that watir-page-helper can offer that page-object can’t, so I am EOL’ing watir-page-helper.

So how do I change to use page-object instead of watir-page-helper?

I converted an existing suite of tests that use watir-page-helper to run against Etsy to use the page-object gem (link to tests). It was a fairly straightforward task, and here are the fundamental differences:

Accessing an actual element object is done via an _element suffix: for example, defining a link :home, provides a home_element method. Watir-page-helper provided a home_link method, and I prefer Cheezy’s approach (the home_link method is actually supported by page-object but you should move away from it).
Watir-page-helper supported p,li,ol as methods, but these are defined as paragraph, list_item, and ordered_list in page-object.

Using Cheezy’s Page Factory

One of the neat features of the page-object gem is the page factory. This is a way to conveniently access pages from Cucumber steps and the like.

There are a couple of things you need to do:

In env.rb, you should mix in the PageObject::PageFactory module

require 'page-object/page_factory'
World(PageObject::PageFactory)

You then have access to helper methods to visit and set the page you want to use (originally there were just visit_page, and on_page, but I added on and visit – I think they read nicer):

visit_page RegistrationPage
on_page HomePage
visit HomePage
on HomePage

Summary

Good things come to an end and get replaced by even better things. Here’s to your future success using the page-object gem.

Introducing Einstien: the minesweeper robot

Alister Scott — Mon, 26 Mar 2012 23:49:32 +0000

As part of the Test Automation Bazaar, I thought it would be fun to have a minesweeper robot contest.

Scott Sims was the ‘default’ winner as he had the only entry, an early interation of his own minesweeper robot that can win beginner level, but not much more.

A colleague of mine, Mark Ryall, and myself developed our own robot ‘Einstein’ and here are some slides and a video* about him. You can check him out on github.

Video

* Soundtrack courtesy of blakerobinson

Introducing webdriver-user-agent gem: a quick way to run ruby webdriver tests emulating mobile devices

Alister Scott — Mon, 26 Mar 2012 22:28:01 +0000

Update: As @David points out below, Chrome window resizing does not seem to work at all on Windows. I am not sure why but I will update this blog if I fix this issue.

After chatting to Jari Bakken at the Test Automation Bazaar in Austin, I wrote and released the webdriver-user-agent gem.

I’m not convinced that running your automated functional tests on real or emulated mobile devices will yeild the appropriate defects for effort involved, so this gem makes it simple to run yourwatir-webdriver or selenium-webdriver tests on real browsers (:firefox and :chrome) but using mobile device user agents and resolutions, so your app thinks they’re a mobile device.

Installation

Add this line to your application’s Gemfile:

gem 'webdriver-user-agent'

And then execute:

$ bundle

Or install it yourself as:

$ gem install webdriver-user-agent

Examples

An example script in selenium-webdriver:

require 'selenium-webdriver'
require 'webdriver-user-agent'
driver = UserAgent.driver(:browser => :chrome, :agent => :iphone, :orientation => :landscape)
driver.get 'http://tiffany.com'
driver.current_url.should == 'http://m.tiffany.com/International.aspx'

and another example script in watir-webdriver:

require 'watir-webdriver'
require 'webdriver-user-agent'
driver = UserAgent.driver(:browser => :chrome, :agent => :iphone, :orientation => :landscape)
browser = Watir::Browser.new driver
browser.goto 'tiffany.com'
browser.url.should == 'http://m.tiffany.com/International.aspx'

The available options are:

:browser
- :firefox (default)
- :chrome
:agent
- :iphone (default)
- :ipad
- :android_phone
- :android_tablet
:orientation
- :portrait (default)
- :landscape

This is what the screenshots look like:

Tiffany.com in iPhone portrait

Tiffany.com in iPad landscape

Summary

I think this will be a useful gem for those wanting to test mobile device functionality without having to set up complex infrastructure.

Visualising software quality: using ink

Alister Scott — Wed, 22 Feb 2012 12:00:54 +0000

Not so recently, Gojko Atzic wrote a blog post asking for reader’s suggestions on techniques to visualise software quality of a system in development. I’ve recently been giving this some thought and came up with the following idea.

A story

Early last year at a client site, I met a genuinely lovely person working as a tester. She did traditional manual testing of a large complex system being developed in a non-iterative (big bang) manner.

I noticed her clear red pen had a small label on it: a piece of paper with a date sticky taped on, so I asked her about what it meant. She told me how she hates waste and loves to use a pen in its entirety, and the date is a way to keep track of how long she’s been using the particular pen for.

We went on talking to understand what she used the red pen for. What she’d do was create lots of manual test cases in a template on her computer, and then print them all to create a large pile of paper when it came time to execute the tests. As she excuted these tests, her red pen would be used to mark failures on these test case printouts, and write notes about what the defects were for the failures. As the pen was clear, and you could see how much red ink remained, she then joked about how the pen was an indicator of how good the system she worked on was. She’d used lots of red ink from her red pen since the start of the year, so the system wasn’t good! Aha!

An Idea

I started reading some suggestions for visualising software quality. I see two problems with most of them: firstly, most are far too complex, and secondly, most rely on capturing detailed metrics which creates overhead onto itself.

What if you could have a lo-fidelity way to visualise software quality without creating any overhead? Perfect. Enter red and green ink.

A proposal for visualising software quality using red and green ink

Let me start by saying that this idea is freshly baked, possibly half cooked: I haven’t even tried it and I don’t know if it’ll work at all. But I think it’s cool and that’s why I am sharing it.

Imagine you’re working in a small cross-functional team developing a piece of software. You work as the tester on the team and have varied responsibilities: work with the business analyst and SME to define acceptance criteria, work with a developer to automate these acceptance criteria, and conduct exploratory (session-based) testing on individual user stories as they are completed.

At the start of the project, you’ll need three additional things:

Two brand new matching red and green pens with clear barrels (so you can see the ink)
A ream of blank white paper: roughly A4 or A3 sized (or whatever you can get your hands on)

Now you’re ready to visualise software quality

Each story has a set amount of time allocated to it for exploratory (session-based) testing. When you are about the start an exploratory testing session, you need to grab the two the pens and a couple of blank white sheets of paper. As you test, write your thoughts on the paper in either ink: good thoughts (me likey) are in green, bad thoughts (bugs, crashes, poor design etc.) are in red.

Instant feedback on software quality

As soon as the session is complete, stick these sheets of paper on your wall, and talk to the team about them, explaining each red and green thought. The paper will instantly show what you think of the quality of the system: a predominantly green sheet is good, a predominantly red one is bad.

Longer term feedback on software quality

Over time, the ink remaining in each pen will paint a picture (excuse the pun) about the quality of your system. Are you using loads of red ink and not much green?

Thoughts?

As I mentioned, this is just an idea I recently had and I have no idea whether it’d be successful in visualising software quality. But I reckon it’d be fun.

♥ Travis CI

Alister Scott — Thu, 09 Feb 2012 00:32:21 +0000

I’ve talked previously about how cool Travis CI is, and they’re now taking donations to implement more functionality in the future. Since watir-webdriver uses Travis, as does my watir-page-helper gem and my Minesweeper Jasmine tests, I thought I’d better contribute!

When you donate you get lots of warm and fuzzies, plus you get cool stickers, some ringtones!?!, and a neat little surprise on the thank you page.

You should donate too.