Web testing is critical process in web development. There are several tests are required in order to make sure that we can delivery bug free, high reliable and meet user requirement web application.
Web test can be grouped into following,
- Functional testing
- Web User interface (UI) testing
- Capacity testing
- Performance testing
- Security testing
- Resiliency testing
This article will focus into user interface testing.
The idea of Web UI Testing
Basically, web page is rendered by web browser using HTML syntax. To be able to interact to user, we use JavaScript to control how the page will response to user action, for example, when user click a link, user type something in text box. To control how the page look, we use CSS.
For web user interface testing, we don't focus on the how page look like (actually no, but we can not automate the page look and feel, we have to manually through this process ) but we rather focus on if the page display content correctly. For example, if we expect to have some text in the page, we can easily navigate to the page and look at the content of the page and see if the text is there. That's all, We are done.
There is another technique used to clarify web user interface test. This require standard and correct implemention of web page itself (sometime, web developers don't care if they are correctly create the page, just make sure all functional work). This technique is called Document Document Object Model, or DOM.
DOM will tell us how the page is constructed. Look at example below,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello, well</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.js" type="text/javascript"></script> </head> <body> <h1>This is web page</h1> <div id="left">This is left side.</div> <div id="right">This is right side.</div> <div id="footer">This is footer</div> </body> </html>
As you can see, when you use any programming language to process the page, you will have a lot of utilities to manipulate each element of the page. For example, to get text in div name "left" using JavaScript, you can,
To get content of element,
var leftText = document.getElementById("left").innerHTML;
To change the content of element,
document.getElementById("left").innerHTML = "Can I move to the right side?"
Compliance implementation to DOM not only get easy to test web application, developer them self also easily control the page using JavaScript.
Testing Web User Interface Using Selenium
Selenium is web test tools. It runs in the web browser using JavaScript. There are three version of Selenium, below are details,
Selenium IDE.
Selenium IDE is a Firefox plugin that you can use to record and play back you action. It support some validation, for example you can easily test if the page have to have some specific content. The cons of Selenium IDE are, it support Firefox only, and you cannot deal with data source, database for an intance. Anyway, it famous in easy of usage.
Selenium core
Selenium runs by putting selenium on the web server. Seriously, no joke. So you can pick this if you can put the test code aside to real web code. Anyway, the good things is, you don't need to set up or install addition software (Java runtime, for example) and it play well with HTTPs and support a major web browser.
Selenium RC (Selenium Remote Control).
Selenium RC is a server that can accept command from client code and translate and use to control web browser. The big advantage are, it support major web browser and its flexible because you can have client program to deal with data source so that you can expect the result of the web page. Command generation can be done using any famous programming language, Java, .Net, Python, Ruby and PHP, for example. The downside is of course, you have to write program.
We have took a look at web testing in details, so now we have concept of web testing. Next post I will show you how to test database-driven web application.
Comments
# software developer Sep 30th, 2009
Hey, that was interesting,
It is great that you use javascrip to control how the page responds to the user's action.
Thanks for bringing this up
# advanced online poker rooms Nov 28th, 2009
C#, memory address pointers can only be used within blocks specifically marked as unsafe, and programs with unsafe code need appropriate permissions to run.We can save memory wastage by memory management .In C# most of tools and software nowadays are develpoed.C#'s documentation system is similar to Java's Javadoc, but based on XML.