libcvautomation/writing_app_tests.html

368 lines
22 KiB
HTML
Raw Normal View History

2012-07-17 16:07:18 -04:00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>libcvautomation: Writing Application Tests</title>
<link href="doxygen.css" rel="stylesheet" type="text/css">
<link href="tabs.css" rel="stylesheet" type="text/css">
</head><body>
<!-- Generated by Doxygen 1.4.7 -->
<div class="tabs">
<ul>
<li><a href="index.html"><span>Main&nbsp;Page</span></a></li>
<li><a href="annotated.html"><span>Classes</span></a></li>
<li><a href="files.html"><span>Files</span></a></li>
<li><a href="pages.html"><span>Related&nbsp;Pages</span></a></li>
<li>
<form action="search.php" method="get">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><label>&nbsp;<u>S</u>earch&nbsp;for&nbsp;</label></td>
<td><input type="text" name="query" value="" size="20" accesskey="s"/></td>
</tr>
</table>
</form>
</li>
</ul></div>
<h1><a class="anchor" name="writing_app_tests">Writing Application Tests</a></h1><dl compact><dt><b>Author:</b></dt><dd>Bradlee Speice &lt;<a href="mailto:bspeice@uncc.edu">bspeice@uncc.edu</a>&gt; </dd></dl>
<dl compact><dt><b>Date:</b></dt><dd>7/11/2012 </dd></dl>
<h2><a class="anchor" name="audience">
Audience</a></h2>
<ul>
<li>
This document was written for people with some intermediate knowledge of BASH. </li>
<li>
Screenshot experience is required - being able to create screenshots of windows using <a href="http://www.gimp.org/">GIMP</a>, the <code>import</code> command from <a href="http://www.imagemagick.org/script/index.php">ImageMagick</a>, or something similar. <br>
</li>
<li>
Required for working with libcvautomation internals (not needed strictly for writing application testing): <ul>
<li>
Intermediate-level C knowledge required for interfacing with libcvautomation. There isn't much complicated going on with libcvautomation itself, but you need to know to use <a class="el" href="libcvautomation-xlib_8h.html#a6e348c2e829e1addb446160f54723a0">cvaOpenDisplay()</a> for grabbing a display and then <a class="el" href="libcvautomation-xlib_8h.html#1c8a205c0b2f4f7a28d1ce51d5225871">cvaCloseDisplay()</a> for closing it later for example. </li>
<li>
C++ is available, but currently only as <code>extern "C"</code> style bindings. </li>
<li>
Python bindings are in progress as of time-of-writing </li>
</ul>
</li>
</ul>
<h2><a class="anchor" name="purpose">
Purpose</a></h2>
<ul>
<li>
This document is intended to outline the libcvautomation testing library for GUI applications and its two reference programs <code>cva-match</code> and <code>cva-input</code> </li>
<li>
These programs allow you to automate mouse and keyboard events in response to what appears on screen - for example, clicking a button based on an image of that button on screen. </li>
</ul>
<h2><a class="anchor" name="using">
Using Libcvautomation</a></h2>
<ul>
<li>
Since libcvautomation is a shared-object library intended to bundle a lot of functionality in one area, we must use external programs to agin access to the functions of libcvautomation. </li>
<li>
Two reference programs have been included to make this easy - <code>cva-match</code> and <code>cva-input</code> </li>
<li>
The reference programs are fairly full-featured, and expose most of libcvautomation: <ul>
<li>
<code>cva-match</code> allows you to match multiple image files against a root image providing very fine control over how specific the match is </li>
<li>
<code>cva-input</code> allows you to drive the X11 server using the XTest extension - for example, clicking on a button from image, clicking a key on the keyboard, and more. </li>
</ul>
</li>
<li>
These two programs should implement all functionality needed for GUI automation. Please contact <a href="mailto:bspeice@uncc.edu">bspeice@uncc.edu</a> if you have suggestions for extra functionality, patches, comments, etc. </li>
<li>
Finally, if you want to write your own programs using libcvautomation, the headers are located on your system. Use: <div class="fragment"><pre class="fragment"><span class="preprocessor"> #include &lt;<a class="code" href="libcvautomation_8h.html">libcvautomation/libcvautomation.h</a>&gt;</span>
</pre></div> to include all necessary header files. See the "Files" tab above to get an idea of what functionality exists. <dl compact><dt><b>Note:</b></dt><dd>Intermediate C or C++ knowledge is required for programming with libcvautomation. C++ is currently only supported through <code>extern "C"</code>, and full C++ bindings are not currently planned. Libcvautomation itself is incredibly simple, but interfaces with a few API's (Xlib, libcv) that it is helpful to have an idea of how to use.</dd></dl>
</li>
</ul>
<h2><a class="anchor" name="testing">
Application Testing</a></h2>
Now we get into the good stuff. The basic process for application testing is as follows: <ul>
<li>
Create a sequence of screenshots for all mouse-clicks </li>
<li>
Create a testing wrapper in BASH for automating the application </li>
<li>
Test the wrapper and tune any necessary options </li>
</ul>
<h3><a class="anchor" name="screenshot_sequence">
Creating the Screenshot Sequence</a></h3>
<ul>
<li>
This process creates a set of screenshots by which libcvautomation can drive the X11 server </li>
<li>
The process is simple - create a screenshot of all buttons you would like to click in an application test, or location where you would like to move the mouse, etc. </li>
<li>
This can be accomplished a number of different ways - using GIMP, the <code>import</code> command, or any other screenshot program. Additionally, libcvautomation will support any image format that OpenCV does. At the time of writing, these are: <ul>
<li>
Windows bitmaps - <code>*.bmp</code>, <code>*.dib</code> </li>
<li>
JPEG files - <code>*.jpeg</code>, <code>*.jpg</code>, <code>*.jpe</code> </li>
<li>
JPEG 2000 files - <code>*.jp2</code> </li>
<li>
Portable Network Graphics - <code>*.png</code> </li>
<li>
Portable image format - <code>*.pbm</code>, <code>*.pgm</code>, <code>*.ppm</code> </li>
<li>
Sun rasters - <code>*.sr</code>, <code>*.ras</code> </li>
<li>
TIFF files - <code>*.tiff</code>, <code>*.tif</code> </li>
</ul>
<br>
</li>
<li>
Some tips on creating screenshots: <ul>
<li>
Use as distinct an image as possible in a screenshot. For example, the following images look very similar, but can do very different things: <div align="center">
<img src="print-printbutton1.png" alt="print-printbutton1.png">
</div>
<br>
<div align="center">
<img src="print-helpbutton.png" alt="print-helpbutton.png">
</div>
<ul>
<li>
The large amount of grey-space in each of the images can be very confusing. While the text itself is different, the overwhelming amount of grey space can result in a false positive. Limiting the space of the screenshot can be useful: <div align="center">
<img src="print-printbutton2.png" alt="print-printbutton2.png">
</div>
<br>
<div align="center">
<img src="print-helpbutton.png" alt="print-helpbutton.png">
</div>
</li>
<li>
Limiting the button size in this case helps the program identify what button you want to click, but in general you want to include as much detail as possible. </li>
</ul>
<br>
</li>
<li>
Be careful of where an image may appear multiple times in a screenshot. For example, a "Help" button on a dialog may get confused with the "Help" menu at the top of the screen. </li>
</ul>
<p>
</li>
</ul>
<h3><a class="anchor" name="testing_wrapper">
Create a Testing Wrapper</a></h3>
<ul>
<li>
This is where the BASH knowledge comes into play. We are going to write a script that will run your application test, to make sure that the GUI is functioning correctly. </li>
<li>
The following is the (strongly) recommended process, but is not strictly necessary to follow this. The way I'm going to explain this is by giving an example test I wrote, and explain what is going on: <div class="fragment"><pre class="fragment"><span class="preprocessor"> #!/bin/bash</span>
<span class="preprocessor"></span><span class="preprocessor"> #This is an application test involving libcvautomation and libreoffice</span>
<span class="preprocessor"></span> . libcvautomation_funcs
<span class="preprocessor"> #Changing any wrapper parameters should go here</span>
<span class="preprocessor"></span>
start_libreoffice_writer ()
{
click_i <span class="stringliteral">"screens/gnome-1_menu.png"</span> <span class="stringliteral">"screens/kde-1_menu.png"</span> &amp;&amp; sleep 1
click_i <span class="stringliteral">"screens/gnome-2_officeMenu.png"</span> <span class="stringliteral">"screens/kde-2_officeMenu.png"</span> &amp;&amp; sleep 1
hover_i <span class="stringliteral">"screens/gnome-3_LibreOfficeWriter.png"</span> <span class="stringliteral">"screens/kde-3_LibreOfficeWriter.png"</span>
jiggle_mouse
click
sleep 30
}
close_libreoffice_writer()
{
click_i <span class="stringliteral">"screens/gnome-4_fileMenu.png"</span> <span class="stringliteral">"screens/kde-4_fileMenu.png"</span> &amp;&amp; sleep 1
click_i <span class="stringliteral">"screens/gnome-5_fileExit.png"</span> <span class="stringliteral">"screens/kde-5_fileExit.png"</span> &amp;&amp; sleep 1
click_i <span class="stringliteral">"screens/gnome-6_discard.png"</span> <span class="stringliteral">"screens/kde-6_discard.png"</span> &amp;&amp; sleep 1
}
start_libreoffice_writer
close_libreoffice_writer
</pre></div> <br>
<div class="fragment"><pre class="fragment"><span class="preprocessor"> #!/bin/bash</span>
<span class="preprocessor"></span><span class="preprocessor"> #This is an application test involving libcvautomation and libreoffice</span>
<span class="preprocessor"></span> . libcvautomation_funcs
<span class="preprocessor"> #Changing any wrapper parameters should go here</span>
</pre></div> </li>
<li>
The purpose of these lines is just the standard BASH header. Additionally, we import a wrapper created for libcvautomation to make our job easier. Please note that the wrapper is included at the top of the source tree, you may need to copy it somewhere in order to use it. The wrapper itself is a handful of macros used to make our job easy. </li>
<li>
Changing any wrapper parameters should go after sourcing the wrapper functions. See below on <a class="el" href="writing_app_tests.html#testing_test_wrapper">Testing the Testing Wrapper</a> for more information. <br>
<br>
<div class="fragment"><pre class="fragment"> start_libreoffice_writer ()
{
click_i <span class="stringliteral">"screens/gnome-1_menu.png"</span> <span class="stringliteral">"screens/kde-1_menu.png"</span> &amp;&amp; sleep 1
click_i <span class="stringliteral">"screens/gnome-2_officeMenu.png"</span> <span class="stringliteral">"screens/kde-2_officeMenu.png"</span> &amp;&amp; sleep 1
hover_i <span class="stringliteral">"screens/gnome-3_LibreOfficeWriter.png"</span> <span class="stringliteral">"screens/kde-3_LibreOfficeWriter.png"</span>
jiggle_mouse
click
sleep 30
}
</pre></div> </li>
<li>
This is the actual body of work done by libcvautomation </li>
<li>
<code>click_i</code> is a function to click the mouse at an image - in this case, the gnome or kde menu. <ul>
<li>
Because of how the cva-input program is designed, you can give it multiple images, and it will only select the one currently available. See <a class="el" href="writing_app_tests.html#testing_test_wrapper">Testing the Testing Wrapper</a> for more information on how to use this (TOLERANCE specifically) </li>
<li>
By using the function <code>click_i</code>, we make things a bit more readable - the full command line is <code>cva-input -s 'icmouseclick &lt;filename&gt;'</code> </li>
<li>
See <a class="el" href="writing_app_tests.html#wrapper_functions">Appendix of Wrapper Functions</a> for a list of all functions available in the wrapper. </li>
</ul>
</li>
<li>
<code>hover_i</code> is a function to move the mouse to an image - in this case, move it over the LibreOffice menu item. </li>
<li>
Then we jiggle the mouse to make sure that the item activates, click, and wait for the program to start up. <br>
<br>
<div class="fragment"><pre class="fragment"> close_libreoffice_writer()
{
click_i <span class="stringliteral">"screens/gnome-4_fileMenu.png"</span> <span class="stringliteral">"screens/kde-4_fileMenu.png"</span> &amp;&amp; sleep 1
click_i <span class="stringliteral">"screens/gnome-5_fileExit.png"</span> <span class="stringliteral">"screens/kde-5_fileExit.png"</span> &amp;&amp; sleep 1
click_i <span class="stringliteral">"screens/gnome-6_discard.png"</span> <span class="stringliteral">"screens/kde-6_discard.png"</span> &amp;&amp; sleep 1
}
</pre></div> </li>
<li>
Use the <code>click_i</code> function to close down LibreOffice writer - Find the "File" menu, click "Exit", and then make sure to discard all changes. <br>
<br>
<div class="fragment"><pre class="fragment"> start_libreoffice_writer
close_libreoffice_writer
</pre></div> </li>
<li>
Actually run the functions given. <br>
<br>
</li>
<li>
Please note that this is a fairly trivial example. The full list of commands available in the wrapper is given in <a class="el" href="writing_app_tests.html#wrapper_functions">Appendix of Wrapper Functions</a> </li>
</ul>
<h3><a class="anchor" name="testing_test_wrapper">
Testing the Testing Wrapper</a></h3>
<ul>
<li>
First things first, run through the testing wrapper to make sure that everything is O.K. </li>
<li>
If you need to, some things you can do to tune the application test are as follows: <ul>
<li>
Set the <code>SEARCH_METHOD</code> <ul>
<li>
This value adjusts how libcvautomation searches for sub-images. See <a class="el" href="libcv_search_methods.html">Libcv Search Methods</a> for more information on accepted values, and how each works. </li>
</ul>
</li>
<li>
Set the <code>TOLERANCE</code> <ul>
<li>
This value adjusts how strict libcvautomation is when trying to find a sub-image. See <a class="el" href="libcv_search_methods.html">Libcv Search Methods</a> for more information on how to control how libcvautomation searches for images. </li>
</ul>
</li>
<li>
Set <code>USE_SANE_TOLERANCE</code> <ul>
<li>
This value implements a more sane way of setting the tolerance value - Where normally the tolerance ranges from <code>INT_MIN</code> to <code>INT_MAX</code>, the sane tolerance accepts values of 1 - 100 (<img class="formulaInl" alt="$ 1 \approx 0 $" src="form_9.png">, and <img class="formulaInl" alt="$ 100 \approx \c INT_MAX $" src="form_10.png">) </li>
<li>
To enable sane tolerance, set:<div class="fragment"><pre class="fragment"> USE_SANE_TOLERANCE=<span class="stringliteral">"&lt;any_value&gt;"</span>
</pre></div> </li>
<li>
To disable sane tolerance (the default) set:<div class="fragment"><pre class="fragment"> USE_SANE_TOLERANCE=<span class="stringliteral">""</span>
</pre></div> </li>
<li>
Set <code>USE_CENTER</code> <ul>
<li>
By default, the wrapper will use the center of an image as opposed to the upper-left corner to click on. To disable this behavior, set:<div class="fragment"><pre class="fragment"> USE_CENTER=<span class="stringliteral">""</span>
</pre></div> </li>
<li>
To set the behavior back to using center-based matching, set:<div class="fragment"><pre class="fragment"> USE_CENTER=<span class="stringliteral">"&lt;any_value&gt;"</span>
</pre></div> </li>
</ul>
</li>
<li>
Set the <code>OUTFILE</code> and <code>ERRFILE</code> <ul>
<li>
The application wrapper logs a whole lot of information about what it does to make debugging easy. However, to make sure that you're not overwhelmed by the output, the wrapper also directs the output to <code>/dev/null</code> by default. </li>
<li>
To redirect the output of <code>OUTFILE</code> and <code>ERRFILE</code>, set them to any file you want. For example, the following code will create a temporary file for OUTFILE and ERRFILE, and notify you of what they are: <div class="fragment"><pre class="fragment"> OUTFILE=`mktemp`
ERRFILE=`mktemp`
echo <span class="stringliteral">"OUTFILE location: $OUTFILE"</span>
echo <span class="stringliteral">"ERRFILE location: $ERRFILE"</span>
</pre></div> </li>
</ul>
</li>
</ul>
</li>
<li>
A full list of commands provided by the wrapper is available at <a class="el" href="writing_app_tests.html#wrapper_functions">Appendix of Wrapper Functions</a> </li>
</ul>
<p>
<dl compact><dt><b>Note:</b></dt><dd>These options are controlled using the testing script as demonstrated above. Any modifications to the following values should be done at the line:<div class="fragment"><pre class="fragment"><span class="preprocessor"> #Changing any wrapper parameters should go here </span>
</pre></div> </dd></dl>
</li>
</ul>
<h2><a class="anchor" name="wrapping_up">
Wrapping Up</a></h2>
<ul>
<li>
At this point you should have all the information you need to write your own application tests. The libcvautomation library and reference programs were designed to be simple and powerful, but if you invest the time to learn them and some expert BASH scripting, you can do some very complex things. <ul>
<li>
For example, integrating a <a href="http://testanything.org/wiki/index.php/Tap-functions">Test Anything Protocol</a> wrapper into your scripts as well. </li>
</ul>
</li>
<li>
If you have questions, comments, concerns, suggestions, or feedback in general, feel free to let me know at <a href="mailto:bspeice@uncc.edu">bspeice@uncc.edu</a>. </li>
</ul>
<h2><a class="anchor" name="wrapper_functions">
Appendix of Wrapper Functions</a></h2>
<div class="fragment"><pre class="fragment"> click
</pre></div> Click the mouse where it is currently located <br>
<br>
<p>
<div class="fragment"><pre class="fragment"> click_xy &lt;x-coordinate&gt; &lt;y-coordinate&gt;
</pre></div> Click the mouse on an absolute point on screen <dl compact><dt><b>Note:</b></dt><dd>The actual process is to move the mouse to the given location, then click there. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> clickr_xy &lt;x-increment&gt; &lt;y-increment&gt;
</pre></div> Click the mouse on the screen relative to where the mouse is at <dl compact><dt><b>Note:</b></dt><dd>The actual process is to move the mouse the given distance, then click there. <p>
Also, note that a positive <code>x-increment</code> moves the mouse to the right, and a positive <code>y-increment</code> moves the mouse down. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> click_i &lt;filename&gt;
</pre></div> Click the mouse on a screenshot from <code>filename</code> <dl compact><dt><b>Note:</b></dt><dd>This is affected by the <code>CENTER</code>, <code>TOLERANCE</code>, and <code>SEARCH_METHOD</code> variables. See <a class="el" href="writing_app_tests.html#testing_test_wrapper">Testing the Testing Wrapper</a> for more information on these. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> image_location &lt;filename&gt;
</pre></div> Get the location of an image on screen <dl compact><dt><b>Note:</b></dt><dd>This is affected by the <code>CENTER</code>, <code>TOLERANCE</code>, and <code>SEARCH_METHOD</code> variables. See <a class="el" href="writing_app_tests.html#testing_test_wrapper">Testing the Testing Wrapper</a> for more information on these. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> hover_xy &lt;x-coordinate&gt; &lt;y-increment&gt;
</pre></div> Move the mouse to a location on screen using absolute positioning <br>
<br>
<p>
<div class="fragment"><pre class="fragment"> hoverr_xy &lt;x-increment&gt; &lt;y-increment&gt;
</pre></div> Move the mouse to a location on screen using relative positioning <dl compact><dt><b>Note:</b></dt><dd>Note that a positive <code>x-increment</code> moves the mouse to the right, and a positive <code>y-increment</code> moves the mouse down. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> hover_i &lt;filename&gt;
</pre></div> Move the mouse to a location on screen based on screenshot <dl compact><dt><b>Note:</b></dt><dd>This is affected by the <code>CENTER</code>, <code>TOLERANCE</code>, and <code>SEARCH_METHOD</code> variables. See <a class="el" href="writing_app_tests.html#testing_test_wrapper">Testing the Testing Wrapper</a> for more information on these. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> key_str <span class="stringliteral">"&lt;string&gt;"</span>
</pre></div> Enter a string of characters on the keyboard rather than a single character at a time. <dl compact><dt><b>Warning:</b></dt><dd>This function <b>does not</b> accept key strings like "Space" as <code>key_down</code>, <code>key_up</code>, and <code>key_click</code> do. If you pass in "Space", that is exactly what will be typed. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> key_down <span class="stringliteral">"&lt;key-name&gt;"</span>
</pre></div> Press a key down and leave it down <dl compact><dt><b>Note:</b></dt><dd>This function accepts special keys like "Space" - see <a class="el" href="XTest_key_strings.html">XTest Key Strings</a> for a full list of characters allowed. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> key_up <span class="stringliteral">"&lt;key-name&gt;"</span>
</pre></div> Release a key <dl compact><dt><b>Note:</b></dt><dd>This function accepts special keys like "Space" - see <a class="el" href="XTest_key_strings.html">XTest Key Strings</a> for a full list of characters allowed. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> key_click <span class="stringliteral">"&lt;key-name&gt;"</span>
</pre></div> Press a key down and then release it immediately after <dl compact><dt><b>Note:</b></dt><dd>This function accepts special keys like "Space" - see <a class="el" href="XTest_key_strings.html">XTest Key Strings</a> for a full list of characters allowed. <br>
<br>
</dd></dl>
<div class="fragment"><pre class="fragment"> run_process <span class="stringliteral">"&lt;process-name&gt;"</span>
</pre></div> Start a process on the system, background it, and return the PID of the created process. <br>
<br>
<p>
<div class="fragment"><pre class="fragment"> is_running <span class="stringliteral">"&lt;process-name&gt;"</span>
</pre></div> <div class="fragment"><pre class="fragment"> is_running <span class="stringliteral">"&lt;process-id&gt;"</span>
</pre></div> Check if a program name or PID is currently running <hr size="1"><address style="align: right;"><small>Generated on Tue Jul 17 12:19:00 2012 for libcvautomation by&nbsp;
<a href="http://www.doxygen.org/index.html">
<img src="doxygen.png" alt="doxygen" align="middle" border="0"></a> 1.4.7 </small></address>
</body>
</html>