Codeception, Javascript and Laravel Homestead

gistfile1.md

You can use Codeception to test Javascript, like DOM manipulations and Ajax requests. Out of the box it can manipulate DOM elements but can't execute Javascript code, like most testing frameworks. But it gives you the option to use a WebDriver, to connect to a headless browser, and mimic a user browsing your website. It gives you some options: Selenium2, ZombieJS and, the easiest to configure, PhantomJS.

This article covers the installation and usage of PhantomJS, and assumes you are using Laravel Homestead, but it will work on any relatively new Debian based distro, like Ubuntu 14.04.

###Install PhantomJS

Just run those commands to install it:

sudo apt-get update
sudo apt-get install --yes phantomjs

If you are not using Homestead, make sure you are installing PhantomJS 1.8+, because the WebDriver Wire Protocol is not available on versions below this one. You can check PhantomJS version by executing:

phantomjs -v

###Execute PhantomJS GhostDriver

While testing, Codeception will try to connect to a headless browser on port 4444, so you'll need to keep PhantomJS running. To do that open a new terminal window, execute the command below and keep that window open:

phantomjs --webdriver=4444

###Configure your Test Suite

You basically have to add the WebDriver module to your test suite:

enabled: [..., WebDriver]

And rebuild your actor classes:

vendor/bin/codecept build

You need to add some other items to properly configure the WebDriver, here's a suite with everything set:

class_name: FunctionalTester
modules:
    enabled: [Filesystem, FunctionalHelper, Laravel4, Asserts, WebDriver]
    config:
          WebDriver:
             url: 'http://application.dev/'
             browser: phantomjs
             capabilities:
                          webStorageEnabled: true

The url item was a tricky one to me, because, when you access Homestead from your physical machine (browse), you use port 8000, but inside the Homestead virtual machine you would have to use it without that port (eg: http://localhost/), but this didn't worked for me so I had to add the host name to my Homestead VM's hosts file:

127.0.0.1 application.dev

###Using It

Let's say you have a page wich requires authentication to do more stuff than simply browse it, and you have some Ajax requests built to improve user experience. Here's what you can now do:

Tell Codeception to go to a "items" page:

$I->amOnPage('/items');

It must see a particular item:

$I->seeElement('.item[data-id="1"]');

Click on an ajax link, which will redirect to the login page:

$I->click('.item[data-id="1"] .item-delete');

Tell Codeception to wait 10 seconds for a login button to appear on the page, using jQuery:

$I->waitForJs("return $('input[value=\"Sign In\"]').is(':visible');", 10);

Now it should be at /login:

$I->seeCurrentUrlEquals('/login');

Tell it to sign in:

$I->signIn();

Go to the items page:

$I->amOnPage('/items');

Check if the item element is present:

$I->seeElement('.item[data-id="1"]');

Click on a delete link:

$I->click('.item[data-id="1"] .item-delete');

Wait for the item to disappear:

$I->waitForJs("return $('.item').is(':hidden');", 10);

Reload the page, to make sure it was also removed from your database:

$I->reloadPage();

And it should not see it:

$I->dontSeeElement('.item[data-id="1"]');

Enjoy Codeception!

How can you work with Homestead DB together with Codeception. I am trying to run Codeception with GULP and I've a Homestead Database. I'm always getting this kind of error:

(Exception in Db) SQLSTATE[HY000] [2002] Can't connect to local MySQL server through socket '/Applications/MAMP/tmp/mysql/mysql.sock' (2) while creating PDO connection

Any ideas?

Thank you for creating this. It is exactly what I needed to get started with Codeception on a Laravel and AngularJS project.