Rio das Ostras, Brazil, 06/2010

Codeception, Javascript and Laravel Homestead

22 July 2014

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. <h3>Install PhantomJS</h3> Just run those commands to install it: <pre class="prettyprint"><code >sudo apt-get update sudo apt-get install --yes phantomjs </code></pre> 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: <pre class="prettyprint"><code >phantomjs -v </code></pre> <h3>Execute PhantomJS GhostDriver</h3> 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: <pre class="prettyprint"><code >phantomjs --webdriver=4444 </code></pre> <h3>Configure your Test Suite</h3> You basically have to add the <code class="spancode">WebDriver</code> module to your test suite: <pre class="prettyprint"><code >enabled: [..., WebDriver] </code></pre> And rebuild your actor classes: <pre class="prettyprint"><code >vendor/bin/codecept build </code></pre> You need to add some other items to properly configure the WebDriver, here's a suite with everything set: <pre class="prettyprint"><code >class_name: FunctionalTester modules: enabled: [Filesystem, FunctionalHelper, Laravel4, Asserts, WebDriver] config: WebDriver: url: 'http://application.dev/' browser: phantomjs window_size: 1280x720 capabilities: webStorageEnabled: true </code></pre> The <code class="spancode">url</code> 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 <code class="spancode">hosts</code> file: <pre class="prettyprint"><code >127.0.0.1 application.dev </code></pre> <h3>Using It</h3> 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: <pre class="prettyprint"><code >$I->amOnPage('/items'); </code></pre> It must see a particular item: <pre class="prettyprint"><code >$I->seeElement('.item[data-id="1"]'); </code></pre> Click on an ajax link, which will redirect to the login page: <pre class="prettyprint"><code >$I->click('.item[data-id="1"] .item-delete'); </code></pre> Tell Codeception to wait 10 seconds for a login button to appear on the page, using jQuery: <pre class="prettyprint"><code >$I->waitForJs("return $('input[value=\"Sign In\"]').is(':visible');", 10); </code></pre> Now it should be at <code class="spancode">/login</code>: <pre class="prettyprint"><code >$I->seeCurrentUrlEquals('/login'); </code></pre> Tell it to sign in: <pre class="prettyprint"><code >$I->signIn(); </code></pre> Go to the items page: <pre class="prettyprint"><code >$I->amOnPage('/items'); </code></pre> Check if the item element is present: <pre class="prettyprint"><code >$I->seeElement('.item[data-id="1"]'); </code></pre> Click on a delete link: <pre class="prettyprint"><code >$I->click('.item[data-id="1"] .item-delete'); </code></pre> Wait for the item to disappear: <pre class="prettyprint"><code >$I->waitForJs("return $('.item').is(':hidden');", 10); </code></pre> Reload the page, to make sure it was also removed from your database: <pre class="prettyprint"><code >$I->reloadPage(); </code></pre> And it should not see it: <pre class="prettyprint"><code >$I->dontSeeElement('.item[data-id="1"]'); </code></pre> Enjoy Codeception!