Behat with JavaScript!

So we’ve covered testing without any JavaScript support in this post. While I do not recommend testing heavily with JavaScript for a few different reasons (we’ll cover them later), it is sometimes inevitable. Testing with JavaScript usually entails using technologies such as Selenium Driver or Chrome Driver to communicate to some software that can compile JavaScript and run the test on that compiled version of the page. You probably know why we would need this, because sometimes the behaviour of the page is reliant on JavaScript itself.

Alrighty then, here we go.

First, if you’re following on from the previous post Behat 101, you should have decent looking composer.json and behat.yml file. Run the following commands to get the JavaScript dependencies installed on top.

$_ composer require behat/mink-selenium2-driver --dev

This will pull in the package that allows behat to communicate with a JavaScript enabled driver. Next up is ChromeDriver.

ChromeDriver is the more stable alternative to SeleniumDriver. While SeleniumDriver is more capable than ChromeDriver and supports multiple browsers – ChromeDriver aims to deliver testing against only one browser – Chrome. This makes the driver a lot more stable than Selenium because it has a lot less to worry about. Fortunately for me – since I work with automated pipelines, all I care about is stability. This also offers the added bonus of being super fast – Why not then?

Two ways to get ChromeDriver quickly.

1) Download from the website Pay attention to the version of Chrome the driver supports and make sure you’ve got that version running.

2) Use composer to pull down the version for your OS.

$_ composer require enm1989/chromedriver

If you’re using the composer.json file from behat 101, then you’d get the binary vendor/bin/chromedriver.

Lets assume you’ve got it through composer, run the binary to fire up ChromeDriver so it starts listening to instruction we’ll send out later on using behat.

$_ vendor/bin/chromedriver

You should get something like this

Starting ChromeDriver 2.32.498537 (cb2f855cbc7b82e20387eaf9a43f6b99b6105061) on port 9515
Only local connections are allowed.

At this point, your terminal window is engaged so open up a new one leaving this one as is.


Next up – add a bit of config to your behat.yml file that allows you to run a JavaScript session. We have to add it to our Behat\MinkExtension block. Here is the complete behat.yml file. Note the javascript section at the bottom.

        - FeatureContext
        - Behat\MinkExtension\Context\MinkContext
                CURLOPT_SSL_VERIFYPEER: false
                CURLOPT_FOLLOWLOCATION: false
                CURLOPT_CERTINFO: false
                CURLOPT_TIMEOUT: 120
              ssl.certificate_authority: false
            browser: chrome
            capabilities: { "browser": "chrome", "version": "*", 'chrome': {'switches':['--start-maximized', "--headless", "--blink-settings=imagesEnabled=false", "--disable-extensions"]}}

So what is this stuff above then. All we’re interested really is the javascript section at the bottom. It enables the selenium2 extension for us which takes a browser name namely Chrome. The host is where ChromeDriver is running. Notice the port, this should match the port that chromedriver spits out when you started it. In capabilities we’ve passed in several flags to optimise running Chrome. One of particular interest is the headless driver. So when your test runs, it will execute in a headless state without interrupting your work. If you’d like you can take out the flag and see what happens!

Brilliant. We’re all set. Now lets write our first test. Create a new feature file called in hello-js.feature in the features folder outside of the bootstrap folder.

$_ touch features/hello-js.feature

Then write the following in this feature file. Pretty much the same as our first exercise, just tag the script with the @javascript tag.

  In order to try out some basic testing tactics
  As a developer
  I want to try out an automated test against wikipedia

  Scenario: Homepage has wikipedia on it.
    Given I am on "/wiki/Main_Page"         
    Then I should see "Wikipedia"

Viola! Run the test now and be amazed!

$_ vendor/bin/behat features/hello-js.feature

Handle failures like a pro >>

You may also like...

3 Responses

  1. Demetra says:

    It works quite well for me

  2. Brock says:

    I like the article

  3. Edward says:

    Thanks for the terrific article

Leave a Reply