From Install to JS Testing
Course: BDD, Behat, Mink and other Wonderful Things Tutorial
Video not working?
It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing thegstreamer0.10-ffmpeg
gstreamer0.10-plugins-good packages.
Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.
Welcome to the magical world of Behat, my favorite library. No joke this thing is the best. Behat is about two things:
BDD, Functional Testing and... Planning a Feature???
First, functionally testing your application. Which means writing code that will open a browser, fill out a form, hit submit and verify text on the other side.
Why test your application? Well, imagine you are in charge of safety at Jurassic Park, your job is to make sure guests aren't eaten by dinosaurs. You need to be certain that the new pterodactyl exhibit that's being put in won't turn off the electric fence around the velociraptor pen. No tests? Good luck, they know how to open doors.
And second, designing your application. As developers we'll often just start coding without thinking about what we're building or how the feature will behave.
Using behavior driven development, which Behat helps you do, you'll actually plan things out beforehand.
Imagine a world where communication on your team is perfect, you always deliver exactly what your client wants, electricity on the raptor fence never goes down and chocolate ice cream is always free. Yep, that's where we're going.
Behat Docs
Over in the browser, let's surf to the Behat documentation. In this tutorial we're covering version 3, and for whatever reason when I recorded this the website still defaults to version 2.5. So double check that you are actually looking at version 3's documentation.
I've got our project, the raptor store, loaded here. This is where dinosaurs go for the newest iphone and other cool electronics. There's a homepage, an admin section and that's basically it. This store is built using a very small Symfony2 application -- but hey, don't panic if you're not using Symfony: everything here will translate to whatever you're using.
Cool, we've got a search box, let's look up some sweet Samsung products. And here are the two results we have. I want to start this whole Behat thing by testing this. Hold onto your butts, let's going to get this thing running!
Install and Configuration
Over in the terminal run composer require and instead of using behat/behat we'll grab:
behat/mink-extension and behat/mink-goutte-driver:
composer require behat/mink-extension behat/mink-goutte-driverThese are plugins for Behat and another library called Mink and they require Behat and Mink. We see the Mink library downloaded here, and the Behat library downloaded down there. So life is good!
Once you've downloaded Behat you'll have access to an executable called ./vendor/bin/behat
or just bin/behat for Symfony2 users. Running it now gives us a nice strong error:
vendor/bin/behatThat's ok because we need to run it with --init at the end just one time in
our application:
vendor/bin/behat --initThis did an underwhelming amount of things for us. It created two directories and one file.
In PhpStorm we see a features directory, a bootstrap directory and a little FeatureContext.php
file and that's all of it:
| ... lines 1 - 2 | |
| use Behat\Behat\Context\Context; | |
| use Behat\Behat\Context\SnippetAcceptingContext; | |
| ... lines 5 - 6 | |
| ... lines 8 - 10 | |
| class FeatureContext implements Context, SnippetAcceptingContext | |
| { | |
| ... lines 13 - 19 | |
| public function __construct() | |
| { | |
| } | |
| } |
While we're here, I'll add a use statement for MinkContext and make it extend that.
I'll explain that in a minute:
| ... lines 1 - 6 | |
| use Behat\MinkExtension\Context\MinkContext; | |
| ... lines 9 - 11 | |
| class FeatureContext extends MinkContext implements Context, SnippetAcceptingContext | |
| ... lines 13 - 25 |
One last bit of setup: at the root of your project create a behat.yml file. I'll paste in some
content to get us started:
| default: | |
| extensions: | |
| Behat\MinkExtension: | |
| base_url: http://localhost:8000 | |
| goutte: ~ |
When we run Behat it will looks for a behat.yml file and this tells it:
Yo! Our application lives at localhost:8000, so look for it there.
Your First Feature and Scenario
Behat is installed, let's get to writing features! In the features directory create a new file
called search.feature and we'll just start describing the search feature on the raptor store
using a language called Gherkin which you're about to see here.
| Feature: Search | |
| In order to find products dinosaurs love | |
| As a website user | |
| I need to be able to search for products | |
| ... lines 5 - 11 |
Here I'm just using human readable language to describe the search feature in general. Within
each feature we'll have many different scenarios or user flows. So let's start with
Scenario: Searching for a product that exists. Now using very natural language I'll describe
the flow.
| ... lines 1 - 5 | |
| Scenario: Search for a word that exists | |
| Given I am on "/" | |
| When I fill in "searchTerm" with "Samsung" | |
| And I press "search_submit" | |
| Then I should see "Samsung Galaxy S II" |
Don't stress out about the formatting of this, we'll cover that in detail.
The only two things that should look weird to you are searchTerm and search_submit because
they are weird. searchTerm is the name attribute of this box here, and search_submit is the
id of this button. We'll talk more about this later: I'm actually breaking some rules. But
I want to get this working as quickly as possible.
Running Behat
Ready for me to blow your mind? Just by writing this one scenario we now have a test for our app.
In the terminal run ./vendor/bin/behat and boom! It just read that scenario and actually went
to our homepage, filled in the search box, pressed the button and verified that "Samsung Galaxy"
was rendering on the next page. Why don't we see this happen? By default, it runs things using
invisible curl request instead of opening up a real browser.
Testing JavaScript
The downside to this is that if you have JavaScript on your page that this scenario depends on, it isn't going to work since this isn't actually opening up a real browser. So, how can we run this in a real browser? There are actually a bunch of different ways. The easiest is by using Selenium.
Grab another library with composer require behat/mink-selenium2-driver. You'll also need to download
the selenium server which is really easy, it's just a jar file. Click this link here under downloads
to get the Selenium Standalone Server. I already have
this, so I'm not actually going to download it.
To run things in Selenium, open a new tab in your terminal, and run the jar file that you just downloaded. For me that's
java -jar ~/Downloads/selenium-server-standalone-2.45.0.jarTip
Firefox 47.0.0 and lower is not supported at all since Selenium 3.0.0 - update Firefox
to the latest version and install the new geckodriver for it in order to use
the latest Selenium server.
This will load and run as a daemon, so it should just hang there.
Our library is done downloading and we just need to activate it in our behat.yml with the line:
| default: | |
| extensions: | |
| Behat\MinkExtension: | |
| ... lines 4 - 5 | |
| selenium2: ~ |
This gives me the option to use goutte to run the test using curl requests or Selenium to have things run in a browser. By default, this will just select goutte. So how do we make it use Selenium? I'm so glad you asked!
Above the scenario that you want to run in Selenium add @javascript:
| ... lines 1 - 5 | |
| @javascript | |
| Scenario: Search for a word that exists | |
| ... lines 8 - 12 |
And that's it. Go back to the terminal and let's rerun this test. It actually opens the browser, it's quick but you can see it clicking around to complete the scenario. Cool!
Tip
FireFox is buggy with the new Selenium 3 server that's why it's preferable to use Google Chrome.
You can explicitly specify the browser in the behat.yml config file:
# behat.yml
default:
extensions:
Behat\MinkExtension:
browser_name: chromeWe write human readable instructions and they turn into functional tests, and this just barely scratches the surface of how this will change your development. Let's keep going and figure out what's really going on here.
Leave a comment!
-
2019-02-11 weaverryan -
2019-02-09 Carlos Eduardo -
2019-01-14 Diego Aguiar -
2019-01-14 Diego Aguiar
-
2019-01-14 weaverryan
-
2019-01-14 Murad -
2019-01-14 Murad
-
2019-01-14 Victor Bocharsky -
2019-01-11 Murad
-
2019-01-11 Murad
-
2019-01-11 Victor Bocharsky
-
2019-01-11 Victor Bocharsky
-
2019-01-11 Victor Bocharsky
-
2019-01-09 Murad
-
2019-01-09 Murad
-
2019-01-09 Murad
-
2019-01-09 Victor Bocharsky
-
2019-01-08 Murad
-
2018-12-13 Victor Bocharsky
-
2018-12-12 Sergey Zaharchenko -
2018-12-11 weaverryan
-
2018-12-06 Luis Mas -
2018-09-17 Diego Aguiar
-
2018-09-16 Leora Wenger
-
2018-09-16 Leora Wenger
-
2018-09-14 Diego Aguiar
-
2018-09-13 Leora Wenger
-
2018-09-13 Diego Aguiar
-
2018-09-13 Leora Wenger
-
2018-09-13 Leora Wenger
-
2018-09-13 Diego Aguiar
-
2018-09-13 Leora Wenger
-
2018-09-13 Diego Aguiar
-
2018-09-13 Leora Wenger
-
2018-03-28 Victor Bocharsky
-
2018-03-25 Mr. ß -
2017-12-18 Diego Aguiar
-
2017-12-18 Daka
-
2017-11-10 Victor Bocharsky
-
2017-11-09 Simon Carr -
2017-11-09 Victor Bocharsky
-
2017-11-09 Simon Carr
-
2017-11-09 Victor Bocharsky
-
2017-11-08 Simon Carr
-
2017-08-21 Victor Bocharsky
-
2017-08-17 Thierno Diop -
2017-07-23 weaverryan
-
2017-07-21 Paweł
-
2017-07-03 Victor Bocharsky
-
2017-06-30 Евгений Явгель -
2017-06-30 Victor Bocharsky
-
2017-06-30 Евгений Явгель
-
2017-05-15 weaverryan
-
2017-05-15 Sergio Valije Guiadanes
-
2017-03-27 Victor Bocharsky
-
2017-03-26 UnkRec
-
2017-02-27 weaverryan
-
2017-02-27 AwesomeDeveloper -
2016-12-17 weaverryan
-
2016-12-17 James D -
2016-12-09 weaverryan
-
2016-12-07 James D
-
2016-12-05 weaverryan
-
2016-12-04 James D
-
2016-09-29 Tom NotMyRealSurname
-
2016-09-28 Victor Bocharsky
-
2016-09-27 Tom NotMyRealSurname
-
2016-09-25 weaverryan
-
2016-09-23 Thierno Diop
-
2016-09-23 weaverryan
-
2016-09-22 Thierno Diop
-
2016-09-22 Victor Bocharsky
-
2016-09-22 Thierno Diop
-
2016-09-22 Victor Bocharsky
-
2016-09-22 Thierno Diop
-
2016-09-22 Victor Bocharsky
-
2016-09-21 Thierno Diop
-
2016-07-25 Victor Bocharsky
-
2016-07-21 ciudadano82 -
2016-06-28 Viral Champanery
-
2016-06-28 Victor Bocharsky
-
2016-06-28 Viral Champanery
-
2016-06-28 Victor Bocharsky
-
2016-06-28 Viral Champanery
-
2016-06-28 Victor Bocharsky
-
2016-06-28 Viral Champanery
-
2016-06-28 Victor Bocharsky
-
2016-06-28 Viral Champanery
-
2016-05-11 weaverryan
-
2016-05-10 Russell Seymour -
2016-03-29 weaverryan
-
2016-03-28 elh
-
2016-03-13 Eduard Pleh -
2016-02-15 ShaunDychko -
2016-02-15 Daniel -
2016-02-11 weaverryan
-
2016-02-10 Daniel
-
2015-12-20 B Roeser
-
2015-12-18 B Roeser
-
2015-12-18 weaverryan
