Lab Collecting Comic Titles Due: date-time

Goal

In your first laboratory assignment, you will be creating an object and calling its methods to accomplish a simple task. These are basic skills you need to build before we can start building more interesting classes.

To practice making method calls, you will be working with a WebBot--you can think of it as a simple robot on the world-wide web that can walk through web pages and extract information from them.

Learning Objectives

• Familiarity with BlueJ projects
• Familiarity with creating a simple class
• Familiarity with writing simple method calls
• Exposure to the WebBot class
• Exposure with interactively executing methods in BlueJ
• Exposure to pair programming
• Exposure to recording simple unit tests
• Exposure to the Web-CAT Grader

First, a Word About Pair Programming

Pair programming is a relatively new idea to help increase productivity and quality in the software that you write. In computer science lab classes, there is suggestive evidence that pair programming increases grades (even on exams and other individual work) and decreases student frustration. In the laboratories this semester, you may be paired each week with a different person and be required to participate in paired programming techniques as instructed by your teaching assistant.

This week, we're going to introduce the basics of pair programming in these lab exercises. Most students are probably unfamiliar with pair programming. When working in a pair, one of you will be the driver--the student typing at the computer or writing down designs/notes. The other student will be the navigator--observing the work of the driver, looking for software defects (syntax errors, logic errors, etc.), asking questions about the design as it develops, and otherwise communicating thoughts to the driver.

There are two parts to this lab, and during it, you will be the driver for one of the parts and the navigator for the other. Once paired with another student, decide who will be the driver during Part I--you will then switch roles during Part II.

Briefly check with your partner to see if one of you has significantly more experience at programming. If so, the least experienced partner should start out as the driver.

Finally, for this lab (and all others unless we tell you otherwise), you should know that the driver is the only member of the pair who is allowed to touch the keyboard. The navigator is allowed to point out errors, ask questions, and make suggestions. This is encouraged behavior! However the navigator is not permitted to take or otherwise obtain the keyboard from the driver and begin to type!

As you are working on lab assignments, if you reach a point where you cannot figure out a problem together with your partner, raise your hand to request help from one of the Teaching Assistants, (TAs). The TAs will come around to as quickly as they can.

Part I: Navigating a Webpage with a WebBot Object

In Part I of this lab assignment, you will become familiar with the WebBot class. A WebBot is a little robot that can maneuver around a webpage by identifying and locating two important kinds of HTML elements: headings and links. A heading is a title or subtitle. When you enclose text within two heading tags, that text appears bigger and bolder than the rest of the text. The line of text above that starts with "Part I" is an example of a heading. A link is a way to connect the webpage that you are currently viewing with another page on the Internet. Here is an example of a link. In this lab, you only need to be concerned with headings.

There are several methods that WebBots understand that you will need in this assignment:

• The method jumpToPage() tells a WebBot to move to a new page on the web. It takes a single parameter: the URL of the page you want it to visit. The WebBot will start off at the very top of the page. If you have a variable or field named "bot" that refers to a WebBot, you can call this method like this:

  bot.jumpToPage("http://...");   // put your URL between the double-quotes
  

• The method advanceToNextHeading() tells a WebBot to move forward down the web page it is currently standing on. It does not take any parameters. If you have a variable or field named "bot" that refers to a WebBot, you can call this method like this:

  bot.advanceToNextHeading();
  

• The method echoCurrentElementText() tells a WebBot to print out the text that it is currently standing on, on the current web page (a heading, a link, or whatever else you have told it to move to). For example, if the WebBot has moved down to the fourth heading on the page, calling this method will cause the WebBot to print out the text of that heading on the screen. It does not take any parameters. If you have a variable or field named "bot" that refers to a WebBot, you can call this method like this:

  bot.echoCurrentElementText();
  

You will be stringing these methods together in order to extract some information from some live web pages.

Procedure:

1. Create a Java class for your solution

   1. Decide which of you will be the driver for Part I. The driver should log in. For the remaining instructions in Part I, the driver should do all the typing/mousing. The driver should feel free to ask for advice or bounce ideas off the navigator, and the navigator should look out for errors in what the driver is typing.

   2. Start BlueJ on your machine. You can use the driver's notebook for this lab session. The navigator may wish to pull up the assignment writeup on their machine, so that you can refer to both simultaneously.

      Create a new BlueJ project with a name of your choice (maybe "lab01"). A new BlueJ project is initially empty, containing no classes.

   3. Create a new class using the "New Class" button. Give your class the name "ComicTitleFinder" and choose the "WebBot Task Class" template. Note: you MUST use the name ComicTitleFinder!

   4. Double-click on the newly created class to open an edit window. Consider resizing it to make it longer, so you can see more of the code. Read the comments carefully (they are in green). Edit the first three comment lines to explain the behavior of your program (you might have to come back and add to this later, once you know more about what you are doing). Fill in the @author and @version information in the first comment block near the top of the file. Both partners should list their VT PIDs on the @author line.

   5. Read through the code provided by the robot task skeleton and discuss it with your partner. Do you understand what each part does?

   6. Compile your class. Fix any syntax errors.

