Acceptance Testing II - Contact Form

Acceptance test for a simple contact form in MODX


In the previous article, we created our first Acceptance test with a simple .html page. In this one we'll get our first look at Acceptance testing in MODX. We'll create the test in this article and the form in the next one.


MODX logo

This article assumes that you've installed and configured Composer, Codeception, PhpUnit, MODX, Java, WebDriver, and ChromeDriver as described in earlier articles.

Testing Forms in MODX

In the last article, we created a standalone web page (helloworld.html). Though the page was on a MODX site, MODX wasn't involved (it only launches pages when the requested URL is not found). We're going to move on to testing a simple form on a page in MODX. In this one, we'll create the acceptance test we'd like our form to pass.


Our Form

This is going to be a fairly simple contact form. It will have input fields for the user's name, email, and a message they want to send. All three fields will be required, and there will be an error message triggered by the first empty field. The message will explain that the missing field is required.

When the form is filled correctly (all three fields are filled) the user will see a message thanking them for submitting the form.


The T12_ContactFormCest.php file

Create the file by giving this command in the _build directory:

codecept generate:cest acceptance T12_ContactForm

We don't need to change anything in our configuration files, since we set up acceptance testing in the previous article. We just need the test. Here's the code (also available at GitHub, here):

<?php

class T12_ContactFormCest
{
    public function _before(AcceptanceTester $I)
    {
    }

    public function _after(AcceptanceTester $I) {
    }

    // tests
    public function testContactForm(AcceptanceTester $I)
    {
        /* Submit empty form */
        $delay = 2;
        $I->amOnPage('contactform.html');
        $I->see('To contact us');
        $I->wait($delay);
        $I->click("#submit_button");
        $I->see('Name is required');
        $I->wait($delay);

        /* Submit form with name only */
        $I->amOnPage('contactform.html');
        $I->fillField("#user_name", 'BobRay');
        $I->wait($delay);
        $I->click("#submit_button");
        $I->see('Email is required');
        $I->wait($delay);

        /* Submit form with name and email only */
        $I->amOnPage('contactform.html');
        $I->fillField("#user_name", 'BobRay');
        $I->fillField("#user_email", 'bob@hotmail.com');
        $I->wait($delay);
        $I->click("#submit_button");
        $I->see('Message is required');
        $I->wait($delay);

        /* Submit with all fields filled */
        $I->amOnPage('contactform.html');
        $I->fillField("#user_name", 'BobRay');
        $I->fillField("#user_email", 'bob@hotmail.com');
        $I->fillField("#user_msg", 'Some Message');
        $I->wait($delay);
        $I->click("#submit_button");
        $I->see('Thank you');
        $I->wait($delay);
    }
}

The first thing you'll notice is that the methods all have a parameter: AcceptanceTester $I, and we don't have to make it a class variable. Codeception sends the Actor object as a parameter to all tests.

The tests themselves are fairly obvious. The amOnPage() calls navigate to our page. The $I->fillField() fills the fields, identified by their IDs in the form. The $I->click() clicks on the submit button (again identified by ID). Finally, the $I->see() calls are assertions that check to see if that text is on the page.

There are other ways to identify text to check and things to click on which we'll see in later articles.

We set the $delay value at the top of the code for use in the $I->wait() calls later. The purpose of the wait() calls is to slow things down so you have time to see what's happening on the screen. The parameter is the number of seconds to pause. By using the $delay value, we can change the wait time to 0 once our code works, and we no longer need to watch what happens, though you sometimes need some "wait" statements to make an acceptance test work.

You can try running the test now, just to make sure it launches your browser, but all the assertions will fail because we haven't created the contact form yet.


Coming Up

In the next article, we'll create our form in the MODX Manager, so the test above will run.



For more information on how to use MODX to create a web site, see my web site Bob's Guides, or better yet, buy my book: MODX: The Official Guide.

Looking for high-quality, MODX-friendly hosting? As of May 2016, Bob's Guides is hosted at A2 hosting. (More information in the box below.)



Comments (0)


Please login to comment.

  (Login)