From: Alex LeDonne <aledonne.listmail@...>
Date: 2006-10-27T06:18:11+09:00
Subject: Re: Watir - determine order of the controls

On 10/26/06, Patrick Spence <patrick@pkspence.com> wrote:
> I've written a ScreenScraper class that "harvests" all the HTML
> elements; textfields, checkboxes, radiobuttons, etc., from a web page
> and populates a SQL Server table. This is a process needed to fully
> automate the testing of a ASP.NET app from a data-driven approach. The
> problem is that the developers that wrote the app did not use the
> "tabindex" property on any of the controls. Had they done so, the
> ScreenScraper class could've collected that information as well and we'd
> know in what order the controls have to be populated. Although it's a
> valid test, under normal circumstances you wouldn't want to click the
> "Login" button until both a username and password are provided.
>
> My question... Is there a way to collect a list of all the controls on a
> page _in the order they appear on the screen_? I suspect drilling into
> the DOM is going to be part of the solution. Just wondering if someone
> else has run into this issue and what they did to resolve it. No sense
> in re-inventing the wheel.
>
> An alternative would be a Ruby script that records the mouse clicks as
> each control is clicked, stuffing the "taborder" into a table, or some
> such.
>
> Thanks!

I don't think this is a well-defined problem. The order in which
fields appear on screen is not deterministic with respect to the
source document; it can be affected by CSS and even by the user agent
(it's possible to have field A below field B in Firefox, but above in
Internet Explorer). Considering tables & columns, even "before" and
"after" become ambiguous... how would you order the fields in the
following HTML table, with respect to screen layout?

<form>
<table>
  <tr>
    <td><input type="text" name="field_0"/></td>
    <td rowspan=2><input type="text" name="field_center"/></td>
    <td><input type="text" name="field_R"/></td>
  </tr>
  <tr>
    <td><input type="text" name="field__"/></td>
    <td><input type="text" name="field_5"/></td>
  </tr>
</table>
</form>

You'll probably need to explicitly define dependencies based on the field names.

-Alex