6个Selenium对象识别辅助工具
上一篇 / 下一篇 2013-04-15 10:53:09 / 个人分类:自动化测试
6个Selenium对象识别辅助工具
原文:
Selenium 101 – 6 Tools to Help You with Object Recognition
http://www.joecolantonio.com/2013/02/04/selenium-101-6-tools-to-help-you-with-object-recognition/
Ven Dor Tool Meets Sir Lenny Um
Meet
Ven Dor Tool. Ven Dor Tool is a test automation engineer whose tool of
choice up until this point in his career has been QuickTest
Professional.
I'm
sure we can all understand how freaked out Ven was when his company
decided to stop using QTP and start using Selenium for their test
automation efforts. A QTP expert, Ven knows how to obtain properties to
identify elements using the QTP spy tool.
But what tool could he use to help him identify elements using Selenium?
Luckily,
Ven's new team member, Sir Lenny Um, assured him not to worry. Sir
Lenny Um showed Ven some tools to use for different browsers to assist
him in his Selenium automation object recognition efforts.
After
downloading and trying all the tools, Ven realized there was no need to
be stressed; he could easily leverage what he already knew using QTP
and automation and apply those same principles to Selenium. Life was
good.
Here
are the tools Sir Lenny Um recommended to Ven Dor Tool to aid him in
finding an element's identification properties to use in Selenium.
Firefox – Selenium IDE
For most applications, Ven was able to easily use the built in Selenium IDE in Firefox, which can bedownloaded from SeleniumHQ.
- Navigate tohttp://www.joecolantonio.com/HpSupport.html.
- In Firefox, click on Tools>Selenium IDE.
- Make sure the red record button is in the "Now recording.." mode.
- Select QTP11 from the "Select your tool & version" dropdown.
- Notice how the Selenium IDE automatically recognizes what information (id-tools) to use to identify the Select tool dropdown.
- Click on the select command to highlight
it, then click the "FIND'" button. This should show you which field it
is referring to by causing the field to blink yellow.
Sir
Lenny Um also showed Ven that rather than having to record all the
actions against his application, a quicker way to see an element's
locator properties would be to the Firefox add-in namedfirebug.
Firefox – Firebug
Firebug is an add-in for Firefox that allows users to inspect an application's element in real time. (To install, go tohttps://getfirebug.com/and click on the "Install Firebug" button.)
- Navigate tohttp://www.joecolantonio.com/HpSupport.html.
- Click on the bug icon in your Firefox toolbar to activate Firebug.
- Click on the "Click an element in the page to inspect" icon.
- Click on the "Select your tool & version" dropdown.
- In Firebug's HTML section, you should see the properties of the "Select your tool" dropdown.
- Notice how it shows you the id and name properties of the field.
Using Selenium IDE with Firebug
Once
you have the elements ID you can easily test it by placing the info in
the Selenium IDE Target field and click the Find button. If the element
is found it will be highlighted by Selenium IDE if it fails you will see
a [error] locator not found message in the IDE log. For example:
- Open Selenium IDE
- Make sure that recording is turned off
- Under the Table tab right click in the Command/Target/Value area and select 'Insert New Command'
- In the Target area enter the Firebug name info that was captured for the element using the spy feature:name=tools
- Click the 'Find' button
- The Select your tool & version combobox should be highlighted
- Change the Target info to: name=toolz
- Click on the Find button. You should receive the error message:
[error] locator not found: name = toolz
Ven
Dor Tool knows that in most applications there is always some element
that doesn't have easy-to- use identification properties. For these
types of elements, a common id technique is to use either CSS or XPath.
Trying to find the correct XPath syntax to use, however, is sometimes
difficult. Luckily, Sir Lenny showed him another handy Firefox add-in
called FirePath.
Firefox – Firepath
FirePath
is a Firebug extension that assists the user in finding elements that
match either a CSS selector or XPath expressions. To install, go tohttps://addons.mozilla.org/en-us/firefox/addon/firepath/and click on the "Add to FirePath" button. You will now have a new tab named FirePath located on the Firbug toolbar. To use:
- Click on the FirePath tab.
- Select XPath from the menu.
- Click on the "Element to inspect" option and click on "Select your tool & version".
- The XPath textbox should fill in with the full XPath that identifies the dropdown.
- Click the "Highlight" option, which will place a border around it in the browser.
You can also use FirePath to help you test your XPath expressions before using them in your test. For example:
- Delete the XPath from the XPath text field.
- Enter the following XPath expression://select[@id='areas'].
- Click the Highlight button.
- The "Is this supported" dropdown should now be highlighted.
Remembering
what Sir Lenny Um showed him early Ven Dor Tool excitedly enter the
XPath expression in the Selenium IDE Target field clicked the Find
button and was amazed to see the 'Is this supported' field get
highlighted.
Not
fond of having to install a bunch of add-ins for Firefox?
Unfortunately, the Selenium IDE only works with Firefox -- but other
browsers (like Google Chrome) have similar element identification
features already built in.
Google Chrome Developer Tools
To spy on an element:
- Startup Google Chrome.
- Go to:http://www.joecolantonio.com/HpSupport.html.
- In Chrome, click on Tools>Developer Tools.
- Click on the magnifying glass icon, then point to the "Select your tool & version" dropdown.
- The element's properties should appear under the Elements tab.
To test your XPath expressions in Google Chrome, you can use the $x syntax in the console to return your XPath element matches:
- Be sure you're still onhttp://www.joecolantonio.com/HpSupport.html.
- Click on the Console tab and type the following:
- $x("//select[@id='areas']")
- $x("//select[@id='areas']")
If a match is found, the console will return the element info. If no match was found, it will display empty brackets [].
For more info, check out the Google Developer's section inChrome Developer Tools.
There
are, of course, some applications that only work in Internet explorer.
What should Ven use for those applications? Once again, Sir Lenny has an
answer for this dilemma; he quickly starts up the IE developer toolbar
with the fire-ie-selenium tool.
IE Developer tool bar
If you're running any version of IE greater than IE6, the IE Developer tool bar is built in.
- Navigate tohttp://www.joecolantonio.com/HpSupport.html.
- Clicking on the F12 key will bring up the IE developers tools.
- Click on the Arrow icon and select the "Select your tool & version" dropdown.
- The dropdown's properties should appear in the HTML view:
For more functionality in IE, there's also a tool named fire-ie-selenium that can help you with XPath.
fire-ie-selenium
fire-ie-selenium provides users a method by which to find locators for an element in IE.
You can download fire-ie-selenium from:http://code.google.com/p/fire-ie-selenium/downloads/list.
This
tool is an XLSM file that is an extension for an Excel macro-enabled
workbook. To open fire-ie-selenium, double-click on the
Fire-IEBRowserx.x.xlsm file.
- Double click on the Fire-IEBrowser.
- Microsoft Excel should appear. (If you see an enable button or an enable content button, click on it.)
- Click the Proceed button on the Fire-IE Browser – Web Element Details dialog.
- In the FIRE-HTML screen, enterhttp://www.joecolantonio.com/HpSupport.htmlin the URL field.
- Click the Load button.
- Click on the "Select your tool & version".
- Notice how all the CSS and XPath information for that element is automatically populated!
- Clicking on the Insert button places all of the element's details into an Excel spreadsheet.
Summary
Using one the six tools that Sir Lenny Um showed Ven:
- Firefox – Selenium IDE
- Firefox – Firebug
- Firefox – Firepath
- Google Chrome Developer Tools
- IE Developer tool bar
- fire-ie-selenium
Ven was certain he could handle any element that came his way. Now, hopefully, you can too!
What's up with the style. of this blog post?
First I'd like to give a big thank you shout-out toLaura Shadlefor gifting me the book "The Art of Explanation" offmy Kindle wish list!
I decided to take a different approach with this blog post. I've been reading the bookThe Art of Explanation, and am trying to use some of the communication tips the authors offer. Based on the amount of feedback I receive, I'm hoping to be able to gauge how well I was able to get my message across. I hope you find it helpful!
TAG:
标题搜索
日历
|
|||||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
1 | 2 | 3 | 4 | ||||||
5 | 6 | 7 | 8 | 9 | 10 | 11 | |||
12 | 13 | 14 | 15 | 16 | 17 | 18 | |||
19 | 20 | 21 | 22 | 23 | 24 | 25 | |||
26 | 27 | 28 | 29 | 30 | 31 |
我的存档
数据统计
- 访问量: 157818
- 日志数: 72
- 建立时间: 2012-12-04
- 更新时间: 2016-07-25