See some examples demonstrating how an automated Firebug test can be developed. All examples are part of Firebug [http://code.google.com/p/fbug/source/browse/tests/content/testlists/firebug1.5.html test suite].

+

See some examples demonstrating how an automated Firebug test can be developed. All examples are part of Firebug [https://getfirebug.com/tests/head/firebug.html test suite].

−

+

Every test is usually composed from following parts (see [[Running Automated Test Suite#Terminology|Automated Test Suite Terminology]]), but depends on the nature of the test. Only the ''Test Driver'' is necessary for automation.

−

Every test is usually composed from following parts (see [[Running Automated Test Suite#Terminology]]), but depends on the nature of the test. Only the ''Test Driver'' is necessary for automation.

+

* Test Page (*.html; *.php) - The test page with instruction so the test can be also executed manually.

* Test Page (*.html; *.php) - The test page with instruction so the test can be also executed manually.

* The overall structure (loading the test page, opening Firebug, selecting [[Script Panel]]) is pretty much the same as in the [[#Example: Network request in the Net Panel|first test for the Net Panel]].

−

+

−

* 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.

The only goal here is to use the console object, which is done if the user (or our test-driver code) clicks the '''Execute Test''' button.

The only goal here is to use the console object, which is done if the user (or our test-driver code) clicks the '''Execute Test''' button.

−

''exampleConsoleAPI1.js''

''exampleConsoleAPI1.js''

−

<pre>

+

<source lang="javascript">

function runTest()

function runTest()

{

{

Line 282:

Line 279:

});

});

}

}

−

</pre>

+

</source>

+

=== Notes ===

−

A few notes:

+

* <code>FBTest.enableConsolePanel()</code> This method enables the [[Console Panel]], reloads the page and as soon as the page is loaded it executes the callback function.

−

* <code>FBTest.enableConsolePanel()</code> This method enables the Console panel, reloads the page and as soon as the page is loaded it executes the callback function.

+

* <code>FBTest.waitForDisplayedElement</code> Waits till a ''div'' element with classes ''logRow'' and ''logRow-log'' is created within the Console panel. The proper element is passed into the callback function as ''row'' parameter.

* <code>FBTest.waitForDisplayedElement</code> Waits till a ''div'' element with classes ''logRow'' and ''logRow-log'' is created within the Console panel. The proper element is passed into the callback function as ''row'' parameter.

See the [https://github.com/firebug/firebug/tree/master/tests/content/examples full source code].

−

<pre>

+

=== Source Code ===

+

+

<source lang="javascript">

function runTest()

function runTest()

{

{

Line 320:

Line 318:

});

});

}

}

−

</pre>

+

</source>

+

=== Notes ===

−

A few notes:

* <code>new FBTest.TaskList()</code> Create instance of a task list.

* <code>new FBTest.TaskList()</code> Create instance of a task list.

* <code>tasks.push</code> This way any number of tasks (functions) can be appended into the list. There is a ''callback'' parameter passed into every task so, the task can finish itself by executing it.

* <code>tasks.push</code> This way any number of tasks (functions) can be appended into the list. There is a ''callback'' parameter passed into every task so, the task can finish itself by executing it.

* <code>tasks.run</code> Runs all appended tasks in the order. Passed callback is called when all tasks finishes the execution.

* <code>tasks.run</code> Runs all appended tasks in the order. Passed callback is called when all tasks finishes the execution.

−

<br/>

−

−

You can also pass additional parameters to the individual tasks. See how "myValue" is used in the following example.

+

You can also pass additional parameters to the individual tasks. See how ''myValue'' is used in the following example.

−

<pre>

+

<source lang="javascript">

var tasks = new FBTest.TaskList();

var tasks = new FBTest.TaskList();

function task1(callback, myParam)

function task1(callback, myParam)

{

{

−

FBTest.ok(myParam == "myValue", "Must be

+

FBTest.ok(myParam == "myValue", "Must be 'myValue'");

}

}

Line 345:

Line 341:

FBTest.testDone("DONE");

FBTest.testDone("DONE");

});

});

