How To Automate HTML5 Testing - Webinar Q&A with Nick Olivo
Test and Monitor | Posted June 25, 2012

This is the second follow up to the webinar: How to Automate HTML5 Testing. In the first blog: Test Automation for Beginners, I covered some very basic topics surrounding the test automation concepts introduced at the event. Webinar timing limitations required us to shorten the presentation and the Q/A session. Here are some additional questions and their answers:





1. How can I test offline browsing features supported with HTML5?

In the above video Nick explains how to disconnect the machine from the internet programmatically and how to restore the connection after the offline test. You can download the routine used in the demo here.

2. How to design test cases to verify content even before the page has loaded completely? Do you have any suggestions?

Nick: You may want to take a look at the working with scripts from the hyperlink that I just pointed out because that's going to give you some insight into working with the client side or scripting events. So if you've got AJAX calls or whatever that are taking place, you can actually call into those AJAX methods and make sure that the page is ready to go. Or if you want to wait until a particular event has fired, you can do that as well.

3. How does the technology described (HTML5+CSS3+JavaScript) differ from Flash and Silverlight?

Nick: Flash and Flex and Silverlight are all dedicated video players. And there's a lot of history behind those and a lot of functionality behind that HTML5 is implementing, but doesn't have completely implemented yet. <video> tag use in the webinar demo is a good example. The browsers haven't even finalized which video format they're going to work with. So there's some discrepancies there that you're going to need to work with.

4. How can we test content under the <canvas> object?

Nick: Canvas object is just a picture and TestComplete has the capability to validateimages inside an application. There's a region checkpoint which allows you to verify that a picture is displaying properly.

One of the neat things about HTML5 is that you can basically tie JavaScripts to a <canvas> element and animate it. Imagine creating a spinning icon or something like that. In this case the animation is going to be more difficult to verify. What you can do is you to verify that the script works properly.

For example, you can create a test method that would verify the JavaScript that would perform animation the canvas object. There are two more steps you need to make to verify content under the <canvas> object. The first is to check if the canvas'sproperties had changed and the other is updating of the CSS3 elements. Finally you can tie those together in checkpoints. A rather simple example would be a checkpoint that verifies if the attributes have changed since calling the JavaScript, and if that’s the case you can assume that the animation's working properly.

5. Does TestComplete support all the HTML5 tags, and how does that relate to browsers?

Nick: TestComplete sees the HTML5 tags and attributes just as they display inside the browsers themselves. So for those browsers like Chrome or Firefox that support the newstuff completely or to an extent, all the tags that those browsers support, TestComplete will be able to see within those browsers.

So think about the example we looked at earlier with the number input field. Firefox couldn't see it as number input. Firefox saw it as a text box. That's also how TestComplete registered it when Firefox is used for test recording. But to TestComplete in Chrome, it looked like a number input field. So we're going to see the objects exactly as they render in the browsers and identify them accordingly.

6. Can we run our tests in a virtual environment?

Nick: Sure. So TestComplete and TestExecute can both run in virtual environments. I was using VMware for all the demos in the webinar. In the past I've also successfully used Virtual PC and Virtual and we've got other customers who use Hyper-V for their virtualization as well.

Thank you again for joining us!




By submitting this form, you agree to our
Terms of Use and Privacy Policy

Thanks for Subscribing

Keep an eye on your inbox for more great content.

Continue Reading

Add a little SmartBear to your life

Stay on top of your Software game with the latest developer tips, best practices and news, delivered straight to your inbox