How to navigate through html tab with casperjs - html

Question

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> <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">
General
</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">
Options
</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
Some updates and more information:
After Fanch information, I changed the casperjs to:
...
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"]');
});
...
This a.menu1itemUnSel[tabindex="4"] solved my error about changing the tab but i still have the issue with reading/changing the field generalParams.poolSize.
I even added then waitForSelector/waitForText but still get the error: Errors encountered while filling form: form not found
See casperjs:
...
casper.then(function() {
test.assertTextExists("Options", "DB Options");
this.click('a.menu1itemUnSel[tabindex="4"]');
});
casper.waitForSelector("a#dve_menu_datarepositories", function() {
this.echo("1.Loading form");
});
casper.waitForText("50", function() { //the field that i want to change has text '50'
this.echo("2.Loading form");
});
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"]');
});
...
Thanks again
Sorry i was away for a while, here is some html part of the page:
<a name="topofpage">
<form autocomplete="off" enctype="application/x-www-form-urlencoded" action="/db.do" method="post" name="dbActionForm">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr height="100%">
<td valign="top" height="100%"></td>
<td valign="top" height="100%" background="/menu3_sel_right1.png"></td>
<td class="commonfont" width="100%" valign="top" background="/menu3_sel_right1.png" align="left">
<b>
<b>
<table class="commonfont" border="0" cellspacing="0" cellpadding="0" onkeypress="return onWizardPageKeyPress(event);">
<tbody>
<tr id="generalParams.poolSize_TR" class="formpagefieldname" style="display:table-row;">
<td>
<a id="generalParams.poolSize_changeA" style="visibility:hidden;" title="Undo Change" onclick="revertSingleChange('generalParams.poolSize', false); dependantsRunOnLoad(document.body); return false;" href="javascript:;"></a>
</td>
<td>
<input type="text" onblur="if (!this.disabled) {onChangeProperty(this, false);} " onpropertychanged="if (!this.disabled) {onChangeProperty(this, false);} " onkeyup="if (!this.disabled) { onChangeProperty(this, false); }" tabindex="2" title="10" size="30" value="50" name="generalParams.poolSize"></input>
</td>
</tr>
</tbody>
</table>
</b>
</b>
I still have the problem filling in the form!
FAIL Errors encountered while filling form: form not found
# type: uncaughtError
# error: Errors encountered while filling form: form not found
Any clue more?
Thanks for your time!!!

Answer 1

Use this :
this.click('a.menu1itemUnSel[tabindex="4"]');
-> # = div, . = class