© Sujay Raghavendra 2021
S. RaghavendraPython Testing with Seleniumhttps://doi.org/10.1007/978-1-4842-6249-8_3

3. Mouse and Keyboard Actions

Sujay Raghavendra1 
(1)
Dharwad, Karnataka, India
 

The previous chapter covered Python installation and configuration with Selenium to automate test cases. The basic web browser commands that are necessary to run a test case in WebDriver were also reviewed. This chapter guides you through all the actions users tend to make with a web application using a mouse and keyboard.

In web applications, web elements are bound to certain actions or events that need to be performed to execute a complete test case. These actions or events, when tested with Selenium action commands, lead to finding bugs related to the user interface.

There are various mouse and keyboard actions that are used by the user/client in a web application. Selenium provides ActionChain, which is a powerful library function to test user behavior on any UI elements on a page. Before performing an action function on a UI element, you need to locate it (see Chapter 4).

Action Chains

ActionChains automate low-level mouse and keyboard interactions in a test case. The interactions are classified by the device (i.e., the mouse or the keyboard), which are further classified on similar events associated with it.

perform() is an important function that enables all the actions by the mouse and keyboard to be implemented is performed. All ActionChains functions related to the mouse and keyboard work only when the perform() function is used; if it is not used, then the ActionChain function results in no action on a web page.

Multiple actions are aligned in a queue when used for a web element. These actions are performed after the perform() function is called. Action is needed before using the perform() function (an example of mouse and keyboard actions are demonstrated later). Now let’s check some actions associated with the mouse.

Mouse

The mouse can enact operations and actions like click, drag, move, and so forth. These actions are performed with a web element in a web application. For example, the selection of a button, such as a default Submit button, is done by clicking a mouse (see Chapter 6), or a web element is displayed or located after performing this action.

The click may be done by the left or the right mouse button using single or multiple clicks. Selenium in Python offers methods to test actions related to the mouse, which are described next.

Click

click(web_element) is a function in which a web element is selected by pressing the left mouse button. The parameter passed is for one web element that needs to be selected or clicked.

When no parameter (i.e., web element) is passed, the left mouse button is clicked to its present position in the web application.
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
driver = webdriver.Firefox()
driver.get("http://www.apress.com")
# Go to button
web_element=driver.find_element_by_link_text("Apress Access")
#Clicking on the button to be selected
web_element.click()

Click and Hold

click_and_hold(web_element) is a method in which a mouse pointer is first moved to a specific web element, and the same element is clicked using the left mouse button. Once clicked, the element is not released, which results in holding it.

In the following example, the middle of an element is clicked and held.
from selenium import webdriver
driver=webdriver.Firefox()
# Direct to url
driver.get("http://www.apress.com")
# Locate 'Apress Access' web element button
button=driver.find_element_by_link_text("Apress Access")
# Execute click-and-hold action on the element
webdriver.ActionChains(driver).click_and_hold(button).perform()

Context Click

context_click(web_element) is a function that moves the mouse pointer to a specific web element, and then a context click is initiated on that element. A right mouse button click is called a context click in ActionChains.

Here’s an example.
driver.get("http://www.apress.com")
# Go to button
button=driver.find_element_by_link_text("Apress Access")
# Perform context-click
webdriver.ActionChains(driver).context_click(button).perform()

If no web element is defined in the context function, then the mouse button is clicked in its present position.

Double Click

double_click(web_element) is a method in which a mouse pointer goes to the located web element, and then the left mouse button is clicked twice (double-clicked).

Here is an example.
driver.get("http://www.apress.com")
# Go to button
button=driver.find_element_by_link_text("Apress Access")
# Double click on button
webdriver.ActionChains(driver).double_click(on_element=button).perform()

It clicks the current position when no element is specified.

Move to an Element

The move_to_element(web_element) function moves the mouse to a web element. It is mainly focused on drop-down menus, where you can scroll or click after moving the mouse over it.

Here is an example.
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
driver= webdriver.Firefox(executable_path=r'C:UsersADMINDesktopgeckodriver.exe')
driver.get("http://www.apress.com")
main_menu=driver.find_element_by_link_text("CATEGORIES")
ActionChains(driver)
        .move_to_element(main_menu)
        .perform()
# Wait for sub menu to be displayed
WebDriverWait(driver, 3).until(EC.visibility_of_element_located((By.LINK_TEXT, "Python")))
sub_menu=driver.find_element_by_link_text("Python")
sub_menu.click()

(There are a few other library imports besides ActionChains—which are discussed in future chapters—that pertain to exceptions and waits.) The program moves the mouse pointer to the Categories link in the main menu and waits for three seconds to jump to the Python submenu.

Move Offset

The mouse moves to the specified x and y offset from its current position. The x and y offset values in the function is an integer and can be positive or negative. The following is the syntax.

move_by_offset(xoffset, yoffset)
driver.get("http://www.apress.com")
#Offset positions of x and y
x =268
y =66
#Move element with offset position defined
webdriver.ActionChains(driver).move_by_offset(x,y).perform()

When the specified coordinates are beyond the web page window, then the mouse moves outside the window. The default coordinates of offset are (0, 0).

The following syntax reflects moving a mouse with specified coordinates. Here the mouse moves with respect to element positions. The earlier method had mouse movements covering the whole screen as a frame.

move_to_element_with_offset(to_element, xoffset, yoffset)
The offset values start from the top-left corner of any specified web element. The value is an integer that can be positive or negative. A negative xoffset value indicates the left side of the specified web element. Similarly, a negative value in yoffset indicates the upward side of the web element. The following is an example of this function.
driver.get("https://www.apress.com/")
# get  element
element = driver.find_element_by_link_text("CATEGORIES")
# create action chain object
action = ActionChains(driver)
 # perform the operation
