Explaining how the real world works!     RSS Feed The Automated Tester on Twitter The Automated Tester on LinkedIn The AutomatedTester on github

Selenium Advanced User Interactions

Mon 27 Jun 2011

HTML5 is becoming on the of the biggest things to hit the internet. Unfortunately it has also meant that Selenium 1 has hit a wall in with which technologies it can interact with. It can't play with these new technologies like canvas.

The new Selenium 2 API is trying to solve a number of these problems with the way that it drives the browser. One of the good things that has come out of the work on Selenium 2 is the ability to control elements on the page like a user would. This could be dragging items around a page or even working with canvas applications. Using the mouse, or keyboard, at a low-level to do some really good things.

The Advanced User Interactions API allows us to do things like dragging and dropping as well as gives us the ability to do something like hold down a key and move the mouse around or carry on typing. Below I have put together a couple examples below that you can how we can use the new Advanced User Interaction API that is part of the Selenium 2 API. A quick note, this API only works on Linux and Windows.

The first example uses the first demo page. The page allows you to draw what you want on a canvas element on the page. The script below will draw a triangle on the canvas.

  
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

class TestCanvas:
     def setup_method(self, method):
          self.firefox = webdriver.Firefox()

     def teardown_method(self, method):
          self.firefox.quit()

     def test_that_we_can_draw_on_canvas(self):
          self.firefox.get('http://www.theautomatedtester.co.uk/demo1.html')
          canvas = self.firefox.find_element_by_id("tutorial")
          drawing = ActionChains(self.firefox)\
                    .click_and_hold(canvas)\
                    .move_by_offset(-40, -60)\
                    .move_by_offset(30, 20)\
                    .move_by_offset(100, 200)\
                    .release(canvas)
          #Now we know what we want to happen, let's perform the actions
          drawing.perform()

Now that we have done something cool, let's have a look at using the API to do every day things with our sites. The next example will drag an element on the page. The following demos will use the following demo page

  
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

class TestDraggingAround:

     def setup_method(self, method):
          self.firefox = webdriver.Firefox()

     def teardown_method(self, method):
          self.firefox.quit()

     def test_that_we_can_drag_a_div_around_the_page(self):
          self.firefox.get('http://www.theautomatedtester.co.uk/demo2.html')
          draggable = self.firefox.find_element_by_class_name("draggable")
          dragging = ActionChains(self.firefox)\
                    .click_and_hold(draggable)\
                    .move_by_offset(30, 20)\
                    .move_by_offset(100, 200)\
                    .release(draggable)

          #Now we know what we want to happen, let's perform the actions
          dragging.perform()

But there are times where we need to be able to drag and element and drop it on another element. To do this there is a basic method called drag_and_drop(). See the example below.

  
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

class TestDragAndDrop:
     def setup_method(self, method):
          self.firefox = webdriver.Firefox()

     def teardown_method(self, method):
          self.firefox.quit()

     def test_that_we_can_drag and_drop(self):
          self.firefox.get('http://www.theautomatedtester.co.uk/demo2.html')
          draggable = self.firefox.find_element_by_class_name("draggable")
          droppable = self.firefox.find_element_by_id("droppable")
          dragdrop = ActionChains(self.firefox)\
                         .drag_and_drop(draggable, droppable)
                         
          #Now we know what we want to happen, let's perform the actions
          dragdrop.perform()

I suggest having a play with this.

    Area: blog

blog comments powered by Disqus