Looking for a help

I am automating a web application developed on ajax framework. I am trying to automate it using WWW::Scripter package.

index.htm is the first page we get after signin. This index.htm has the save button.

This index.htm provide links to all sub page (e.g. datetimeConf.htm). At subpage (datetimeConf.htm), we can submit data and then press the Save button (belongs to index.htm) file.

Here is a sample content of index.htm file 

    <?xml version="1.0" encoding="utf-8" standalone="no"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://w
+ww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
+>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ut
+f-8"/>
        <link rel="stylesheet" href="css/main_page.css" type="text/css
+"/>
        <link rel="stylesheet" href="css/page_content.css" type="text/
+css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
    
        <script type="text/javascript" src="js/util.js"></script>
        <script type="text/javascript" src="js/main_page.js"></script>
        <script type="text/javascript" src="js/page_content.js"></scri
+pt>
        <meta http-equiv="Cache-Control" content="no-cache"/>
        <meta http-equiv="Pragma" content="no-cache"/>
        <meta http-equiv="Expires" content="0"/>
      </head>
    ......
          <ul>
                <li src="datetimeConf.htm">
                  <a href="javascript:;">
                    <span textId="59"> </span>
    
                  </a>
                </li>
    .......
           <div id="buttonContent" class="button-group">
              <button class="button gray medium" onclick="submitForm()
+">Save</button>
              <button class="button gray medium" onclick="viewModifica
+tions()">View Modifications</button>
            </div>
          </div>
    
          <div id="supp-info">
            <ul class="tree">
              <li>
                <a href="javascript:;" class="selected">Description</a
+>
                <ul>
                  <li>
                    <div style="height:130px; overflow-y: scroll;"/>
                  </li>
    
                </ul>
              </li>
              <li>
                <a href="javascript:;">Field Help</a>
              </li>
              <li>
                <a href="javascript:;">Configured Source Values</a>
              </li>
    
            </ul>
          </div>
        </div>
        <div id="modalDialog"> </div>
        <div id="darken"> </div>
        <span id="showStartPage" style="display:none;">
    
        </span>
        <div class="popup" id="popupdlg" style="display:none">
    
          <div class="top-bar">
            <img src="images/popup_close.png" width="16" height="16" a
+lign="right" class="popup-closer"/>
          </div>
          <div class="popup-content">
            <p>
          </div>
          <div class="btn-popup-actions">
            <p>
          </div>
    
        </div>
        <iframe name="tgtframe" id="tgtframe"></iframe>
      </body>
    </html>

[download]
Here is the sample content of datetimeConf.htm file 
    <?xml version="1.0" encoding="utf-8" standalone="no"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://w
+ww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
+>
      <body>
        <span id="pageHelp">
          <span pageHelpId="10"> </span>
        </span>
        <form id="CoreDateTime" method="post" action="form-submit" enc
+type="application/x-www-form-urlencoded">
          <h1>
            <span textId="57"> </span>
          </h1>
          <div id="section">
            <p class="section">
              <img src="images/icon_plus.gif"/>
              <strong>
                <span textId="67"> </span>
              </strong>
            </p>
            <div>
              <table>
                <tr>
                  <td>
                    <span textId="257"> </span>
                  </td>
                  <td>
                    <select name="829" helpId="8" isRebootRequired="fa
+lse" paramName="lcl.datetime.time.24HourClock" default="0">
                      <option value="1">24</option>
                      <option value="0" selected="selected">12 AM/PM</
+option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td>
    .......
          </div>
        </form>
        <div id="notemsgs" style="width:100%">
          <p>
        </div>
        <div class="button-group">
          <button class="button gray medium" onclick="resetToDefaults(
+)">Reset to Default</button>
          <button class="button gray medium" onclick="resetForm()">Can
+cel</button>
        </div>
      </body>
    </html>

[download]
Here is my perl code to automate it. Here I am trying to automate the following scenario. I will set some value in datetimeConf.htm and save these details by calling submitForm(). 
use strict;
use warnings;

    use HTTP::Cookies;
    use MIME::Base64;
    use WWW::Scripter;
    
    my $cookie_jar = HTTP::Cookies->new();
    
    my $wi = WWW::Scripter->new(cookie_jar => $cookie_jar);
    $wi->use_plugin('Ajax');
    $wi->credentials($loginUser, $loginPass);
    
    $wi->open("http://$ip/index.htm");
    $wi->open ("datetimeConf.htm", "tgtframe", , 0);
    $wi->get('javascript:document.getElementsByName("829")[0].value=1;
+');
    $wi = $wi->parent();
    $wi->get ('javascript:submitForm()');

[download]
When I am trying this way, I am getting following error message. 
TypeError: undefined has no properties, not even one named value at li
+ne 1.
TypeError: undefined has no properties, not even one named value at li
+ne 1.
Error: Can't locate object method "style" via package "JE::Object::Pro
+xy" at C:/Perl/site/lib/CSS/DOM.pm line 155.

[download]
I am using JE as the javascript Engine and os is windows.

You help will be highly appreciated. I am fine to use some other package if WWW::Scripter does not suites. Please let me know if you need the full content of htm files.

In reply to Automating ajax using WWW::Scripter having frame by Anonymous Monk

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.