Firebug Automated Test Examples

From FirebugWiki

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:

• exampleNet1.html (test page)
• exampleNet1.php (Firebug is using PHP for dynamic server parts)
• exampleNet1.js (test driver)

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. This test is composed from two files:

• exampleScript1.html (test page)
• exampleScript1.js (test driver)

See full source code here.

Here is a simplified test page code:

<button id="testButton" onclick="onExecuteTest()">Execute Test</button>
<script type="text/javascript">
function onExecuteTest()
{
    debugger;
}
</script>

And appropriate test driver code looks like as follows:

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

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

            // Asynchronously wait for break in debugger.
            var chrome = FW.Firebug.chrome;
            FBTestFirebug.waitForBreakInDebugger(chrome, 21, false, function(row)
            {
                // TODO: test code, verify UI, etc.

                // Resume debugger.
                FBTestFirebug.clickContinueButton();

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

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

A few notes:

• The overall structure (loading the test page, opening Firebug, selecting Script panel) is pretty much the same as in the first test for the Net panel.
• FBTestFirebug.waitForBreakInDebugger() waits till the script execution halts in the debugger.
• FBTestFirebug.clickContinueButton() clicks on the Resume button to resume debugger's state.
• Additional code that verifies some other aspects of the Firebug state can be within the callback.

FBTestFirebug.waitForBreakInDebugger(chrome, lineNo, breakpoint, callback)
chrome Current Firebug's chrome object.
lineNo Expected source line number where the break should happen.
breakpoint Set to true if the break should happen on a breakpoint.
callback Handler that is called when break happens.