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

7. Frames and Textboxes

Sujay Raghavendra1 
(1)
Dharwad, Karnataka, India
 

The previous chapter explained how to locate buttons like default, radio, checkbox, and select list. Each button has a functionality associated with it, such as submit, select, or deselect. Button functionalities are performed with a click action from a mouse (see Chapter 3). This chapter discusses locating web elements like frames and textboxes. It also explains handling single and multiple frames on a web page.

The chapter also covers textbox types, relevant Selenium WebDriver commands, and value insertion.

Iframe

An iframe is another web element available in HTML. It is widely used for embedding media-related web elements (videos, images, etc.) on a web page. YouTube videos and advertisements are two of the most popular examples of embedded videos and images the web pages.

A frame can embed any HTML web element. Frames can be nested within one another. Iframes are defined using the <iframe> tag at the start and the </iframe> tag at end.

Note

Iframes are important to test because they often have web elements that are embedded from other web sites or sources.

To test with web elements that are present in an iframe, you need to switch to that particular frame. It is difficult to locate an iframe because it is in a DOM-like structure. When there are multiple iframe elements in a stack structure, switching to the related iframe gives access to the web elements present within it.

Note

An inline frame is another term used to describe an iframe.

In previous versions of HTML, frameset tags contained the frame tags, but an iframe does not require these tags. One major difference is that iframes can have nested iframes in it, which was not allowed in frames. In Selenium, frames and iframes are treated the same; hence, only iframes are tested in this chapter.

A simple example of an iframe in HTML is shown in Figure 7-1.
<iframe id="new_frame" name="apress" src="https://www.apress.com" height="300" width="300"></iframe>
../images/494993_1_En_7_Chapter/494993_1_En_7_Fig1_HTML.jpg
Figure 7-1

A single iframe

The preceding code displays the Apress web site in an iframe. You can see that the iframe contains the link to the site. The source (src) attribute may have web elements that are within or outside of the web page. The height and width can be in pixels or percentages; here, the pixels are used.

Note

Frame and frameset tags were deprecated in HTML5. Iframes are used instead.

Switching to Iframe

Similar to locating web elements, iframes can be located using the switch function. When a defined iframe is switched, then only tests can be performed on any web element present inside that iframe. Many web pages use iframes because there is no need to reload or refresh the page after interacting with an iframe. The following sections describe ways to switch to an iframe in Python with Selenium.

Switching Using ID

An iframe can be located using the ID attribute, which is done using a switch function. Python in Selenium is applied to the previous code. The value for the ID attribute is new_frame.
# Switch to the frame with id attribute
driver.switch_to_frame("new_frame")

Switching Using Name

The name attribute can also be used to locate an iframe on a web page.
# Switch to frame with name attribute
driver.switch_to_frame("apress")

Switching Using Index

If a web page contains more than one iframe (see Figure 7-2), switching to a defined iframe is done using an index value. This index value is provided by Selenium. The following is the HTML code for multiple frames.
<center>
<div><h5>Frame0</h5>
<iframe id="new_frame0" name="apress" src="https://www.apress.com" height="150" width="400"></iframe>
</div>
<div><h5>Frame1</h5>
<iframe id="new_frame1" name="bing" src="https://www.bing.com" height="150" width="400"></iframe>
</div>
<div><h5>Frame2</h5>
<iframe id="new_frame2" name="wiki" src="https://www.wikipedia.org" height="150" width="400"></iframe>
</div>
../images/494993_1_En_7_Chapter/494993_1_En_7_Fig2_HTML.jpg
Figure 7-2

Multiple iframes

Here is the Python code.
# Switch to frame 1
driver.switch_to_frame(0)
# Switch to frame 2
driver.switch_to_frame(1)
# Switch to frame 3
driver.switch_to_frame(2)

This method is not recommended because there may be changes to a frame’s position when other frames are added or removed from the web page.

Note

Selenium initializes the index value of an iframe on a web page from 0 (zero).

Switching as an Element

When multiple iframes on a web page have the same IDs and names, switching to a specific frame is difficult. In these cases, iframes can be identified by web elements. Web elements like ID and name are for switching to defined iframes.

Web element locators like XPath, CSS selectors, or classname are used to locate iframes. Other web locators, such as linkText or partialLinkText, cannot be used to locate iframes. A tag name web locator is not preferable when there are multiple iframes on a web page because it is difficult to select a unique one.
# Switch  to Iframes as Web Elements (Xpath)
# Switch to frame 1
driver.switch_to_frame("//iframe[@src='https://www.apress.com']")
# Switch to frame 2
driver.switch_to_frame("//iframe[@src='https://www.bing.com']")
# Switch to frame 3
driver.switch_to_frame("//iframe[@src='https://www.wikipedia.org']")

The iframes have been located using XPath, which is different for every frame.

