How to navigate through html tab with casperjs

Vote count:

0

i need your experience in casperjs! I am trying to access a web page (which is not an issue) and to navigate through a html tab. When i access the page it is by default always showing the first tab "General" but i need to switch to "Options" tab so that i can access one field that i am interested to modify the value!

Sorry, can't post images yet!

Html code:

<b>&nbsp;<b>
    <table class="commonfont" cellpadding="0" cellspacing="0" background="/tab_between.png" border="0">
        <tbody>
            <tr>
              <td><input name="" src="/tab_sel_left.png" border="0" type="image"></td>      
              <td align="center" background="/tab_sel_bg.png">
              &nbsp;
                    <a href="javascript:document.forms[0].tabIndex.value='1'-1;document.forms[0].methodCalled.value='gotoTabChange';doSubmit();" tabindex="4" class="menu1itemSel">General</a>
                &nbsp;
                </td>
              <td><input name="" src="/tab_sel_right.png" border="0" type="image"></td>
              <td width="1"></td>   
              <td><input name="" src="/tab_unsel_left.png" border="0" type="image"></td>
              <td align="center" background="/tab_unsel_bg.png">
              &nbsp;
                    <a href="javascript:document.forms[0].tabIndex.value='2'-1;document.forms[0].methodCalled.value='gotoTabChange';doSubmit();" tabindex="4" class="menu1itemUnSel">Options</a>
                &nbsp;</td>
              <td><input name="" src="/tab_unsel_right.png" border="0" type="image"></td>
              <td width="1"></td>
            </tr>
        </tbody>
    </table>
    ...
</b></b>

My casper.js file looks like this:

...
    casper.then(function() {
        test.assertTextExists("DB", "Login into DB 2");
        this.click('a#changeThis1_link');
    });

    casper.then(function() {
        test.assertTextExists("Options", "DB Options");
        this.click('a#menu1itemUnSel[tabindex="4"]');
    });

    casper.then(function() {
        test.assertTextExists("Change", "DB -Change -Step 1/2");
        this.fill('form[name="dbActionForm"]', {
          'generalParams.poolSize': '1',
        }, false);
        this.click('input[name="Apply"]');
    });
...

I just can't figure out what should this line look like:

this.click('a#menu1itemUnSel[tabindex="4"]');

since this isn't working!!!

Execution printout:

modifying DB pool size:
Test file: /target.js
# DB modify
PASS DB has the correct title
PASS login form is found
PASS Login into DB
PASS Login into DB 1
PASS Login into DB 2
PASS DB Options
FAIL Cannot dispatch mousedown event on nonexistent selector: a#menu1itemUnSel[tabindex="4"]
#    type: uncaughtError
#    error: Cannot dispatch mousedown event on nonexistent selector: a#menu1itemUnSel[tabindex="4"]
#           CasperError: Cannot dispatch mousedown event on nonexistent selector: a#menu1itemUnSel[tabindex="4"]
#               at mouseEvent (/casper.js:1323)
#               at click (/casper.js:428)
#               at /target.js:34
#               at runStep (/casper.js:1523)
#               at checkStep (/casper.js:368)
#    stack: not provided

Any clue what i am doing wrong and how can i overcome this issue?

Thanks for your time

asked 45 secs ago

user3458191

6