How to test your Sylius plugins with Selenium?

At Tataragne Interactive, we’re often working on Sylius features through plugins. We use Behat with Selenium for scenarii depending on Javascript functionnalities.

Behat is an open source Behavior-Driven Development framework for PHP. BDD is a methodology for developing software through continuous example-based communication between developers and a business, which this application supports. Scenarii are written in a special format called Gherkin.

Through this blog post, you will learn how to configure your Sylius Plugin project to use Selenium. I consider that you are using the Sylius plugin skeleton.

Adding Selenium to our docker-compose configuration

First, we need to a chrome-node (or firefox) to work. We will use two containers. One for the Hub and one for the node. The Hub is the machine where all the tests will run but the code be executed on different nodes as stated on the Selenium documentation.

# docker-compose.yaml
version: '3.7'

services:
    plugin: # Your app configuration. This is not the subject here

    hub:
        image: selenium/hub:3.11.0
        ports:
            - 4444:4444
        links:
            - plugin

    chrome:
        image: selenium/node-chrome:3.11.0
        #  You can also use this image and open the  container port to one of your host port to be able to use a VNC viewer
        # image: selenium/node-chrome-debug:3.11.0
        depends_on:
            - hub
        links:
            - plugin
        environment:
            - HUB_HOST=hub
            - HUB_PORT=4444
        # ports:
        #     - 5900:5900

With this configuration, you will be able to run docker-compose up -d and use it easily with your behat.yaml configuration.

What do you need to change in behat.yml to be able to run Selenium

The changes in your Behat configuration are really simple.

First, your may change the base_url of the Behat\MinkExtension depending on what you set earlier for the app. For me, in could simply be "http://plugin:80/" to target my container on the (not secure 😅) port 80.

Secondly, you have to add your Hub host to your chrome session. Simple add a key wd_host in the selenium2configuration of your chrome session.

Thirdly, you can set javascriptEnabled to true in capabilities.

Follow the example configuration below.

Behat\MinkExtension:
    files_path: "%paths.base%/vendor/sylius/sylius/src/Sylius/Behat/Resources/fixtures/"
    base_url: "http://plugin:80/"  # Adapt this
    default_session: symfony
    javascript_session: chrome
    sessions:
        symfony:
            symfony: ~
        chrome:
            selenium2:
                browser: chrome
                wd_host: http://hub:4444/wd/hub # Add this
                capabilities:
                    browserName: chrome
                    browser: chrome
                    version: ""
                    marionette: null # https://github.com/Behat/MinkExtension/pull/311
                    javascriptEnabled: true  # Add this
                    chrome:
                        switches:
                            - "start-fullscreen"
                            - "start-maximized"
                            - "no-sandbox"

🎉🎉🎉 Your configuration is now ready 🎉🎉🎉

And as stated in this issue of SymfonyExtension, you might encounter a Session "symfony" is not registered.. You can follow the changes of the #138 Pull Request in the Refund Plugin.

I hope this blog post helped you configure your project for admin or shop scenarii within a Sylius plugin.And I wish to be able to talk about running those tests inside a Gitlab CI job in a future article. 💪