Firebug Automated Test Examples

From FirebugWiki

Revision as of 14:56, 22 December 2009

See some examples demonstrating how an automated Firebug test can be developed.

Every test is usually composed from two parts (see Running Automated Test Suite#Terminology):

• Test Page (*.html; *.php) - The test page with instruction so the test can be also executed manually.
• Test Driver (*.js) - The test driver code that automates the test and verify results.

Test file templates:

• Templates

Example: Network request in the Net panel

This test is intended to verify that a network request is properly displayed in the Net panel. The test is composed from three files:

• Test Page (exampleNet1.html)
• Network Response (exampleNet1.php, Firebug is using PHP for dynamic server parts)
• Test Driver (exampleNet1.js)

See full test source code here.

Here is simplified test page code:

<button id="testButton" onclick="onExecuteTest()">Execute Test</button>
<script type="text/javascript">
function onExecuteTest()
{
    var request = new XMLHttpRequest();
    request.open("GET", "exampleNet1.php", true);
    request.send(null);
}
</script>

The only goal here is to execute a XHR, which is done if the user (or our test-driver later) clicks the Execute Test button.

Simple response from the server:

<?php 
header("Content-Type: text/plain");
echo "Simple response";
?>

Finally, the most important part is the test-driver that automates the execution.

function runTest()
{
    FBTest.sysout("exampleNet1.START");

    // 1) Load test case page
    FBTestFirebug.openNewTab(basePath + "examples/exampleNet1.html", function(win)
    {
        // 2) Open Firebug and enable the Net panel.
        FBTestFirebug.openFirebug();
        FBTestFirebug.enableNetPanel(function(win)
        {
            // 3) Select Net panel
            var panel = FW.FirebugChrome.selectPanel("net");

            // Asynchronously wait for the request beeing displayed.
            onRequestDisplayed(function(netRow)
            {
                // TODO: test code, verify UI, etc.

                // 5) Finish test
                FBTestFirebug.testDone("exampleNet1.DONE");
            });

            // 4) Execute test by clicking on the 'Execute Test' button.
            FBTest.click(win.document.getElementById("testButton"));
        });
    });
}

function onRequestDisplayed(callback)
{
    // Create listener for mutation events.
    var doc = FBTestFirebug.getPanelDocument();
    var recognizer = new MutationRecognizer(doc.defaultView, "tr",
        {"class": "netRow category-xhr loaded"});

    // Wait for a XHR log to appear in the Net panel.
    recognizer.onRecognizeAsync(callback);
}

A few notes:

• runTest is the test entry point. It's automatically called by Firebug test harness framework). This is where the test starts and it must be part of every test.
• FBTest.getHTTPURLBase() returns base directory with all tests. All files of this test are stored within examples subdirectory.
• FBTestFirebug.openNewTab opens new tab asynchronously. This is why, the other steps are executed within a handler passed into this function.
• FBTestFirebug.enableNetPanel is also asynchronous and it also reloads the page (this inline with the Activation model)
• onRequestDisplayed this function uses MutationRecognizer listener that fires when a TR element with netRow category-xhr loaded classes is created.

Example: Break in debugger

This test is intended to verify that Firebug properly break in debugger.