JavaScript¶

We saw earlier how Mink can be used to execute tests in a headless browser like Goutte or using a driver like Selenium2 that supports JavaScript. So how can we do this inside Behat?

Let’s start by adding another scenario. Suppose someone says:

>If you fill in the search field with “Tyran” and wait for the suggestion >box to appear, then you will see “Tyrannosaurus” in it.

This tests the search autocomplete on Wikipedia, which obviously requires JavaScript. But don’t worry about that yet, first worry about writing the scenario. Remember to use as many of our built-in definitions as possible.

Scenario: Searching for a page with autocompletion
  When I fill in the search box with "Tyran"
  And I wait for the suggestions box to appear
  Then I should see "Tyrannosaurus"

Since we’re about to use Selenium2, make sure you’ve started the Selenium2 server, which is the JAR file we downloaded earlier:

cd /path/to/downloads
java -jar selenium-server-standalone-2.XX.X.jar

To run the scenario in JavaScript, just add a javascript tag above the scenario.

@javascript
Scenario: Searching for a page with autocompletion
  # ...

When we run the test, the browser opens up, but our test doesn’t pass yet: we’re missing one very important step definition.

/**
 * @Given /^I wait for the suggestion box to appear$/
 */
public function iWaitForTheSuggestionBoxToAppear()
{
    $this->getSession()->wait(5000);
}

/**
 * @Given /^I wait for the suggestion box to appear$/
 */
public function iWaitForTheSuggestionBoxToAppear()
{
    $this->getSession()->wait(
        5000,
        "$('.suggestions-results').children().length > 0"
    );
}