2. Place your robot on the target web page

   1. Find the first line inside your task() method. Delete the comment marker that instructs you to initialize the robot the way you want. You will see the following line already provided for you:

          bot = new WebBot();
      

      The name "bot" refers to a WebBot object. This line creates the WebBot. Initially, it is not looking at any web page at all.

   2. Now, let's look at the first web page we want the robot to visit. It is http://xkcd.com/509/. You can look at it in your browser if you like. This page contains a comic from the archives of xkcd.

      Now, you want to point your WebBot at this page. Find this comment lower in the task():

          /*# add your statements here */
      

      Replace this line with a method call that instructs your bot to visit this URL (don't forget the quotes when you type URLs in your program).

   3. Compile your solution and fix any syntax errors. Then create an instance of your robot task on the object bench and run the task() method. Does it produce the output that you expect? Discuss what happened with your partner--can you explain why?

3. Print the comic's title

   1. Extend your task() method by adding more method calls to the bottom. Your goal is to get your WebBot to print out the strip title of the comic (the title is "Induced Current"). Note that the comic strip title is not the same as the HTML page title. Fortunately, the strip title is one of the headings on the page. Add method calls to advance to the comic strip heading and then print its contents.

   2. Compile your solution and fix any syntax errors. Then create an instance of your robot task on the object bench and run the task() method. Does it produce the output that you expect?

      If not, discuss with your partner and come up with a strategy for adding more methods (compiling and running each time) until you find the strip title you are looking for.

   3. If the output produced by your bot is too terse for your tastes, you can augment it. You can add extra instructions in your task to produce any output you like. For example:

          // move to the next line
          System.out.println();
      

4. Print another comic's title, too

   1. OK, so your WebBot should now be printing out the title of the comic on the web page you sent it to. Now extend your task() method yet again by adding more method calls to the bottom. Tell your WebBot to visit a second xkcd comic at this URL: http://xkcd.com/527/. Your goal is to get your WebBot to print out the strip title of this second comic as well, so that it will print both strip titles. The strip title of the second comic is "Keynote". Fortunately, the comic strip  titles on all of the xkcd pages are in the same place, so if you know how to find the strip title on the first page, you can use the same process to locate the one on this new page.

   2. Compile your solution and fix any syntax errors. Then create an instance of your robot task on the object bench and run the task() method. Does it produce the output that you expect?

5. Submit your work to Web-CAT

   1. On BlueJ's main menu, click Tools->Preferences..., then select the Extensions tab. In the Submitter section, enter your (the driver's) Virginia Tech PID as the user name. The first driver should make all submissions for the remainder of the lab. It is OK to leave the other entries blank. Click "OK". After the TAs have graded your work, both students will be able to see the results, even though only one of you is making all the submissions.

   2. Now select Tools->Submit... from the main menu. Click on "Browse...", double-click (!) the CS 1114 category, and select "Lab 01". Click "OK". Click "Submit". Read the response you receive, and click on any link it provides for more information about your submission.

   3. Go back to the descriptive comment at the beginning of the ComicTitleFinder class and make sure it does (briefly) describe what your first program accomplishes. Also, make sure that the description at the top of your task() method correctly describes what it does in a sentence or two.

   4. Web-CAT is very, very picky about how you write your code, because we are trying to teach everyone reasonable and clear coding habits. Look through the comments about your source file provided by Web-CAT and fix all the errors you can. Yes, you have to be careful about your indentation. Yes, you have to be careful about your commenting. Yes, you have to write very neat, readable, clean code. That is always expected, throughout this course. Fix the problems Web-CAT complains about in your code now, so you won't have to do it later (and try not to introduce new issues as you write more code in the steps below).

6. Back up lab work
   1. Both you and your partner should backup your submitted lab work. It is your responsibility to be able to produce a copy of your work. Relying on Web-CAT or lab servers is dangerous. Both partners should make a copy of your BlueJ project folder on a USB drive, or email a zip to yourself.

Part II: Testing

In Part II of this lab, you will create a simple test of your own to demonstrate that your application does what is required. Testing will be covered next week in lecture, but you can get started with it now.

Switch roles: If you were the driver, now you are the navigator, and the navigator will now become the driver.

Part II of this lab is practice, so it will not be submitted to Web-CAT.

Procedure:

1. Create a class to hold your tests

   1. Right-click your existing class and select "Create Test Class". This will create a new class to hold your tests. It will have the same name as the original, with "Test" added on the end. you can add as many tests to this one class as you like.

2. Create a test fixture

   1. A "test fixture" is a fancy name for a collection of objects that you want to check against some criteria. Normally, that means the objects have already been created, and that you've already sent them the methods needed to get them into the state you want to check. For this lab, it makes sense to check the WebBot after your task has been carried out, so let's set that up.

      To set up the test fixture, we'll create two objects, both on the object bench. First, create an instance of the ComicTitleFinder class on the object bench. Then execute its task() method so that it creates your robot and then directs it to complete its work.

   2. Now, we want to get a reference to your robot on the object bench. Right-click your task object and invoke the getRobot() method. In the dialog that follows, BlueJ will show a reference to your WebBot object. Click the "Get" button to add your robot to the object bench. Now we have a way to interact with the WebBot to make sure it completed its work correctly.

   3. Right-click the test class you created. Select "Object Bench to Test Fixture." This will record all of the objects you have on the object bench inside the test class. Now, each test that you add to this test class will be run with the current configuration of objects as its starting point.