action.move_to_element_with_offset(element, 200, 50).click().perform()

The offset positions can be used when a web element is statically placed on a web page and cannot be used for relative positions.

Drag and Drop

drag_and_drop() drags a source element to a specified or target location. A source element is the web element that needs to be dragged to the target location.

The following is HTML code for drag-and-drop elements.
<html>
<head>
<style type="text/css">
#drag,#drop {
float:left;padding:15px;margin:15px;-moz-user-select:none;
         }
#drag{ background-color:#A9A9A9; height:50px; width:50px; border-radius:50%;    }
#drop{ background-color:#fd8166; height:100px; width:100px; border-radius:50%;  }
</style>
<script type="text/javascript">
function dragStart(ev) {
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setDragImage(ev.target,0,0);
return true;
         }
function dragEnter(ev) {
event.preventDefault();
return true;
         }
function dragOver(ev) {
return false;
         }
function dragDrop(ev) {
var src=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
         }
</script>
</head>
<body>
<h1>Drag and Drop</h1>
<center>
<div id="drop" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Drop here</div>
<div id="drag" draggable="true" ondragstart="return dragStart(event)">
<p>Drag</p>
</div>
</center>
</body>
</html>

There are two circles defined for these two elements, in which one element can drag a smaller circle to drop onto the larger one. This is a simple example of drag-and-drop elements. On a web page, the drag-and-drop function is commonly used to move an image slider or files to a specific area that is uploaded.

The following is the Selenium code to drag and drop the circle shown in Figure 3-1.
from selenium import webdriver
driver=webdriver.Chrome()
# Navigate to page stored as local file
driver.get("drag_and_drop.html")
# Locate 'drag' element as source
element1 =driver.find_element_by_id("drag")
# Locate 'drop' element as target
element2  =driver.find_element_by_id("drop")
# Perform drag and drop action from
webdriver.ActionChains(driver).drag_and_drop(element1,element2).perform()
../images/494993_1_En_3_Chapter/494993_1_En_3_Fig1_HTML.jpg
Figure 3-1

Drag and drop

Drag and Drop By

With drag_and_drop_by (source, x_offset, y_offset), the left mouse button is held until it moves the web element to the defined offset values of x and y, respectively, and then the button is released. A web element is a source element in the given syntax.

Here’s an example.
driver.get("drag_and_drop.html")
#Locate circle1 element
circle1 =driver.find_element_by_id("drag")
#Locate circle2 element
circle2  =driver.find_element_by_id("drop")
#Getting offset values
x_off=circle2.location.get("x")
y_off=circle2.location.get("y")
#PerformdragAndDropBy to circle2 element
webdriver.ActionChains(driver).drag_and_drop_by_offset(circle1, x_off, y_off).perform()
Note

Due to a compatibility issue between Firefox and Selenium, the drag-and-drop function used with plain JavaScript may not work.

Release

The release() function frees the clicked left mouse button. It is most effective for web elements relating to drag and drop. If no web element is passed, then the mouse button is released in its current position on a web page.

Here is an example.
driver.get("drag_and_drop.html")
#Locate circle1 element
circle1 =driver.find_element_by_id("drag")
#Locate circle2 element
circle2  =driver.find_element_by_id("drop")
#Release action after performing necessary actions
ActionChains(driver)
        .click_and_hold(circle1)
        .move_to_element(circle2)
        .perform()
        .release()
        .perform()

Now that we’ve reviewed all the mouse actions from ActionChains in Selenium, let’s now look at keyboard actions.

Keyboard Actions

Keyboard actions are also necessary for interacting with a web application. Four primary actions are associated with the keyboard. These actions are discussed next.

Key Down

The key_down(value, web_element) function works with the press of a key. It is mainly used with modifier keys, such as Shift, Control, Alt, and so forth.

Key Up

The key_up(value, web_element) function releases the modifier key pressed. It is usually used after the key down method.

Send Keys

The send_keys_to_element( send_keys) method sends keypresses from the keyboard to the currently selected web element. It can be used for a single key or multiple keys.

Most of the time, keyboard actions are used together. The following is a brief example of keyboard actions that select and copy text from a web page.
#Import necessary libraries
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.action_chains import ActionChains
driver=webdriver.Chrome()
driver.get('https://en.wikipedia.org/wiki/Apress')
ActionChains(driver)
        .key_down(Keys.CONTROL)
        .send_keys("a")
        .key_up(Keys.CONTROL)
        .key_down(Keys.CONTROL)
        .send_keys("c")
        .key_up(Keys.CONTROL)
        .perform()

In the code, you see that all the contents of the web page were selected and copied using keyboard actions that are available in Selenium.

Send Keys to Element

In send_keys_to_element (web_element, send_keys), the keys are sent to the web element in the given function, which makes it different from the send keys function that sends only the keys, because there is no element mentioned in it.

Mouse and keyboard actions can be combined to use for one or multiple web elements on a web page.

Pause

In pause(secs), the actions are delayed (paused) for a specified duration of time (in seconds). It displays a web element before performing actions.

Reset

The reset_actions() function clears or removes all the stored actions that are associated with a web element. The actions can be stored locally or on the remote end.

Summary

This chapter focused on the mouse and keyboard actions that a user performs to interact with a web page. The chapter starts with all the mouse actions that are supported in Selenium. Then, various actions and their corresponding examples are demonstrated. Later, you learned the four main keyboard functions available to a user.

Before applying these actions, you need to locate the element. The task to locate web elements is done by web locators in Selenium, which is discussed in the next chapter.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
13.58.121.131