We are trying to implement Test Automation and one key point is to ensure each HTML element has a unique ID (that we can always rely upon in our Test Automation scripts for element identification).
[FONT=Calibri, sans-serif][SIZE=2]We have found an issue ... when we have two Smart GTW components, one nested inside another, and we assign a debugId to the inner one, the nested component doesn't get the Id and an extra div is created by the end of the page instead (See case1). [/SIZE][/FONT]
[FONT=Calibri, sans-serif][SIZE=2]However, it works fine when not nested inside another component (case 2). [/SIZE][/FONT]
We have tested behaviour with Smart GWT 4.0.0.1
[FONT=Calibri, sans-serif][SIZE=2]Case 1:
final DynamicForm form = new DynamicForm();
IButton button = new IButton("Hello");
button.ensureDebugId("BUTTON_ID_DEBUG");
RootPanel.get("formContainer").add(form);
form.addChild(button); [/SIZE][/FONT]
[FONT=Calibri, sans-serif][SIZE=2]<!DOCTYPE html>
<html>
<head>
<body>
<iframe id="__gwt_historyFrame"
style="position: absolute; width: 0; height: 0; border: 0"
tabindex="-1" src="javascript:''">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
<noscript>
<div
style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled in order for this
application to display correctly.</div>
</noscript>
<h1>Web Application Starter Project</h1>
<table align="center">
<tbody>
<tr>
<td style="font-weight: bold;" colspan="2">Please enter your
name:</td>
</tr>
<tr>
<td id="formContainer">
<div id="isc_DynamicForm_0_wrapper">
<div id="isc_4" class="normal"
onscroll="return isc_DynamicForm_0.$lh()"
style="position: relative; left: 0px; top: 0px; width: 100px; height: 22px; z-index: 200036; -moz-box-sizing: border-box; overflow: hidden;"
eventproxy="isc_DynamicForm_0">
<div id="isc_5"
style="POSITION: relative; VISIBILITY: inherit; Z-INDEX: 200036; CURSOR: default;"
eventproxy="isc_DynamicForm_0">
<form id="isc_6" style="margin-bottom: 0px;"
onreset="isc_DynamicForm_0.resetValues(); return false;"
onsubmit="return isc_DynamicForm_0.$10d()"
enctype="application/x-www-form-urlencoded" action="#"
method="POST">
<table id="isc_7" width="100" cellspacing="0" cellpadding="2"
border="0">
<tbody></tbody>
<colgroup>
<col width="100">
<col width="20">
</colgroup>
<tbody>
<tr>
<td class=""
style="margin: 0px; border: 0px; padding: 0px; background-image: none; background-color: transparent; height: 0px; overflow: hidden; padding: 0px;"></td>
<td class=""
style="margin: 0px; border: 0px; padding: 0px; background-image: none; background-color: transparent; height: 0px; overflow: hidden; padding: 0px;"></td>
</tr>
</tbody>
</table>
</form>
<div id="isc_0" onscroll="return isc_IButton_0.$lh()"
style="position: absolute; left: 4px; top: 0px; width: 92px; height: 22px; z-index: 200019; -moz-box-sizing: border-box; overflow: hidden;"
tabindex="-1"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0_label,true);"
onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_0_label,true);"
eventproxy="isc_IButton_0">
<div id="isc_3" class="stretchImgButton"
onscroll="return isc_IButton_0.$lh()"
style="POSITION: relative; LEFT: 0px; TOP: 0px; WIDTH: 100px; HEIGHT: 22px; Z-INDEX: 200018; -moz-box-sizing: border-box; -moz-outline-offset: 0px; OVERFLOW: -moz-scrollbars-none;"
tabindex="1050"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0,true);"
onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_0,true);"
eventproxy="isc_IButton_0">
<div id="isc_2"
style="POSITION: relative; VISIBILITY: inherit; Z-INDEX: 200018; CURSOR: pointer;"
eventproxy="isc_IButton_0"></div>
</div>
</div>
</div>
</td>
<td id="buttonContainer"></td>
</tr>
<tr>
</tbody>
</table>
<iframe id="gwttest3" src="javascript:''"
style="position: absolute; width: 0px; height: 0px; border: medium none;"
tabindex="-1">
<table cellpadding="81"
style="position: absolute; left: 0px; top: -2000px;">
<tbody>
<tr>
<td id="isc_cellStyleTester" class="normal"></td>
<td id="isc_cellNoStyleTester"></td>
</tr>
</tbody>
</table>
<div id="isc_styleTester" class="normal"
style="position: absolute; left: 0px; top: -2000px;"></div>
<div id="gwt-debug-BUTTON_ID_DEBUG"></div>
</body>
</html>
Case 2 :
final DynamicForm form = new DynamicForm();
IButton button = new IButton("Hello");
button.ensureDebugId("BUTTON_ID_DEBUG");
RootPanel.get("formContainer").add(form);[/SIZE][/FONT]
[FONT=Calibri, sans-serif][SIZE=2]<!DOCTYPE html>
<html>
<head>
<body>
<iframe id="__gwt_historyFrame"
style="position: absolute; width: 0; height: 0; border: 0"
tabindex="-1" src="javascript:''">
<noscript>
<div
style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled in order for this
application to display correctly.</div>
</noscript>
<h1>Web Application Starter Project</h1>
<table align="center">
<iframe id="gwttest3" src="javascript:''"
style="position: absolute; width: 0px; height: 0px; border: medium none;"
tabindex="-1">
<table cellpadding="81"
style="position: absolute; left: 0px; top: -2000px;">
<div id="isc_styleTester" class="normal"
style="position: absolute; left: 0px; top: -2000px;"></div>
<div id="gwt-debug-BUTTON_ID_DEBUG">
<div id="isc_3" class="stretchImgButton"
onscroll="return isc_IButton_0.$lh()"
style="POSITION: relative; LEFT: 0px; TOP: 0px; WIDTH: 100px; HEIGHT: 22px; Z-INDEX: 200018; -moz-box-sizing: border-box; -moz-outline-offset: 0px; OVERFLOW: -moz-scrollbars-none;"
tabindex="1050"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0,true);"
onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_0,true);"
eventproxy="isc_IButton_0">
<div id="isc_2"
style="POSITION: relative; VISIBILITY: inherit; Z-INDEX: 200018; CURSOR: pointer;"
eventproxy="isc_IButton_0"></div>
</div>
<div id="isc_0" onscroll="return isc_IButton_0.$lh()"
style="position: absolute; left: 14px; top: 198px; width: 92px; height: 22px; z-index: 200019; -moz-box-sizing: border-box; overflow: hidden;"
tabindex="-1"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0_label,true);"
onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_0_label,true);"
eventproxy="isc_IButton_0">
<div id="isc_1"
style="POSITION: relative; VISIBILITY: inherit; Z-INDEX: 200019; CURSOR: default;"
eventproxy="isc_IButton_0"></div>
</body>
</html>[/SIZE][/FONT]
[FONT=Calibri, sans-serif][SIZE=2]We have found an issue ... when we have two Smart GTW components, one nested inside another, and we assign a debugId to the inner one, the nested component doesn't get the Id and an extra div is created by the end of the page instead (See case1). [/SIZE][/FONT]
[FONT=Calibri, sans-serif][SIZE=2]However, it works fine when not nested inside another component (case 2). [/SIZE][/FONT]
We have tested behaviour with Smart GWT 4.0.0.1
[FONT=Calibri, sans-serif][SIZE=2]Case 1:
final DynamicForm form = new DynamicForm();
IButton button = new IButton("Hello");
button.ensureDebugId("BUTTON_ID_DEBUG");
RootPanel.get("formContainer").add(form);
form.addChild(button); [/SIZE][/FONT]
[FONT=Calibri, sans-serif][SIZE=2]<!DOCTYPE html>
<html>
<head>
<body>
<iframe id="__gwt_historyFrame"
style="position: absolute; width: 0; height: 0; border: 0"
tabindex="-1" src="javascript:''">
<html>
<head>
</head>
<body>
</body>
</html>
</iframe>
<noscript>
<div
style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled in order for this
application to display correctly.</div>
</noscript>
<h1>Web Application Starter Project</h1>
<table align="center">
<tbody>
<tr>
<td style="font-weight: bold;" colspan="2">Please enter your
name:</td>
</tr>
<tr>
<td id="formContainer">
<div id="isc_DynamicForm_0_wrapper">
<div id="isc_4" class="normal"
onscroll="return isc_DynamicForm_0.$lh()"
style="position: relative; left: 0px; top: 0px; width: 100px; height: 22px; z-index: 200036; -moz-box-sizing: border-box; overflow: hidden;"
eventproxy="isc_DynamicForm_0">
<div id="isc_5"
style="POSITION: relative; VISIBILITY: inherit; Z-INDEX: 200036; CURSOR: default;"
eventproxy="isc_DynamicForm_0">
<form id="isc_6" style="margin-bottom: 0px;"
onreset="isc_DynamicForm_0.resetValues(); return false;"
onsubmit="return isc_DynamicForm_0.$10d()"
enctype="application/x-www-form-urlencoded" action="#"
method="POST">
<table id="isc_7" width="100" cellspacing="0" cellpadding="2"
border="0">
<tbody></tbody>
<colgroup>
<col width="100">
<col width="20">
</colgroup>
<tbody>
<tr>
<td class=""
style="margin: 0px; border: 0px; padding: 0px; background-image: none; background-color: transparent; height: 0px; overflow: hidden; padding: 0px;"></td>
<td class=""
style="margin: 0px; border: 0px; padding: 0px; background-image: none; background-color: transparent; height: 0px; overflow: hidden; padding: 0px;"></td>
</tr>
</tbody>
</table>
</form>
<div id="isc_0" onscroll="return isc_IButton_0.$lh()"
style="position: absolute; left: 4px; top: 0px; width: 92px; height: 22px; z-index: 200019; -moz-box-sizing: border-box; overflow: hidden;"
tabindex="-1"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0_label,true);"
onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_0_label,true);"
eventproxy="isc_IButton_0">
<div id="isc_3" class="stretchImgButton"
onscroll="return isc_IButton_0.$lh()"
style="POSITION: relative; LEFT: 0px; TOP: 0px; WIDTH: 100px; HEIGHT: 22px; Z-INDEX: 200018; -moz-box-sizing: border-box; -moz-outline-offset: 0px; OVERFLOW: -moz-scrollbars-none;"
tabindex="1050"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0,true);"
onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_0,true);"
eventproxy="isc_IButton_0">
<div id="isc_2"
style="POSITION: relative; VISIBILITY: inherit; Z-INDEX: 200018; CURSOR: pointer;"
eventproxy="isc_IButton_0"></div>
</div>
</div>
</div>
</td>
<td id="buttonContainer"></td>
</tr>
<tr>
</tbody>
</table>
<iframe id="gwttest3" src="javascript:''"
style="position: absolute; width: 0px; height: 0px; border: medium none;"
tabindex="-1">
<table cellpadding="81"
style="position: absolute; left: 0px; top: -2000px;">
<tbody>
<tr>
<td id="isc_cellStyleTester" class="normal"></td>
<td id="isc_cellNoStyleTester"></td>
</tr>
</tbody>
</table>
<div id="isc_styleTester" class="normal"
style="position: absolute; left: 0px; top: -2000px;"></div>
<div id="gwt-debug-BUTTON_ID_DEBUG"></div>
</body>
</html>
Case 2 :
final DynamicForm form = new DynamicForm();
IButton button = new IButton("Hello");
button.ensureDebugId("BUTTON_ID_DEBUG");
RootPanel.get("formContainer").add(form);[/SIZE][/FONT]
[FONT=Calibri, sans-serif][SIZE=2]<!DOCTYPE html>
<html>
<head>
<body>
<iframe id="__gwt_historyFrame"
style="position: absolute; width: 0; height: 0; border: 0"
tabindex="-1" src="javascript:''">
<noscript>
<div
style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled in order for this
application to display correctly.</div>
</noscript>
<h1>Web Application Starter Project</h1>
<table align="center">
<iframe id="gwttest3" src="javascript:''"
style="position: absolute; width: 0px; height: 0px; border: medium none;"
tabindex="-1">
<table cellpadding="81"
style="position: absolute; left: 0px; top: -2000px;">
<div id="isc_styleTester" class="normal"
style="position: absolute; left: 0px; top: -2000px;"></div>
<div id="gwt-debug-BUTTON_ID_DEBUG">
<div id="isc_3" class="stretchImgButton"
onscroll="return isc_IButton_0.$lh()"
style="POSITION: relative; LEFT: 0px; TOP: 0px; WIDTH: 100px; HEIGHT: 22px; Z-INDEX: 200018; -moz-box-sizing: border-box; -moz-outline-offset: 0px; OVERFLOW: -moz-scrollbars-none;"
tabindex="1050"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0,true);"
onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_0,true);"
eventproxy="isc_IButton_0">
<div id="isc_2"
style="POSITION: relative; VISIBILITY: inherit; Z-INDEX: 200018; CURSOR: pointer;"
eventproxy="isc_IButton_0"></div>
</div>
<div id="isc_0" onscroll="return isc_IButton_0.$lh()"
style="position: absolute; left: 14px; top: 198px; width: 92px; height: 22px; z-index: 200019; -moz-box-sizing: border-box; overflow: hidden;"
tabindex="-1"
onblur="if(window.isc)isc.EH.blurFocusCanvas(isc_IButton_0_label,true);"
onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(isc_IButton_0_label,true);"
eventproxy="isc_IButton_0">
<div id="isc_1"
style="POSITION: relative; VISIBILITY: inherit; Z-INDEX: 200019; CURSOR: default;"
eventproxy="isc_IButton_0"></div>
</body>
</html>[/SIZE][/FONT]
Comment