Having a propensity towards programming, I often sit beside my friend who is a web developer when he is on work to learn the basics of web development. I being a tester, he enjoys my involvement on his work for I scrutinize when he develops. He asks me how should a functionality be implemented, how should the GUI look like etc. Though I am not a connoisseur of programming, there are many occasions when looking at his code, I have found out many potential issues and conveyed it to him. On one such occasion, I was sitting beside him and he was writing some java script codes to validate a form. He was writing a java script function which was supposed to be called when a checkbox is ticked or unticked. I noticed a potential issue on this part of the code. To illustrate it, I have designed that part of the form and also written the java script function. There were few more functionalities in his code but I have kept it simple because it suffices my purpose of addressing the issue. And of course his GUI looked different than mine.
Below is the image of that part of the form.
Look at the image and guess how this is supposed to work. There are two fields; a present address and a permanent address. If these two addresses are same for a user, he doesn’t have to fill the two fields with same data. Instead, he will just tick the checkbox and the content of first field will be copied to the second field and the second field gets disabled. When he unticks the checkbox, the content of the second field gets removed and it gets enabled. In fact, this functionality was suggested by me and he appreciated.
Now I shall give you the code. You copy it and paste it in an editor, save it as an html file. Open the html file and try to figure out the issue. Do not view the code for the java script function. Try out different combinations to figure out the issue. I expect everyone to figure it out because this form has very limited possible combinations and if you work out all of them, you can find it out. If you cannot figure out by looking at the application, go view the code and then try.
Below is the code: (Please replace "#" with "<" and "%" with ">" while saving )
#html%
#head%
#title%#/title%
#script type="text/javascript" language="javascript"%
function setAdd() {
var chkStatus = document.forms["myform"]["chk1"].checked;
if (chkStatus==true) {
document.forms["myform"]["txt2"].value = document.forms["myform"]["txt1"].value;
document.forms["myform"]["txt2"].disabled = true;
}else if(document.forms["myform"]["txt2"].value!=""){
document.forms["myform"]["txt2"].disabled = false;
document.forms["myform"]["txt2"].value ="";
}
return true;
}
#/script%
#/head%
#body bgcolor="gray"%
#form name="myform"%
#center%
Present Address:#input type="text" name="txt1" id="pradd" /%#br%
#input type="checkbox" name="chk1" id="addsame" onclick="return setAdd();" /%
#font size="2" color="white"%Click if present and permanent address are same#/font%#br%
Permanent Address:#input type="text" name="txt2" id="peadd"/%#br%
#/center%
#/form%
#/body%
#/html%
#head%
#title%#/title%
#script type="text/javascript" language="javascript"%
function setAdd() {
var chkStatus = document.forms["myform"]["chk1"].checked;
if (chkStatus==true) {
document.forms["myform"]["txt2"].value = document.forms["myform"]["txt1"].value;
document.forms["myform"]["txt2"].disabled = true;
}else if(document.forms["myform"]["txt2"].value!=""){
document.forms["myform"]["txt2"].disabled = false;
document.forms["myform"]["txt2"].value ="";
}
return true;
}
#/script%
#/head%
#body bgcolor="gray"%
#form name="myform"%
#center%
Present Address:#input type="text" name="txt1" id="pradd" /%#br%
#input type="checkbox" name="chk1" id="addsame" onclick="return setAdd();" /%
#font size="2" color="white"%Click if present and permanent address are same#/font%#br%
Permanent Address:#input type="text" name="txt2" id="peadd"/%#br%
#/center%
#/form%
#/body%
#/html%
For them who still could not figure out the issue, I shall explain what the issue is and how was I able to figure it out by looking at the code. If you look carefully at the “else if” condition of the java script function, it implies that the second field has to contain some value (it is not blank) in order to be enabled when the user unticks the checkbox. I asked him what if it is blank. Then he replied how can it be blank? If the user has ticked the checkbox, he must have entered some value in the first field. So obviously the second field has that value. Then I asked what if the user has ticked the checkbox without providing any value in the first field? He immediately launched the application, ticked the checkbox without providing any value in the first field. The second field got disabled. When he unticked the checkbox, the field was still disabled because it had no value. In a way to enable it again, he had to provide some value in the first field, tick the checkbox and again untick it.
When I unveiled the issue before my friend, he confessed that in his work, he has made several such types of silly mistakes and no tester has happened to report them. He could then literally recollect on which project and on which part he had made such mistakes. God forbid those issues to be figured out by the users. He candidly revealed before me that he was under an impression that a tester is not necessarily required for a good developer. But now he had understood the importance of a good tester. He learnt a lesson.
What lesson we the testers learned? By knowing the mindset of the developers, how they implement certain functionalities, we can actually uncover many issues of similar types on different areas of a project or even different projects where that developer is involved. To know about their programming habit, we have to build good relations with them. We have to spend some time with them. We can ask questions to them on how they would implement certain functionalities.
4 comments:
Nice work Prabhat..:) Keep stroking the keyboard for uncovering such issues...
This is really very good post and some times we tester need to look into the code to find the issues easily .I tried with the form to find the issue ,and it took some time to find the issue (I find some how), but was not able to reproduce it and then gone through the code and got it :)
Thanks mates!
nice article for beginners.thank you.
perl tutorial
java tutorial
Post a Comment