Codeception Acceptance tests with Javascript

I had an issue on this old legacy site in work where I was writing a basic acceptance test where it clicks all the links in the top section of the home page. The problem was that one of the links opened another window using JavaScript. So I had to reconfigure Codeception to get it running.

There are various different drivers that codeception uses, PhpBrowser which doesn’t do JS, Selenium WebDriver does, and you have several options; you could install Selenium, chrome headless browser, or phantomjs. I chose phantomjs, as it was easiest (for me) to get up and running on a non X Server.

First up, you’ll need phantomjs. Go download it, unpack the zip, move the folder somewhere, and then symlink the bin/phantomjs to /usr/bin/phantomjs.

Next, launch phantomjs like so:

phantomjs --webdriver=4444 --ignore-ssl-errors=true --ssl-protocol=any

Now, in your YAML:

# Codeception Test Suite Configuration

# suite for acceptance tests.
# Run the following command FIRST:
# phantomjs --webdriver=4444 --ignore-ssl-errors=true --ssl-protocol=any


class_name: WebGuy
         - WebDriver
         - WebHelper
             url: 'https://USER:PASS@YOUR_URL_HERE'
             browser: phantomjs
                 acceptSslCerts: true

If you have a site using HTTP Basic Auth, put USER:PASSWORD@ in yopur URL, if not, remove it.

Now in your acceptance test, you can write:

$i->click('Nouvel abonnement');

Note that, in your Javascript, when you run the open window function, you specify a name. This is the name you use, and not the title from the HTML <head> section!

And there you have it! We can now test with javascript functionality!

Hide Magento header mini-cart window by clicking outside

This was really annoying me as I found a nice lib which worked called jquery-outside-events , which I forked onto my own Github (could be tidier/easier imho) but it wouldn’t work! The reason I think was possibly it was conflicting with Prototype JS, which Magento uses.

The $ symbol is reserved for Prototype so I found I had to replace $(‘#etc’); with jQuery(‘#etc’); Since doing that however I’ve discovered you can call $j instead of $ or jQuery.

Anyway! Here’s the code you need:

$j('body').click(function (event)
    element = $j(;
    if(element.parents('.skip-link.skip-cart').length == 1 || element.hasClass('skip-cart'))
    var parent = $j('.minicart-wrapper').parents('.skip-content');
    var link = parent.siblings('.skip-link');

    if (element.parents('.minicart-wrapper').length == 0) {

Now when you click show basket, the basket appears, but you can now click elsewhere on the page to make it close again!

Generating QR Codes

If any of you have messed around with the google chart API you may or may not have come across an issue where the image returned from Google has no mime type.  Most browsers are smart enough to not care, but we would like our headers please where at all possible. So I made a QR action in my DownloadController:

public function qrAction()
   $target = $this->getRequest()->getParam('target');
   $saveas = $this->getRequest()->getParam('save');
   $dim = $this->getRequest()->getParam('dim');
   if(!isset($dim)){$dim = 200;}

   // disable view and layout 
   $url = '';
   $params = array(
   'chs'=> $dim.'x'.$dim,

   $url .= http_build_query($params);
   header ("Content-Type: image/png");
       header("Content-Disposition: attachment; filename=$saveas.png"); 
   $content = file_get_contents($url); 
   echo $content;

As you can see, there are a couple of parameters that are accepted. Target is your target URL, and is the only required argument. A thing to note. Usually in Zend, we would usually access this like so:

However as we are adding a url as a target the forward slashes mess this up, so we’ll use the old fashioned looking way of doing it:

This will give us our QR code with PNG headers as required 🙂 we can add dimensions to the url by adding:

This will return a larger QR image. Finally, we can pass a filename to the saveas argument:

which would bring up the save as dialog as nasa.png

Have Fun with your phone!