Javascript basics for automation testing

JavaScript
Basic Examples
-Vikas Thange
(vikasthange@gmail.com)
www.vikasthange.blogspot.com

Topics to be covered
1. Basic JavaScript Examples
2. JavaScript Comments
3. JavaScript Variables
4. JavaScript Conditional If ... Else
5. JavaScript Popup Boxes
6. JavaScript Functions
7. JavaScript Loops
8. JavaScript Events
9. JavaScript Error Handling

1. Basic JS Examples
• Write to the Document with JavaScript
document.write("<p>My First JavaScript</p>");
• Change HTML elements with JavaScript
<p id="demo">My First Paragraph.</p>
document.getElementById("demo").innerHTML="My First
JavaScript";
• An external JavaScript
<script src="myScript.js">

2. JavaScript Comments
• Comments
Single line comment - //
Multiline comments /*.......*/

3. JavaScript Variables
• Declare a variable, assign a value to it, and display it
• Code:
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br>");
firstname="Tove";
document.write(firstname);

4. JavaScript Conditional If ... Else
• If statement
• If...else statement
• Random link
• Switch statement

4.1 If Statement
function myFunction()
{
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}

4.2 If....else Statement
{
var x="";
var time=new Date().getHours();
if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
}

4.3 Random Link
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="<a href='http://w3schools.com'>Visit W3Schools</a>";
}
else
{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}

4.4 Switch Statement
{
var x;
var d=new Date().getDay();
switch (d)
{
case 0:
x="Today is Sunday";
break;
case 1:
x="Today is Monday";
break;
}

5. JavaScript Pop Up Boxes
• Alert box
alert("I am an alert box!");
• Alert box with line breaks
alert("HellonHow are you?");

• Confirm Box
{
var x;
var r=confirm("Press a button!");
if (r==true)
{
x="You pressed OK!";
}
else
{
x="You pressed Cancel!";
}
}

• Prompt Box
{
var x;
var person=prompt("Please enter your name","Harry Potter");
if (person!=null)
{
x="Hello " + person + "! How are you today?";
}
}

6. Javascript Functions
• Call a function
• Function with an argument
• Function with an argument 2
• Function that returns a value
• Function with arguments, that returns a value

6.1 Call a Function
{
alert("Hello World!");
}
myFunction();
HTML:
<button onclick="myFunction()">Try it</button>

6.2 Function with an argument
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
HTML:
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

6.3 Function with an argument 2
<script>
function myfunction(txt)
{
alert(txt);
}
</script>
HTML:
1 :- <input type="button“ onclick="myfunction('Good Morning!')“ value="In
the Morning">
2:- <input type="button“ onclick="myfunction('Good Evening!')“ value="In
the Evening">

6.4 Function that returns a value
<script>
{
return ("Hello world!");
}
</script>
<script>
var msg;
msg = myFunction();
document.write(msg)
</script>

6.5 Function with arguments, that
returns a value
<script>
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

7. JavaScript Loops
• For loop
• Looping through HTML headers
• While loop
• Do While loop
• Break a loop
• Break and continue a loop
• Using a for... to loop through the elements of an object

7.1 For loop
<script>
{
var x="",i;
for (i=0;i<5;i++)
{
x=x + "The number is " + i + "<br>";
}
}
</script>

7.2 Looping through HTML headers
<script>
{
var x="",i;
for (i=1; i<=6; i++)
{
x=x + "<h" + i + ">Heading " + i + "</h" + i + ">";
}
}
</script>

7.3 While loop
<script>
{
var x="",i=0;
while (i<5)
{
i++;
}
}
</script>

7.4 Do While loop
<script>
{
var x="",i=0;
do
{
i++;
}
while (i<5)
}
</script>

7.5 Break a loop
{
var x="",i=0;
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
}
}

7.6 Break and Continue a loop
{
var x="",i=0;
for (i=0;i<10;i++)
{
if (i==3)
{
continue;
}
}
}

7.7 Using a for... to loop through the
elements of an object
{
var txt="";
var person={fname:"John",lname:"Doe",age:25};
for (var x in person)
{
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}

8. JavaScript Events
• Acting to the onclick event
• Acting to the onmouseover event

8. JavaScript Error Handling
• The try...catch statement
• The try...catch statement with a confirm box
• The onerror event

Reference
• W3Schools
• http://www.w3schools.com/js/js_examples.asp

Thank You
-Vikas Thange
Selenium & QTP Automation expert
(vikasthange@gmail.com)
www.vikasthange.blogspot.com

Javascript basics for automation testing

More Related Content

What's hot

Viewers also liked

Similar to Javascript basics for automation testing

Recently uploaded

Javascript basics for automation testing