Testing HTML Applications

  • Article

In addition to the standard testing necessary for any application, Windows Media Center HTML applications have some special testing requirements.

Users will be viewing your site at different resolutions, so it is important to be sure that it resizes and displays correctly in various resolutions. The default resolution is 1024 x 768. Users with high-end plasma or LCD screens may be using a resolution of 1600 x 900, which has a wider aspect ratio; be sure that your content is centered in the wider screen or flows into a wider page layout (but do not stretch the individual graphic elements). Standard CRT TV users are likely to be viewing your content at a resolution of 800 x 600. Restore (de-maximize) the Windows Media Center window to be sure the content resizes correctly. Move the mouse to be sure that when the top and bottom control bars appear, they are not covering critical content. Also, be sure to test on a TV as well as on a computer monitor.

You also need to test your application for various network and cache conditions. Windows Media Center HTML application pages use the same cache as Internet Explorer, so clear your cache in Internet Explorer and test your pages over the Web. In particular, be sure that the first time you focus on a button, the image for the highlight state (if you are using one) downloads quickly enough that you are not left with a blank button. If the download is too slow, consider pre-loading or pre-caching your button highlight image, or design your buttons so that the highlight state is an HTML color rather than an image. Test on the slowest network link your users are likely to have, making sure that UI elements do not disappear. Also, be sure to test your application to ensure that it works well with the Windows Media Center Extender device.

For music services, be sure that your individual songs load into Windows Media Center's Now Playing inset in the shared view port, allowing the user to take advantage of Windows Media Center's Now Playing features for music.

Certain dynamic page interactions, such as scrolling several buttons a large distance at one time, can be interrupted by onmouseover events that occur without any obvious cause. It is important to test for this, and be sure that your scrolling and page up/down functionality work correctly. If you are getting interruptions in the process, move the mouse slightly to make the cursor visible, and see if it is in the path of one or more of your buttons as they move past. Because Windows Media Center supports the use of a mouse in HTML applications, the cursor is always somewhere on the page, though it becomes invisible when you are not using the mouse. Even when the cursor is invisible you will still get an onmouseover event when you load the page or when you dynamically drag objects under the cursor. If you are using script to handle onmouseover events for scrollable buttons (as you should be doing so that your users can use the mouse to interact with your pages), you may need to work around this problem by nullifying your handling of certain onmouseover events, as follows:

    Var nMouseEvent = 0
    function useMouse(newItem)
    {
        if (nMouseEvent == 0)
        {
            nMouseEvent = 1;
            return;
        }
       // Script to handle mouseover event goes here.
    }

If a function such as scrolling several buttons at a time is interrupted by an onmouseover event on those buttons (it tends to be just one onmouseover event per dynamic move), you can set nMouseEvent to 0 inside the function and nullify the handling for that event. You can see a sample of this in the SDK sample JScript file exCommon.js.

Be especially thorough in testing any code that accesses the MediaCenter object. Be sure you are using the syntax correctly, and that you are using valid events to access the object. For example, placing the following code somewhere in the BODY of your HTML would be incorrect:

<script language="JScript">
window.external.MediaCenter.PlayMedia(0,"audio/myAudioFile.wma")
</script>

Instead, you should place this code inside a function, and call it from an event such as onload, onclick, or Windows Media Center's onRemoteEvent.

See Also