Firebug Automated Test Examples

From FirebugWiki
Revision as of 06:55, 22 December 2009 by Honza (Talk | contribs) (Example: Network request in the Net panel)

Jump to: navigation, search

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:

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();"GET", "exampleNet1.php", true);

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:

header("Content-Type: text/plain");
echo "Simple response";

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

function runTest()

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

            // Asynchronously wait for the request beeing displayed.
                // TODO: test code, verify UI, etc.

                // 5) Finish test

            // 4) Execute test by clicking on the 'Execute Test' button.

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.

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.