WebKitSite/quality/reduction.html

   1 <?php
   2     $title = "Test Case Reduction";
   3     include("../header.inc");
   4 ?>
   5     <h2>Test Case Reduction</h2>
   6
   7     <h3>A general guide to test case reduction</h3>
   8     <p>
   9         The basic idea behind bug reduction is to take a page that demonstrates a problem and
  10         remove as much content as possible while still reproducing the original problem.
  11     </p>
  12
  13     <h4>Why is this needed?</h4>
  14     <p>
  15         A reduced test case can help identify the central problem on the
  16         page by eliminating irrelevant information, i.e., portions of the HTML
  17         page&rsquo;s structure that have nothing to do with the problem.
  18         With a reduced test case, the development team will spend
  19         less time identifying the problem and more time determining the
  20         solution. Also, since a site can change its content or design, the
  21         problem may no longer occur on the real-world site.
  22         By constructing a test case you can capture the initial problem.
  23     </p>
  24
  25     <h4>The first steps</h4>
  26     <p>
  27         Really the first step in reducing a page is to identify that main
  28         problem of the page. For example:
  29         <ul>
  30             <li>Does the page have text overlapping an image? </li>
  31             <li>Is there a form button that fails to work?</li>
  32             <li>Is there a portion of the page missing or misaligned?</li>
  33         </ul>
  34
  35     <p>
  36         After you have made this determination, you need to create a local copy
  37         of the page created from the page source window. After saving this
  38         source, it&rsquo;s a good idea to put a <code>&lt;BASE&gt;</code> element in the
  39         <code>HEAD</code> so that any images/external style sheet or scripts that use a
  40         relative path will get loaded. After the <code>BASE</code> element has been added,
  41         load the local copy into the browser and verify that problem is still
  42         occurring. In this case, let&rsquo;s assume the problem is still present.
  43     </p>
  44
  45     <h4>Work from top to bottom</h4>
  46     <p>
  47         In general, it&rsquo;s best to start from the top of the <code>&lt;DOCTYPE&gt;</code> and
  48         work down through the <code>HEAD</code> to the <code>BODY</code> element. Take a look at the HTML
  49         file in a text editor and view what types of elements are present in the
  50         <code>&lt;head&gt;</code>. Typically, the <code>HEAD</code> will include the <code>&lt;title&gt;</code>
  51         element, which is required, and elements such as <code>&lt;link&gt;</code>,
  52         <code>&lt;style&gt;</code> and <code>&lt;script&gt;</code>.
  53     </p>
  54     <p>
  55         The reduction process is to remove one element at a time, save, and reload the
  56         test case. If you have removed the element and the page is still
  57         displaying the problem, continue with the next element. If removing an
  58         element in the <code>HEAD</code> causes the problem to not occur, you may have found
  59         one piece of the problem. Re-add this element back into the <code>HEAD</code>,
  60         reload the page and confirm the problem is still occurring and move
  61         on to the next element in the <code>HEAD</code>.
  62     </p>
  63
  64     <h4>Finished the <code>HEAD</code>? Continue with the <code>BODY</code>!</h4>
  65     <p>
  66         Once the <code>HEAD</code> element has been reduced, you need to start reducing
  67         the number of required elements in the <code>BODY</code>. This will tend to be the
  68         most time consuming since hundreds (thousands) of elements will be
  69         present. The general practice is start removing elements by both their
  70         <code>&lt;start&gt;</code> and <code>&lt;/end&gt;</code> elements. This is especially true for
  71         tables, which are frequently nested. You can speed up this process by
  72         selecting groups of elements and removing them but ideally you need to
  73         save and reload the test case each time to verify the problem is
  74         happening.
  75     </p>
  76
  77     <h4>Another method</h4>
  78     <p>
  79         Another way to help you identify unnecessary elements is to temporarily
  80         deselect the option &ldquo;Enable Javascript&rdquo; in Safari preferences. If you turn this option
  81         off and loading your test case still reproduces the problem, then any
  82         script elements that are present can be removed since they are not a
  83         factor in this issue. Let&rsquo;s say that you have reduced the page down to
  84         a nested table with an ordered list with an <code>&lt;link&gt;</code> element that need
  85         to be present. It&rsquo;s good practice to identify that CSS rule that is
  86         being in the external file and add it directly to the test case. Create
  87         a <code>&lt;style&gt;</code> <code>&lt;/style&gt;</code> in the head and copy/paste the contents
  88         of the .css file into this style element. Remove the <code>&lt;link&gt;</code> and
  89         save the changes. Load the test case and verify the problem is still
  90         occurring. Now manually delete or comment out each CSS rule until you
  91         have just the required set of rules to reproduce.
  92     </p>
  93
  94     <h4>Adding to the bug</h4>
  95     <p>
  96         When you&rsquo;ve finished your reduction, you should add it to the bug. It&rsquo;s quite likely
  97         that in the process of reducing, you have found the root cause of the problem, so
  98         you are able to set the right component. Don&rsquo;t forget to add the <code>HasReduction</code> keyword to the bug
  99         (and remove the <code>NeedsReduction</code> keyword, if present). If you do not have the rights to change
 100         the component or the keywords, read about how to get them in this <a href="bugzilla.html">document
 101         about Bugzilla</a>.
 102     </p>
 103
 104     <h4>Ready to begin?</h4>
 105     <p>
 106         In addition to providing reductions for bugs that you&rsquo;ve found, you can help
 107         by reducing any of the <a href="/needs-reduction">bugs in Bugzilla tagged
 108         with the <code>NeedsReduction</code> keyword</a>.
 109     </p>
 110 <?php include("../footer.inc"); ?>