Firebug Automated Test Examples

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Example: Network request in the Net panel)
Line 100: Line 100:
* <code>FBTestFirebug.enableNetPanel</code> is also asynchronous and it also reloads the page (this inline with the [[Activation]] model)
* <code>FBTestFirebug.enableNetPanel</code> is also asynchronous and it also reloads the page (this inline with the [[Activation]] model)
* <code>onRequestDisplayed</code> this function uses ''MutationRecognizer'' listener that fires when a <code>TR</code> element with ''netRow category-xhr loaded'' classes is created.
* <code>onRequestDisplayed</code> this function uses ''MutationRecognizer'' listener that fires when a <code>TR</code> 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.

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:


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.

Personal tools