Note

Since anchor tags are unavailable, link or partial link text is not used to switch an iframe.

Switching to a Main Iframe

There are two ways to switch to the main frame, which are discussed next.

Default Content

With default content, all available iframes are terminated, and the control is switched back to the web page. When the control is given back to the page, there is no interaction with the web elements present in an iframe.
driver.switch_to.default_content()

Parent Frame

With a parent frame, the current iframe is terminated, and the control is switched to its parent iframe. If there is no parent iframe corresponding to the selected or current iframe, then the current iframe is terminated, and the control is switched back to the web page.
driver.switch_to.parent_frame()

Frames with Waits

When handling iframes, you can use waits to switch to any frames because these frames take more time to load because of the external source or link. The following are a few examples of waits.

  • Frame ID :

iframe=WebDriverWait(driver, 5).until(EC.frame_to_be_available_and_switch_to_it(By.ID,"iframe_id"))

  • Frame Name :

iframe2 =WebDriverWait(driver, 5).until(EC.frame_to_be_available_and_switch_to_it(By.NAME,"iframe_name"))

  • Frame XPath :

iframe3 =WebDriverWait(driver, 5).until(EC.frame_to_be_available_and_switch_to_it(By.XPATH,"iframe_xpath"))

  • Frame CSS :

iframe4 =WebDriverWait(driver, 5).until(EC.frame_to_be_available_and_switch_to_it(By.CSS_SELECTOR,"iframe_css_selectors"))

Let’s now move on to discuss textboxes.

Textboxes

A textbox accepts user input in the form of text. This text is stored in a database or used by the web page. There are two types of textboxes: single line and multiline.

Single-line Textbox

A single-line textbox is typically seen as login options, where the login and password each require a single line of text. The textbox is a rectangle shape on a single line; it comes in varied sizes. The input tag in HTML defines a single-line textbox. The following is an HTML example of a single-line textbox. It is shown in Figure 7-3.
<h1>Single Line Textbox</h1>
<label for="book">Book Name:</label>
<input type="text" id="book1" name="book">
../images/494993_1_En_7_Chapter/494993_1_En_7_Fig3_HTML.jpg
Figure 7-3

Single-line textbox

A single-line textbox is commonly used in forms or as a search box on a web page. The Google search engine is the most-used single-line textbox.

Multiline Textbox

When the text uses more than one line, then a multiline textbox is needed. A multiline textbox is often used for comment boxes on e-commerce sites or to post on Facebook. The size can vary with respect to rows and columns (height and width). To define a multiline textbox, the <textarea> tag is used. Figure 7-4 shows textarea and the text values in it. The following is the HTML code for it.
<h1>Textarea</h1>
<label for="book">Book Name:</label><br>
<textarea id="book2" cols="50" rows="5">
Python Selenium Sujay.
</textarea>
../images/494993_1_En_7_Chapter/494993_1_En_7_Fig4_HTML.jpg
Figure 7-4

Multiline textBox

The textarea can be dragged at the lower-right corner to increase its size. The size of the textarea can be restricted by specifying its corresponding parameters.

Note

A non-editable textbox is used only to display the values associated with it.

Inserting Values

The textbox and textarea are used to get values from the user. These values are stored in a database or verified against the values in the database to authorize or apply restrictions, accordingly. To test whether a textbox or textarea can receive input, you need to send values to it. This is done by using the send_keys function in Python with Selenium.
#Import libraries
from selenium import webdriver
#Open Firefox browser
driver=webdriver.Firefox()
#Navigate to URL
driver.get("http://www.apress.com")
#Find Search box (Single Line Textbox)
text_box=driver.find_element_by_name("query")
#String Value to be Inserted i.e. query in search box
text_box.send_keys("Python Testing with Selenium")
#Insert Value
text_box.submit()
# Quit Firefox
driver.quit()
Note

Inserting values in a textbox and textarea are largely the same; the only difference is the lines that incorporate them.

Getting Values from Textbox and Textarea

A test case can retrieve the input values given to a textbox or textarea. Any values concerning these boxes are retrieved to compare with an expected value, in case there is an error. The following is the Python code for a textbox and a textarea.
#For Textbox
text_box=driver.find_element_by_id('book1').get_property('value')
print(text_box)
#ForTextarea
text_area=driver.find_element_by_id('book2').get_property('value')
print(text_area)

Summary

This chapter briefly introduced iframes and the ways in which an iframe can be located. There are instances when multiple iframes are present on a web page. The process of switching to a specific iframe was explained with an example.

Textboxes are broadly classified as two types—single line and multiline. A multiline textbox is also known as a textarea. You learned to identify both types of textboxes using locators. You also learned about inserting values in both textbox types and retrieving the value associated with a specified textbox.

The next chapter is about validating web elements.

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

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