網站自動化測試對於 iFrame的處理

網站自動化測試對於 iFrame的處理

iFrame 如果沒有適當的辨別就會導致網頁元件找不到的問題，

因此，對於自動化測試程式，正確的辨別iframe再去定位網頁元件是必須的。

iFrame 由於往往無法在網頁上立刻看出該網頁元件是否處於一個iframe 中，

這篇文章主要介紹一些簡單的方式來判別 iframe ，最後用 Python/Selenium實作範例。

什麼是 iFrame

簡單來說就是網頁中夾帶網頁，例如下列的網頁，有 iframe A與 iframe B

iframe A可以顯示 yahoo 的網站內容，iframe B可以顯示 Google 網頁內容

因此，如果我們要定位的網頁元件位於 iframe A內，例如網頁按鈕，

就必須先定位到 iframe A，之後才可以定位到 iframe 網頁內的按鈕。

如果忽略定位 iframe A 的動作而直接定位按鈕的話，是會導致網頁元件找不到的錯誤。

一個簡單的 iframe 語法為

<frame id=”iframe A” src=”frame_a.htm“>

<frame name=”iframe B” src=”frame_b.htm“>

多半情況下frame 我們可以透過 frame id 或是 name 來定位到該iframe，

但是如果沒有 id or name的話，就必須要靠 index (從0開始)的方式定位。

如何得知該網頁元件是否在 iframe 內?

我們以這個網頁為例子:

https://dl.dropboxusercontent.com/u/55228056/Frames.html

這個網頁其實有三個 iframe，但是我們無法一眼看出。

因此，我們可以在所要定位的網頁元件上方按滑鼠右鍵，(以FireFox為例)

例如：”This Frame doesn’t have id or name” 的這個文字區塊按右鍵

如果該網頁元件 (文字區塊) 處在iframe中時，右鍵選單就會多出現 “This Frame”

iFrame 的 ID or Name

知道該網頁元件是處於 iframe 中，接下來要如何得知該 iframe ID or Name呢?

同樣的我們在該網頁元件上

1. 按右鍵 > Inspect Element (以 FireFox為例)

2. 下方的 Web Developer 工具，將tab 移動至 frame

3. 將滑鼠移動到”frame_b.html” 上方

4. 畫面上方會看到該HTML frame 所對應的 iframe 會呈現藍色

因此我們可以確定中間的那個 iframe 沒有 frame id 或是 name

<frame src = “frame_b.htm”>

Python實作

如何定位到 iframe呢?  driver.switch_to_frame(name or ID)

其中 left 可以是 iframe 的 id 或是 name。

driver.switch_to_frame(“left”)
driver.switch_to_default_content()

定位結束後必須將該定位切換回原網頁。否則之後的 iframe定位會失敗。

driver.switch_to_default_content()

如果該 iframe 沒有 ID or Name 怎麼辦呢? 可以用 index 從 0開始。這個例子有三個 iframe分別為

driver.switch_to_frame(0)

driver.switch_to_default_content()
driver.switch_to_frame(1)

driver.switch_to_default_content()

 

driver.switch_to_frame(2)
driver.switch_to_default_content()

[pastacode lang=”python” message=”” highlight=”” provider=”manual”]

from selenium import webdriver
from array import *
import time, unittest

class FrameTest(unittest.TestCase):
	def setUp(self)	:
		self.driver = webdriver.Chrome()
		self.driver.get("http://dl.dropbox.com/u/55228056/Frames.html")
	
	def  test_select_frame_with_id_or_name(self):
		driver = self.driver
		
		#Activate the frame on left side using it's id attribute
		driver.switch_to_frame("left")
		
		#Get an element from the frame on left side and verify it's contents
		leftmsg = driver.find_element_by_tag_name("p")
		self.assertEquals("This is Left Frame", leftmsg.text)
		
		#Activate the Page, this will move context from frame back to the Page
		driver.switch_to_default_content()
		
		#Activate the frame on right side using it's name attribute
		driver.switch_to_frame("right")
		
		#Get an element from the frame on right side and verify it's contents
		rightmsg = driver.find_element_by_tag_name("p")
		self.assertEquals("This is Right Frame", rightmsg.text)
		
		#Activate the Page, this will move context from frame back to the Page	
		driver.switch_to_default_content()

	def test_select_frame_by_index(self):
		driver = self.driver
		
		#Activate the frame in middle using it's index. Index starts at 0
		driver.switch_to_frame(1)
		
		#Get an element from the frame in the middle and verify it's contents
		leftmsg = driver.find_element_by_tag_name("p")
		self.assertEquals("This Frame doesn't have id or name", leftmsg.text)
		
		#Activate the Page, this will move context from frame back to the Page
		driver.switch_to_default_content()
	
	

	
	
	def tearDown(self):
		self.driver.close()
		
if __name__ == "__main__":
	unittest.main()

[/pastacode]