antonioribeiro/gist:96ce9675e5660c317bcc

## gistfile1.md

      
    Raw
  

              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!