Running Automated Tests on Websites using Codeception

Testing some website after update or any change can be a boring task at times. Wouldn't it be great if we can automate the testing with a virtual, invisible browser robot thingy?



The other day I found a wonderful project called Codeception. It it MIT licensed, powered by PHP and has the ability to run tests on a headless virtual browser to see if some expected output came in. We can use this feature to test many things we want. For example, if you always have to test a search page, checkout page, add to cart feature etc., with Codeception you can create a bunch of commands to test these automatically. Your job then is to run these tasks and to see if they are successful. Testing is that easy!

This gives you peace of mind and a comparable test every time.

Moreover, it has special integrations for testing Laravel, WordPress, Joomla, Symfony, Yii, Zend websites. For example, it can test with an admin user for a specific output. Cool, isn't it?!

It is built on top PHPUnit so it can also do unit testing.

I tried this on my Arch Linux install, but should work on other platforms too (Win/Mac/Linux/ARM7hf).

Requirements

• PHP
• Composer
• Firefox (may not be absolutely necessary - did not test without it)
• and the rest of the things, we'll just install on the way...

The test worked without starting the Apache server, so I guess it does not need a server. If you are using xampp on Windows PHP should normally be on C:\xampp\php\php.exe. So follow this and install Composer.

Steps for testing

Go on your htdocs or www folder and create a folder. Go into that folder and open a terminal there, and run:

composer require "codeception/codeception" --dev

This will take some time. Then run:

./vendor/bin/codecept init acceptance

Choose your favorite browser. I chose firefox.
Enter the url for the website you want to test. I entered https://github.com

Then I changed "WebDriver" to "PhpBrowser" on codeception.yml. This is to run the tests without setting up Selenium Server. This is an overkill for my simple tests, so I ignored it. If you need it, go ahead and set the thing up and continue.

./vendor/bin/codecept generate:cest acceptance First

nano tests/acceptance.suite.yml

actor: AcceptanceTester

modules:
    enabled:
        - PhpBrowser:
            url: {YOUR APP'S URL}
- \Helper\Acceptance

I entered https://github.com in place of {YOUR APP'S URL}.

nano tests/acceptance/FirstCest.php

<?php

class FirstCest
{
    public function myTest(AcceptanceTester $I)
    {
        $I->wantTo('test my page');
        $I->amOnPage('/'); // go to github.com
        $I->see('Learn'); // see if the page has the word "Learn" in it
    }
}

Go to https://github.com/mozilla/geckodriver/releases/ and get the binary for your OS+architecture. For example, I downloaded Linux 64 bit. Extract and execute the binary on a terminal:

./geckodriver &

It will start a server on port 4444 so that PhpBrowser can test the output in a virtual browser.

To run the tests, just run:

./vendor/bin/codecept run --steps

It should show output like this: https://ghostbin.com/paste/ztvv2

Then I tried:

<?php

class FirstCest
{
    public function myTest(AcceptanceTester $I)
    {
        $I->wantTo('test my page');
        $I->amOnPage('/');
        $I->see('Learn');
    }
   
    public function searchTest(AcceptanceTester $I)
    {
        $I->wantTo('test search');
        $I->amOnPage('/');
        // we submit the form with a "test" search
        $I->submitForm('.js-site-search-form', array('q' => 'test'));
        $I->see('results');
    }
}

Then again:
./vendor/bin/codecept run --steps

A sample output will be like this: https://ghostbin.com/paste/k2hem

When done, I terminated the server with:

killall geckodriver

For testing WordPress installs check this link.

Have a good time with testing!

Ref:
https://codeception.com/docs/modules/WebDriver#Selenium
https://codeception.com/docs/03-AcceptanceTests
https://codeception.com
https://github.com/Codeception/Codeception/