Selenium2 and HTML5

Know HTML5:

HTML5 is not just a buzz work its the future of website, its powerful and has many added features which we will discuss below, and of course selenium has got to deal with those :)

if you go to selenium website and seach for HTML5 you will end up seeing

HTML5
Todo

In a way its true, html5 needs more support from browsers before it become a common experience, if you want to see recent advancement openqa is doing on HTML5 you can reach out to this link

http://selenium.googlecode.com/svn/trunk/docs/api/java/org/openqa/selenium/html5/package-summary.html

Ok, before that let us try to understand what HTML5 can do:

HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML, it has a new syntax compared to traditional html

Here is an example document that conforms to the HTML syntax:
<!doctype html> 
<html> 
   <head> 
         <meta charset="UTF-8">
          <title>Example document</title> 
   </head> 
   <body> 
            <p>Example paragraph</p> 
   </body>
 </html>
HTML5 is the most dramatic step in the evolution of web standards. It incorporates features such as geolocation, video playback and drag-and-drop. HTML5 allows developers to create rich internet applications without the need for third party APIs and browser plug-ins. Under the banner of HTML5, modern web standards such as CSS3, SVG, XHR2, WebSockets, IndexedDB, and AppCache are pushing the boundaries for what a browser can achieve using web standards.
You can use the HTML5 canvas to draw charts, graphics, data-driven diagrams or just to have fun. Its great performance makes the canvas ideal for drawing graphics-intensive apps that require rendering many objects, animating them and redrawing them repeatedly. But if you need to zoom in and out of your drawings, for activities such as drawings maps, scalable vector graphics might be a better option.

The table below explains the element you can use in HTML canvas()
FunctionDescription
arc()Renders an arc given an x,y coordinate for its center, a radius, starting and ending angles, and the direction to draw
beginPath()Indicates the beginning of a new path
lineCapDefines how to cap the ends of lines
lineJoinDefines how to join lines
lineTo()Draws a line from the current coordinates to a newly-provided coordinate
lineWidth()Width in pixels of the lines to be drawn
moveTo()Moves from the current coordinates to a newly-provided coordinate without drawing
stroke()Renders any un-rendered drawings
strokeStyle()Defines the color of the strokes to draw




Here are a few of the new semantic elements in HTML5:
  • article
  • aside
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • mark
  • nav
  • section
  • time
You can probably guess what most of these elements do. Now that all these elements are new and can play video and audio ( this is going to kill adobe flash player on a short run !) selenium should have controls to adapt to these changes. My intention here is not to teach HTML5, but to be prepared with dealing with it using Selenium. To do that first we need to know what is HTML5 capable of and we actually need a browser which can run it and which selenium supports. So, a must have going forward is FireFox9.

Go to www.getfirefox.com and get the latest version of FF9 and download selenium server 2.16 from seleniumhq.org!

to be continued soon!

Comments

  1. I recently found issue with youtube implementation of HTML 5 for video support, the volume control does not work at all!!

    This is what you need to do:
    1. remove flash player
    2. upgrade to latest HTML5 supported browser.
    3. open youtube
    4. first it say plugin required, after a while it loads the video in html5
    5. Observe that video plays but no access to volume control!

    ReplyDelete
  2. it's really excited info for me from your blog
    I have bookmark this blog and waiting for your "to be continued"

    ReplyDelete
  3. Hello ,

    it is an interesting forum that you have opened about selenium not supporting while working on SVG canvas objects.

    Even in my web application we are heavily using Canvas but we are not able to simulate the tests of validating canvas objects using Selenium.
    I was able to identify the canvas with Xpath but operation performed on canvas (for e.g drawing an image,connecting one image with other image ,consider images here as flowchart element ) is not getting simulated, we tried lot but all efforts in vain finally we shifted to other automation tool.

    Would you like to throw some light on automating canvas operation with slenium

    Warm Regards,
    Bhushan

    ReplyDelete
    Replies
    1. Hi Bhushan,

      We are trying automate exactly the same scenario as you mentioned i.e. trying to create a flowchart on a canvas. We tried hard with selenium. But no possibilities.

      You mentioned, you shifted to other automation tool after unsuccessful efforts with selenium. I would like to know which is that other automation tool with which you were successful to automate such scenarios. More info on how you automated using that tool, will help us a lot.

      Thanks and regards,
      Neeta

      Delete
  4. A very informative post. Helped a lot, as I used it as a reference to train my students. Thanks a bunch.
    HTML5 Training in T Nagar | HTML5 Training in T Nagar

    ReplyDelete

Post a Comment

Popular Posts