Dismiss Notice

Register now to be one of the first members of this SharePoint Community! Click here it just takes seconds!

Dismiss Notice
Welcome Guest from Country Flag

Open Source tools to capture UI Elements – Web/Mobile Platform

Discussion in 'Official Microsoft News' started by Ganesh Alala Sundaram, Apr 6, 2017.

Thread Status:
Not open for further replies.
  1. Ganesh Alala Sundaram

    Ganesh Alala Sundaram Guest

    Blog Posts:
    0
    This content will help you to choose the appropriate tool for capturing UI elements for any automation.

    Web Inspector

    By default all the browsers have the developer tools integrated.

    a. Built-in Browser tools

    Pressing F12 in keyboard launches the developer tool. Here the user can point on any element -> Right click and Click on ‘Inspect Element’ which launches a pane which highlights the property of the element.

    IE Browser
    [​IMG]

    Chrome Browser

    [​IMG]

    Firefox Browser

    [​IMG]

    Plugins which comes handy !

    d. Web Developer tool

    It’s a Chrome/Firefox plugin which can be installed from this location

    For Firefox : https://addons.mozilla.org/en-US/firefox/addon/web-developer/ .

    Fore Chrome: https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

    This includes all-in-one functionality of UI web dev. As displayed in the screen below, it has the ability to display all the parameters of an element.

    [​IMG]

    [​IMG]



    e. Xpath Helper

    Generally for automation we use XPath for navigating to the elements from the root node.

    For Chrome browser, Download the plugin from https://chrome.google.com/webstore/detail/xpath-helper/hgimnogjllphhhkhlmebbmlgjoejdpjl

    Press ‘Ctrl+Shift+X’ to launch the Xpath Helper. Drag the mouse to any element by holding on the ‘Shift’ key. The below screenshot helps to identify the xpath of the element.

    [​IMG]

    f. Css Viewer

    Inspect Css using the below plugins

    For Firefox download from https://addons.mozilla.org/en-US/firefox/addon/cssviewer/

    For Chrome, https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce

    Click on the CSSViewer and Scroll over an element to view its properties.

    [​IMG]




    Mobile Applications



    a. Install Android SDK. UIAutomationviewer comes along with SDK.

    Open command prompt and navigate to Android SDKtools. Launch uiautomatorviewer.bat file which will be displayed as below.



    [​IMG]

    Click on the Device Screenshot (second icon from left in the above screen)

    Once captured, the screen is visible with the UI metadata. Click on number ‘7’. Once selected, the number ‘7’ is highlighted and get the ID value under the resource-id node.

    [​IMG]

    Continue reading...
     
Thread Status:
Not open for further replies.

Share This Page

LiveZilla Live Chat Software