One approach to UI-testing mobile views using tags

The website I’m working on is slow and steady switching its layout to a responsive design and there have been cases where I’ve thought “Hmm, it would be nice to have some sort of UI test for that scenario”. Since many of the use cases are basically more or less the same as when browsing the desktop version I had many gherkin scenarios and steps that I wanted to reuse which lead me to a solution using tags.

@MobileView
Scenario: When viewing panel in mobile view
  Given I am on the search panel page
  Then I should see the a mobile initialization button for viewing search panel
  ...

Tag implementation

Using the tag @MobileView I created two SpecFlow hooks, one is executed before a scenario tagged with the tag and one executed after.

[Binding]
public class SpecFlowHooks
{
    [BeforeScenario("MobileView")]
    public static void BeforeMobileView()
    {
        // SeleniumServer.Driver is a static reference to the shared instance of whatever IWebDriver is used
        SeleniumServer.Driver.Manage().Window.Size = new Size(481, size.Height);
    }

    [AfterScenario("MobileView")]
    public static void AfterMobileView()
    {
        SeleniumServer.Driver.Manage().Window.Maximize();
    }
}
  • marcusoftnet

    Nice Stefan!