12 - Defining Page Files Using Developer's Tools

Defining Page Files Using Developer Tools

Defining these newly created Page files will require using the developer tools we installed or enabled in a previous tutorial.  These are crucial to quickly navigating around the HTML code, so if you have not installed or enabled them, please return to Installing Developer Tools and follow the instructions there.

While it may seem confusing at first, using developer tools is the quickest way to navigate around the HTML and CSS.

Defining these Page files, however, begins just like any other:

1. Click on Pages at the top of the screen.

2. Click on CONTACT in the left sidebar.

3. Click on the First Name Text Field entry to expand it.

4. Open a new tab or window in your browser.

5. Navigate to http://janovasoftware.com/contact.php

6. Right-click on the first name text field

7. Click on Inspect Element (with Firebug.)

8. The bottom of the screen will display the type and identifier for this element.

9. In this case, it is an INPUT with an ID of “element_1_1”. INPUT identifies the element as a Text Field

10. Navigate back to the Janova application.

11. Set the Element Type to “Text Field”.

12. Set the Location method as “id”.

13. Enter “element_1_1” for the Location String.

14. Click Save Element.

Using Inspect Element to determine the Element Type and Location Method of an element is no more difficult than that, right-clicking on the element in question and entering its information into the Page file.

If you would like to ensure that you made no errors, you can run the test now by clicking on either Queue This Scenario or Queue This Feature.  If you have followed the tutorials to this point, running the Feature should produce a results page that looks like this:

To learn more about verifying select lists with specific options, follow along to the next tutorial, Verifying Element Attributes and Labels.