Behat/Drupal Workshop

Behavior-Driven Development for Drupal with Behat

Building Websites

Implement your website according to spec.

Case Study: ITS Website Migration

UCSF's ITS Homepage
powered by Views, Context, Nodes, CCK, Blocks, Taxonomy
Migration from Drupal 6 to 7 as-is
But, where is the original site spec?!

Approach

Cover the D6 site with feature tests
Rebuild the site in D7
Migrate content over
Run the same feature tests against D7 site
Success!

What To Test

homepage [done]
common page elements (navigation, footer, banner) [done]
public views (How To, Services Lists) [todo]
exemplary node pages - [todo]

Hands-on Demo

Follow the install instructions
- Skip the steps for setting up PhantomJS
- Composer installation instructions for Windows, Mac and Linux
Grab the code from the GitHub repo
Run the tests in the web-browser

Questions? Problems?

Let's take it apart...

Configuration

Behat Configuration behat.yml

defaults

default:
  extensions:
    Behat\MinkExtension\Extension:
      base_url: http://it.ucsf.edu
      default_session: goutte
      javascript_session: selenium2
      browser_name: "firefox"
      goutte: ~
      selenium2:
        capabilities: { "browser": "firefox", "version": "14" }

Regions mapping in the Drupal extension

Drupal\DrupalExtension\Extension:
  blackbox: ~
  region_map:
    UCSF Nav: '#ucsf-nav'
    UCSF Mobile Nav: '#ucsf-nav-mobile'
    Main Nav: '#header .primary-links'
    Main Top Home Page: '#maintop'
    Main Left Home Page: '#main-left'
    Main Middle Home Page: '#main-mid'
    Main Right Home Page: '#main-right'
    Secondary Page Left Sidebar: '#sidebar-left'
    Secondary Page Left Sidebar Bottom: '#sidebar-left .block-side-bar_left_bottom'
    Secondary Page Middle Column: '#content-middle'
    Footer: '#footer'

driver-specific profiles

# Use this profile to run all tests in Firefox
browser:
  extensions:
    Behat\MinkExtension\Extension:
      default_session: selenium2

Implementation

Features

see features/homepage.feature and co.

Feature Declaration

Feature: Homepage
  In order to quickly gain an overview on the site's offerings
  As a site visitor
  I want to see primary services, tools and recent news listed on the homepage

Background (runs before each scenario)

Background:
  Given I am on the homepage

Scenario

Scenario: Main Top
  Then I should see 3 image-links in the "Main Top Home Page" region

Step Definitions

implemented in features/bootstrap/FeatureContext.php
Class extending Drupal\DrupalExtension\Context\DrupalContext
step definitions are class methods
mapping to steps via annotations and Regular Expressions in method doc blocks
find page elements via CSS or XPath selectors

<?php
    /**
     * @Then /^I should see (\d+) image-links in the "([^"]*)" region$/
     */
    public function iShouldSeeImageLinksInTheRegion($num, $region) {
        $regionObj = $this->getRegion($region);
        if (! $regionObj) {
            throw new \Exception(sprintf('Region "%s" on the page %s does not exist.', $region, $this->getSession()->getCurrentUrl()));
        }
        $regionId = $regionObj->getAttribute('id');
        $this->assertNumElements((int) $num, "#{$regionId} a > img");
    }

Learn More

Back