−

</pre>

+

</source>

−

== Example: Command line ==

+

−

This test shows how to write a test for Firebug's command line. The test is composed from two files:

+

== Example: Command Line ==

+

This test shows how to write a test for Firebug's [[Command Line]]. The test is composed from two files:

See the [https://github.com/firebug/firebug/tree/master/tests/content/examples full source code].

+

=== Source Code ===

''exampleCommandLine1.html''<br/>

''exampleCommandLine1.html''<br/>

−

The only goal of the test page is to provide a description for manual verification of the test. See the SVN for more details.

+

The only goal of the test page is to provide a description for manual verification of the test. See the [https://github.com/firebug/firebug/tree/master/tests/content/examples repository] for more details.

−

+

''exampleCommandLine1.js''

''exampleCommandLine1.js''

−

<pre>

+

<source lang="javascript">

function runTest()

function runTest()

{

{

Line 381:

Line 378:

});

});

}

}

−

</pre>

+

</source>

+

=== Notes ===

−

A few notes:

+

* <code>FBTest.executeCommand()</code> The most important method of this test. This one executes provided expression in the [[Command Line]].

−

* <code>FBTest.executeCommand()</code> The most important method of this test. This one executes provided expression in the command line.

+

* <code>FBTest.waitForDisplayedElement</code> This method waits till the result of the expression (evaluated on the Command Line) is displayed in the [[Console Panel]]. In this test it should be: <code>3</code>.

−

* <code>FBTest.waitForDisplayedElement</code> This method waits till the result of the expression (evaluated on the command line) is displayed in the console panel. In this test it should be: <code>3</code>.

+

* In case of a test that executes more than one expression, it's effective to utilize <code>FBTest.TaskList()</code>. As an example see [https://github.com/firebug/firebug/blob/master/tests/content/commandLine/dom.js commandLine/dom.js] test-driver.

−

* In case of a test that executes more than one expression, it's effective to utilize <code>FBTest.TaskList()</code>. As an example see [http://code.google.com/p/fbug/source/browse/tests/content/commandLine/dom.js commandLine/dom.js] test-driver.

+

−

<br/>

+

Latest revision as of 01:24, 12 September 2012

See some examples demonstrating how an automated Firebug test can be developed. All examples are part of Firebug test suite.

Every test is usually composed from following parts (see Automated Test Suite Terminology), but depends on the nature of the test. Only the Test Driver is necessary for automation.

Test Page (*.html; *.php) - The test page with instruction so the test can be also executed manually.

functionrunTest(){// A message displayed within Firebug tracing console.FBTest.sysout("exampleTest.START");// A message displayed under the test within Firebug test console.FBTest.progress("This is a progress message");// VerificationFBTest.ok(true,"This is a positive verification");FBTest.ok(false,"This is a negative verification");// VerificationFBTest.compare("Expected","Expected","Compare test (positive)");FBTest.compare("Expected","Actual","Compare test (negative)");FBTest.testDone("exampleTest.DONE");}

FBTest.waitForBreakInDebugger() waits till the script execution halts in the debugger.

FBTest.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.

FBTest.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.

FBTest.enableConsolePanel() This method enables the Console Panel, reloads the page and as soon as the page is loaded it executes the callback function.

FBTest.waitForDisplayedElement Waits till a div element with classes logRow and logRow-log is created within the Console panel. The proper element is passed into the callback function as row parameter.

exampleCommandLine1.html
The only goal of the test page is to provide a description for manual verification of the test. See the repository for more details.

exampleCommandLine1.js

functionrunTest(){FBTest.sysout("examples.commandline.START");FBTest.openNewTab(basePath+"examples/exampleCommandLine1.html",function(win){FBTest.openFirebug();FBTest.enableConsolePanel(function(win){varconfig={tagName:"span",classes:"objectBox objectBox-number"};FBTest.waitForDisplayedElement("console",config,function(row){FBTest.compare("3",row.textContent,"Number 3 must be displayed");FBTest.testDone("examples.commandline.DONE");});FBTest.executeCommand("1+2");});});}