Testing with a browser using Mink

So far, we have been able to write acceptance tests for a script, but most of you are reading this book in order to write nice and shiny web applications. How can you take advantage of acceptance tests then? It is time to introduce the second PHP tool of this chapter: Mink.

Mink is actually an extension of Behat, which adds implementations of several steps related to web browser testing. For example, if you add Mink to your application, you will be able to add scenarios where Mink will launch a browser and click or type as requested, saving you a lot of time and effort in manual testing. However, first, let's take a look at how Mink can achieve this.

Types of web drivers

Mink makes use of web drivers—that is, libraries that have an API that allows you to interact with a browser. You can send commands, such as go to this page, click on this link, fill this input field with this text, and so on, and the web driver will translate this into the correct instruction for your browser. There are several web drivers, each of them implemented following a different approach. It is for this reason that depending on the web driver, you will have some features or others.

Web drivers can be divided into two groups depending on how they work:

  • Headless browsers: These drivers do not really launch a browser; they only try to emulate one. They actually request for the web page and render the HTML and JavaScript code, so they are aware of how the page looks, but they do not display it. They have a huge benefit: they are easy to install and manage, and as they do not have to build the graphical representation, they are extremely fast. The disadvantage is that they have severe restrictions in terms of CSS and some JavaScript functionalities, especially AJAX.
  • Web drivers that launch real browsers like a user would do: These web drivers can do almost anything and are way more powerful than headless browsers. The problem is that they can be a bit tricky to install and are very, very slow—as slow as a real user trying to go through the scenarios.

So, which one should you choose? As always, it will depend on what your application is. If you have an application that does not make heavy use of CSS and JavaScript and it is not critical for your business, you could use headless browsers. Instead, if the application is the cornerstone of your business and you need to be absolutely certain that all the UI features work as expected, you might want to go for web drivers that launch browsers.

Installing Mink with Goutte

In this chapter, we will use Goutte, a headless web driver written by the same guys that worked on Symfony, to add some acceptance tests to the repositories page of GitHub. The required components of your project will be Behat, Mink, and the Goutte driver. Add them with Composer via the following commands:

$ composer require behat/behat
$ composer require behat/mink-extension
$ composer require behat/mink-goutte-driver

Now, execute the following line to ask Behat to create the basic directory structure:

$ ./vendor/bin/behat –init

The only change we will add to the FeatureContext class is where it extends from. This time, we will use MinkContext in order to get all the step definitions related to web testing. The FeatureContext class should look similar to this:

<?php

use BehatMinkExtensionContextMinkContext;

require __DIR__ . '/../../vendor/autoload.php';

class FeatureContext extends MinkContext {
}

Mink also needs some configuration in order to let Behat know which web driver we want to use or what the base URL for our tests is. Add the following information to behat.yml:

default:
  extensions:
    BehatMinkExtension:
      base_url: "https://github.com"
      sessions:
        default_session:
          goutte: ~

With this configuration, we let Behat know that we are using the Mink extension, that Mink will use Goutte in all the sessions (you could actually define different sessions with different web drivers if necessary), and that the base URL for these tests is the GitHub one. Behat is already instructed to look for the behat.yml file in the same directory that we executed it in, so there is nothing else that we need to do.

Interaction with the browser

Now, let's look at the magic. If you know the steps to use, writing acceptance tests with Mink will be like a game. First, add the following feature in feature/search.feature:

Feature: Search
  In order to find repositories
  As a website user
  I need to be able to search repositories by name

  Background:
    Given I am on "/picahielos"
    And I follow "Repositories"

  Scenario: Searching existing repository
    When I fill in "zap" for "q"
    And I press "Search"
    Then I should see "picahielos/zap"

  Scenario: Searching non-existing repository
    When I fill in "yolo" for "q"
    And I press "Search"
    Then I should not see "picahielos/yolo"

The first thing to note is that we have a Background section. This section assumes that the user visited the https://github.com/picahielos page and clicked on the Repositories link. Using I follow with some string is the equivalent of trying to find a link with this string and clicking on it.

The first scenario used the When I fill <field> with <value> step, which basically tries to find the input field on the page (you can either specify the ID or name), and types the value for you. In this case, the q field was the search bar, and we typed zap. Then, similar to when clicking on the links, the I press <button> line will try to find the button by name, ID, or value, and will click on it. Finally, Then I should see followed by a string will assert that the given string could be found on the page. In short, the test launched a browser, going to the specified URL, clicking on the Repositories link, searching for the zap repository, and asserting that it could find it. In a similar way, the second scenario tried to find a repository that does not exist.

If you run the tests, they should pass, but you will not see any browser. Remember that Goutte is a headless browser web driver. However, check how fast these tests are executed; in my laptop, it took less than 3 seconds! Can you imagine anyone performing these two tests manually in less than this time?

One last thing: having a cheat sheet of predefined Mink steps is one of the handiest things to have near your desk; you can find one at http://blog.lepine.pro/images/2012-03-behat-cheat-sheet-en.pdf. As you can see, we did not write a single line of code, and we still have two tests making sure that the website works as expected. Also, if you need to add a fancier step, do not worry; you can still implement your step definitions as we did in Behat previously while taking advantage of the web driver's interface that Mink provides. We recommend you to go through the official documentation in order to take a look at the complete list of things that you can do with Mink.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.142.199.181