Re-Skin Validation Test

Owned by Lisa Wilson
Last updated: Apr 23, 2007Version comment

Re-Skin Validation Test Plan

Validating the UCD-skin is basically a comparison of the visual appearance of the existing SmartSite 2.3.x production against the test server version 2.4.x. There are some desired changes in how the content is presented which will be noted in the individual comparison tests.

Comparisons are specified for the following OS/browser combinations*:

  • Windows XP SP2, Windows 2000 SP4 - Internet Explorer 6, Firefox 1.5.0.8
  • Mac OS X 10.4.9, Mac OS X 10.3.9 - Safari 2.0.4, Safari 1.2, Firefox 1.5.0.8
  • Additional test environment: VISTA - IE7

This represents a total of 10 OS/browser combinations to test with the addition of VISTA/IE7 to be determined.

* from What IT Express Supports as of 4/23/07

Test Instructions

There is both a list of screens to test and designated comparison tests for each screen. Run through the tests specified for each screen in your chosen OS/browser combination. Make note of any differences between the current production version 2.3.x and the new 2.4 test version.

When reporting differences in Jira, list the OS/combination you are testing and the screen/tool you are on when you noted the difference. If the difference occurs globally, like with the SmartSite graphic or top navigation bar, note that it occurs globally. Include a screenshot whenever possible.

Content may differ between the test and production versions right now. Focus on visual comparisons for these tests.

Stylesheet Specifications

Text for all screens should be standard Verdana, Arial, Helvetica, san-serif font.
Site/project backgrounds should be light grey, white behind content/text, main sub-menu bars are gold.

Screens to test

  1. Go to the login screen for SmartSite and run through comparison tests 1-11 in the table below.
  2. Log in and run through each of the comparison tests in the steps below from My Workspace.
  3. Select a course site with a single-column Home page and run through comparison tests 9-14 in the table below.
  4. Select a tool in the course site and run through comparison tests 9-14 in the table below. Be aware that functions may be slightly different in version 2.3 and you do not need to note those differences here.
  5. Select a course site with a two-column Home page and run through comparison tests 9-14 in the table below.
  6. Select a tool not previously selected and run through comparison tests 9-14 in the table below. Be aware that functions may be slightly different in version 2.4 and you do not need to note those differences here.
  7. Select a project site and run through comparison tests 9-14 in the table below.
  8. Select a tool not previously selected and run through comparison tests 9-14 in the table below. Be aware that functions may be slightly different in version 2.4 and you do not need to note those differences here.
Comparison Tests
  1. Compare the main SmartSite logo/graphic in the upper left-hand corner visually for placement, size, text type, color, and clarity. (Be aware that the graphic may appear clearer in the selected browser when comparing two browser windows.)
  2. Compare the tabs in your top navigation bar for placement, spacing, text type, color, and background. If you only have a few sites, join more sites until a drop-down select box appears and compare again.
  3. Compare the tabs in your top navigation bar for visual changes to link status when selected (active), non-selected (non-active), and mouse-over (hover).
  4. Compare the links in the left-hand navigation for placement, spacing, text type, color, and background.
  5. Compare the links in the left-hand navigation for visual changes to link status when selected (active), non-selected (non-active), and mouse-over (hover).
  6. Compare the first row of links in the footer for placement, spacing, text type, color, and background.
  7. Compare the first row of links in the footer for visual changes to link status when selected (active), non-selected (non-active), and mouse-over (hover).
  8. Compare the second and third rows of text in the footer for placement, spacing, text type, color, and background.
  9. Compare the navigation bar and sub-menu for content within the site for placement, spacing, text type, color, and background. For version 2.3, it is acceptable that all content sub-menu links like Options be left-justified instead of centered.
  10. View the footer on various screens with content requiring scrolling.
  11. Compare the text content within the site for placement, spacing, text type, color, and background.
  12. Resize the browser screen and check for any visual oddities or obvious differences in appearance.
  13. Select a comparable option on each version and compare the content for placement, spacing, text type, color, and background.
  14. Visually compare any buttons or form fields in the the content for text type, color, and background.