18 0672327988 CH14 6/30/05 1:23 PM Page 211
14 IN THIS CHAPTER
• Web Page Fundamentals
Website Testing • Black-Box Testing
• Gray-Box Testing
The testing techniques that you’ve learned in previous • White-Box Testing chapters have been fairly generic. They’ve been presented • Configuration and by using small programs such as Windows WordPad, Compatibility Testing Calculator, and Paint to demonstrate testing fundamentals and how to apply them. This final chapter of Part III, • Usability Testing “Applying Your Testing Skills,” is geared toward testing a • Introducing Automation specific type of software—Internet web pages. It’s a fairly timely topic, something that you’re likely familiar with, and a good real-world example to apply the techniques that you’ve learned so far. What you’ll find in this chapter is that website testing encompasses many areas, including configuration testing, compatibility testing, usability testing, documentation testing, security, and, if the site is intended for a worldwide audience, localization testing. Of course, black-box, white- box, static, and dynamic testing are always a given. This chapter isn’t meant to be a complete how-to guide for testing Internet websites, but it will give you a straightfor- ward practical example of testing something real and give you a good head start if your first job happens to be looking for bugs in someone’s website. Highlights of this chapter include • What fundamental parts of a web page need testing • What basic white-box and black-box techniques apply to web page testing • How configuration and compatibility testing apply • Why usability testing is the primary concern of web pages • How to use tools to help test your website 18 0672327988 CH14 6/30/05 1:23 PM Page 212
212 CHAPTER 14 Website Testing
Web Page Fundamentals In the simplest terms, Internet web pages are just documents of text, pictures, sounds, video, and hyperlinks—much like the CD-ROM multimedia titles that were popular in the mid 1990s. As in those programs, web users can navigate from page to page by clicking hyperlinked text or pictures, searching for words or phrases, and viewing the information they find. The Internet, though, has introduced two twists to the multimedia document concept that revolutionizes the technology: • Unlike data that is stored solely on a CD-ROM, web pages aren’t constrained to a single PC. Users can link to and search worldwide across the entire Internet for information on any website. • Web page authoring isn’t limited to programmers using expensive and techni- cal tools. The average person can create a simple web page almost as easily as writing a letter in a word processor.
But, just as giving someone a paint brush doesn’t make him an artist, giving someone the ability to create web pages doesn’t make him an expert in multimedia publishing. Couple that with the technology explosion that continually adds new website features, and you have the perfect opportunity for a software tester. Figure 14.1 shows a popular news website that demonstrates many of the possible web page features. A partial list of them includes • Text of different sizes, fonts, and colors (okay, you can’t see the colors in this book) • Graphics and photos • Hyperlinked text and graphics • Rotating advertisements • Text that has Drop-down selection boxes • Fields in which the users can enter data
A great deal of functionality also isn’t as obvious, features that make the website much more complex: • Customizable layout that allows users to change where information is posi- tioned onscreen • Customizable content that allows users to select what news and information they want to see 18 0672327988 CH14 6/30/05 1:23 PM Page 213
Black-Box Testing 213
• Dynamic drop-down selection boxes • Dynamically changing text • Dynamic layout and optional information based on screen resolution • Compatibility with different web browsers, browser versions, and hardware and software platforms • Lots of hidden formatting, tagging, and embedded information that enhances the web page’s usability
FIGURE 14.1 A typical web page has many testable features.
Granted, short of a secure e-commerce website, this is probably one of the more complex and feature-rich web pages on the Internet. If you have the tester mentality (and hopefully you’ve gained it by reading this far in the book), looking at such a web page should whet your appetite to jump in and start finding bugs. The remain- der of this chapter will give you clues on where to look.
Black-Box Testing Remember all the way back to Chapters 4 through 7, the ones that covered the fundamentals of testing? In those vitally important chapters, you learned about black-box, white-box, static, and dynamic testing—the raw skills of a software tester. Web pages are the perfect means to practice what you’ve learned. You don’t have to 18 0672327988 CH14 6/30/05 1:23 PM Page 214
214 CHAPTER 14 Website Testing
go out and buy different programs—you can simply jump to a web page, one of your favorites or a completely new one, and begin testing. The easiest place to start is by treating the web page or the entire website as a black box. You don’t know anything about how it works, you don’t have a specification, you just have the website in front of you to test. What do you look for? Figure 14.2 shows a screen image of Apple’s website, www.apple.com, a fairly straightforward and typical website. It has all the basic elements—text, graphics, hyperlinks to other pages on the site, and hyperlinks to other websites. A few of the pages have form fields in which users can enter information and a few pages play videos. One interesting thing about this site that’s not so common is that it’s local- ized for 27 different locales, from Asia to the UK. If you have access to the Internet, take some time now and explore Apple’s website. Think about how you would approach testing it. What would you test? What would your equivalence partitions be? What would you choose not to test?
FIGURE 14.2 What would you test in a straightforward website such as this?
After exploring a bit, what did you decide? Hopefully you realized that it’s a pretty big job. If you looked at the site map (www.apple.com/find/sitemap.html), you found links to more than 100 different sub-sites, each one with several pages. 18 0672327988 CH14 6/30/05 1:23 PM Page 215
Black-Box Testing 215
NOTE When testing a website, you first should create a state table (see Chapter 5, “Testing the Software with Blinders On”), treating each page as a different state with the hyperlinks as the lines connecting them. A completed state map will give you a better view of the overall task.
Thankfully, most of the pages are fairly simple, made up of just text, graphics, links, and the occasional form. Testing them isn’t difficult. The following sections give some ideas of what to look for.
Text Web page text should be treated just like documentation and tested as described in Chapter 12, “Testing the Documentation.” Check the audience level, the terminol- ogy, the content and subject matter, the accuracy—especially of information that can become outdated—and always, always check spelling.
NOTE Don’t rely on spell checkers to be perfect, especially when they’re used on web page content. They might only check the regular text but not what’s contained in the graphics, scrolling marquees, forms, and so on. You could perform what you think is a complete spell check and still have misspellings on the page.
If there is contact information such as email addresses, phone numbers, or postal addresses, check them to make sure that they’re correct. Make sure that the copy- right notices are correct and dated appropriately. Test that each page has a correct title. This text appears in the browser’s title bar (upper-left corner of Figure 14.2) and what is listed by default when you add the page to your favorites or bookmarks. An often overlooked type of text is called ALT text, for ALTernate text. Figure 14.3 shows an example of ALT text. When a user puts the mouse cursor over a graphic on the page he gets a pop-up description of what the graphic represents. Web browsers that don’t display graphics use ALT text. Also, with ALT text blind users can use graphically rich websites—an audible reader interprets the ALT text and reads it out through the computer’s speakers.
NOTE Not all browsers support display of the ALT text. Some only show simple TITLE text in the tooltip—or nothing at all. Since this could prevent the blind from using the Web, it should be considered a serious accessibility bug.
Check for text layout issues by resizing your browser window to be very small or very large. This will reveal bugs where the designer or programmer assumed a fixed 18 0672327988 CH14 6/30/05 1:23 PM Page 216
216 CHAPTER 14 Website Testing
page width or height. It will also reveal hard-coded formatting such as line breaks that might look good with certain layouts but not with others.
ALT text
FIGURE 14.3 ALT text provides textual descriptions of graphics images on web pages.
Hyperlinks Links can be tied to text or graphics. Each link should be checked to make sure that it jumps to the correct destination and opens in the correct window. If you don’t have a specification for the website, you’ll need to test whether the jump worked correctly. Make sure that hyperlinks are obvious. Text links are usually underlined, and the mouse pointer should change (usually to a hand pointer) when it’s over any kind of hyperlink—text or graphic. If the link opens up an email message, fill out the message, send it, and make sure you get a response. Look for orphan pages, which are part of the website but can’t be accessed through a hyperlink because someone forgot to hook them up. You’ll likely need to get a list from the web page’s designer of the expected pages and compare that with your own state table. 18 0672327988 CH14 6/30/05 1:23 PM Page 217
Black-Box Testing 217
Graphics Many possible bugs with graphics are covered later under usability testing, but you can check a few obvious things with a simple black-box approach. For example, do all graphics load and display properly? If a graphic is missing or is incorrectly named, it won’t load and the web page will display an error where the graphic was to be placed (see Figure 14.4).
FIGURE 14.4 If a graphic can’t load onto a web page an error is put in its location.
If text and graphics are intermixed on the page, make sure that the text wraps prop- erly around the graphics. Try resizing the browser’s window to see if strange wrap- ping occurs around the graphic. How’s the performance of loading the page? Are there so many graphics on the page, resulting in a large amount of data to be transferred and displayed, that the website’s performance is too slow? What happens if you test on a slow dialup connection instead of your company’s fast local area network?
Forms Forms are the text boxes, list boxes, and other fields for entering or selecting infor- mation on a web page. Figure 14.5 shows a simple example from Apple’s website. It’s a signup form for potential Mac developers. There are fields for entering your first name, middle initial, last name, and email address. There’s an obvious bug on this page—hopefully it’s fixed by the time you read this.
FIGURE 14.5 Make sure your website’s form fields are positioned properly. Notice in this Apple Developer signup form that the middle initial (M.I.) field is misplaced. 18 0672327988 CH14 6/30/05 1:23 PM Page 218
218 CHAPTER 14 Website Testing
Test forms just as you would if they were fields in a regular software program— remember Chapter 5? Are the fields the correct size? Do they accept the correct data and reject the wrong data? Is there proper confirmation when you finally press Enter? Are optional fields truly optional and the required ones truly required? What happens if you enter 9999999999999999999999999999?
Objects and Other Simple Miscellaneous Functionality Your website may contain features such as a hit counter, scrolling marquee text, changing advertisements, or internal site searches (not to be confused with search engines that search the entire Web). When planning your tests for a website, take care to identify all the features present on each page. Treat each unique feature as you would a feature in a regular program and test it individually with the standard testing techniques that you’ve learned. Does it have its own states? Does it handle data? Could it have ranges or boundaries? What test cases apply and how should they be equivalence classed? A web page is just like any other software.
Gray-Box Testing You’re already familiar with black-box and white-box testing, but another type of testing, gray-box testing, is a mixture of the two—hence the name. With gray-box testing, you straddle the line between black-box and white-box testing. You still test the software as a black-box, but you supplement the work by taking a peek (not a full look, as in white-box testing) at what makes the software work. Web pages lend themselves nicely to gray-box testing. Most web pages are built with HTML (Hypertext Markup Language). Listing 14.1 shows a few lines of the HTML used to create the web page shown in Figure 14.6.
LISTING 14.1 Sample HTML Showing Some of What’s Behind a Web Page
18 0672327988 CH14 6/30/05 1:23 PM Page 219 |