3. Create a test case for the robot's final location

   1. A "test case" is one particular test you want to check. Normally, a test case includes a statement of what actions to perform, together with a statement of how to check whether those actions had the desired effect. Here, you've already done the first part in setting up the test fixture. Now you need to decide what to check. First, lets check that the robot went to the correct web page.

   2. Before we create the test, let's clean up a bit. Make sure that the BlueJ terminal window is selected ... it is probably still showing the results of the last time you ran the task(). From its Options menu, select Clear. This will give you a nice blank terminal screen again. You can even check the menu option to automatically clear the terminal each time you interactively run a method, which can be helpful at times.

   3. Now that the terminal is clear, right-click your test class and select "Create Test Method...". Give your method a meaningful name indicating what it checks. By convention, we start all our tests with the prefix "test", so you might call this test "testFinalPageTitle".

      You will notice that your object bench reverts to the stored "test fixture" state for this test class and the red "recording" light on the left of BlueJ's main window comes on. That means your task has already been created and run, and now you are ready to check what has happened after the task() has completed.

   4. Any actions you take now are being "recorded" as part of your test case. Right-click on your robot and invoke the getPageTitle() method. Because you are recording a test case, BlueJ will do more than just show the result returned by this method. BlueJ will also ask you what the correct result should be. Assert that the result is equal to "xkcd: Keynote" (be sure to include the double quotes when you type in the expected answer), and then click the "Close" button.

   5. Finish your test case by clicking "End" on the left of BlueJ's main window. Your test class should be recompiled automatically. Open the test class in an edit window and look through its source. Can you read it? Discuss what it means with your navigator. If you've never programmed before, some parts might be completely unintelligible, but don't worry. You should at least be able to recognize method calls and names for objects.

4. Run your test

   1. You can run your tests by right-clicking on your test class and selecting "Test All" (run all tests in this class), or using the "Run Tests" button on the left of BlueJ's main window (run all tests in all test classes). You can also run individual tests one at a time by right-clicking on a test class. Run your test now.

   2. Look at the "Test Results" dialog that opens. It lists your tests one by one in the top half, together with a "progress bar" that moves left to right as each test is executed. The bar will turn red if any test case fails. Clicking on the test case in the top half of the window will produce a description of what/how it failed in the bottom half.

5. Make sure you have filled in the necessary comment information at the top of your test class, just like you did for your ComicTitleFinder class. Also, make sure that you have added an appropriate descriptive comment for each test method that you recorded (a brief one-line sentence is plenty).

If You Have More Time

Let's check one more condition--that the WebBot ended up at the correct place on the web page it finished on. Note that the WebBot class provides many methods useful for "checking" conditions that you expect to be true, which are also useful in writing test cases. You can easily find them by right-clicking the robot object itself in the object bench, and seeing what is provided in the resulting menu. Imagine what you can do with methods like isLookingAtHeading(), isLookingAtLink(), isLookingAtEndOfPage(), and isViewingWebPage(), all of which return true or false based on where the WebBot is currently located. You could also use getCurrentElementText(), which return a string value based on where the WebBot is currently located (don't forget the double-quotes when you type your expected answer).

If you figure out how to use all of these, that is plenty for this assignment. If you want to see the complete list of methods provided by WebBots, then refer to the full list of everything provided by the WebBot class on-line.

Procedure:

1. Add another test

   1. Right-click your test class and create another test method called "testBotLocation".

   2. Notice that BlueJ automatically recreates the two objects on the object bench and puts them in the state that you recorded in the test fixture earlier. That means your WebBot has just finished executing the steps of your task and it is ready for you to call methods on.

   3. Call the isLookingAtHeading() method (by right-clicking on the WebBot in the object bench and selecting the method from the pop-up menu) to check that the WebBot is actually looking at a heading.

   4. Call the getCurrentElementText() method (again, by right-clicking on the WebBot in the object bench) to check that the heading the WebBot is looking at says "Keynote". Be sure to use double-quotes around the expected value, since it is a text string.

   5. Finish your test case by clicking "End" on the left of BlueJ's main window.

   6. Run your tests as before to make sure they work as expected.

   7. If time permits, you can brainstorm additional tests with your partner, and continue to practice recording new test cases for the checks you have come up with. Run each test after recording it. You can also directly edit the test class source code to modify or add to an existing test case, or even to add entirely new test cases. Remember that all of the test cases are evaluated with the same collection of objects in the same state--the "test fixture". To write tests for a different collection of objects as well, usually you need to create a new test class.

Congratulations!

You have now completed your first lab assignment in CS 1114! It is possible to do much more with WebBots, which can search for and extract all kinds of information from web pages. After lab, think about what kinds of information you might like to pull from existing web sites, in order to assemble your own personal page. Those ideas will be handy for later programming projects.