Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
This tutorial has a new version, check it out!


Keep on Learning!

If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.

Start your All-Access Pass
Buy just this tutorial for $12.00


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


Replace XX.X with the real numbers in the file you downloaded.

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

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.

Waiting for things to happen

The autocomplete drop-down doesn’t show up instantaneously, which is why we added the wait step to our scenario. But how can we wait for things with Mink? The answer is, well, the wait function!

 * @Given /^I wait for the suggestion box to appear$/
public function iWaitForTheSuggestionBoxToAppear()

If we run the test now, it passes, but it waits a whole five seconds to be sure the auto-complete opens. This is far from ideal - if you add a few of these waits, your tests are going to slow way down.

Instead, we can add a second argument to wait, which is some JavaScript that’s run every 100 milliseconds. As soon as the JavaScript expression returns true, Mink will stop waiting. And if it takes longer than 5 seconds, it will finally give up with an error:

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

Since this JavaScript is run on your page, you can use whatever JavaScript libraries you have available. Wikipedia uses jQuery, so we can take advantage of it.

Leave a comment!

Login or Register to join the conversation
Richard Avatar
Richard Avatar Richard | posted 5 years ago

at 2:40 in your video is magically still showing the "sass" task being used in "watch" as opposed to "styles" ....


Hey Maxii!

I think you are talking about the Gulp tutorial, can you tell me which chapter has the problem?


Cat in space

"Houston: no signs of life"
Start the conversation!

What PHP libraries does this tutorial use?

// composer.json
    "require": {
        "symfony/symfony": "^2.7", // v2.7.4
        "twig/twig": "^1.22", // v1.22.1
        "sensio/framework-extra-bundle": "^3.0", // v3.0.10
        "doctrine/doctrine-bundle": "^1.5", // v1.5.1
        "doctrine/orm": "^2.5" // v2.5.1
    "require-dev": {
        "behat/mink-extension": "^2.0", // v2.0.1
        "behat/mink-goutte-driver": "^1.1", // v1.1.0
        "behat/mink-selenium2-driver": "^1.2", // v1.2.0
        "phpunit/phpunit": "^4.8" // 4.8.7