{"id":654,"date":"2021-07-07T14:45:51","date_gmt":"2021-07-07T14:45:51","guid":{"rendered":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2021\/07\/07\/inspecting-native-apps-element-android-and-ios\/"},"modified":"2021-07-07T14:45:51","modified_gmt":"2021-07-07T14:45:51","slug":"inspecting-native-apps-element-android-and-ios","status":"publish","type":"post","link":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/2021\/07\/07\/inspecting-native-apps-element-android-and-ios\/","title":{"rendered":"Inspecting Native Apps Element (Android and iOS)"},"content":{"rendered":"

<\/p>\n

\n
\n
\n
\n
<\/div>\n
\n
\n
<\/div>\n<\/div>\n

<\/path><\/symbol>\n<\/path>\n<\/symbol>\n<\/path>\n<\/symbol><\/svg><\/p>\n

<\/div>\n
\n
<\/div>\n
\n
<\/path><\/svg><\/div>\n
\n
table of contents<\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n
\n
\n
<\/div>\n
\n
\n
\n
What is DOM?<\/a><\/div>\n
What are locators?<\/a><\/div>\n
Inspecting Page elements using UIAutomatorviewer<\/a><\/div>\n
Inspecting Page elements using Appium inspector<\/a><\/div>\n
Let’s start creating locators<\/a><\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n

Before inspecting elements we will learn about DOM , locators.<\/p>\n

\n


\n<\/ins>\n<\/div>\n

What is DOM?<\/b><\/h3>\n

DOM<\/b> stands for Document Object Model. In simple words, DOM<\/b> specifies the structural representation of HTML elements. There are many ways through which we can identify and locate a web element using DOM.<\/b><\/p>\n

<\/b><\/p>\n

    \n
  1. driver<\/b>.findElementsByAccessibilityId(<\/b>“”<\/b>)<\/b>;<\/b><\/em><\/li>\n
  2. driver<\/b>.findElementsByClassName(<\/b>“”<\/b>)<\/b>;<\/b><\/em><\/li>\n
  3. driver<\/b>.findElementsByXPath(<\/b>“”<\/b>)<\/b>;<\/b><\/em><\/li>\n
  4. driver<\/b>.findElementById(<\/b>“”<\/b>)<\/b>;<\/b><\/em><\/li>\n<\/ol>\n

    <\/b><\/em><\/p>\n

      \n
    1. driver<\/b>.findElement(By.id<\/i>(<\/b>“”<\/b>))<\/b>;<\/b><\/em><\/li>\n
    2. driver<\/b>.findElement(By.className<\/i>(<\/b>“”<\/b>))<\/b>;<\/b><\/em><\/li>\n
    3. driver<\/b>.findElement(By.xpath<\/i>(<\/b>“”<\/b>))<\/b>;<\/b><\/em><\/li>\n<\/ol>\n

      <\/b><\/p>\n

      Also we have customized xpath locators. Those we will discuss\u00a0 later.<\/b><\/p>\n

      You must be thinking there is one method shown in 2 ways. Such as<\/p>\n

      driver<\/b>.findElement(By.id<\/i>(<\/b>“”<\/b>))<\/b>; and <\/b>driver<\/b>.findElementById(<\/b>“”<\/b>)<\/b>;<\/b><\/p>\n

      The first one is suited for Android and the last one for iOS.<\/b><\/p>\n

      <\/b><\/p>\n

      What are locators?<\/b><\/h3>\n

      By using Locators<\/b> we can access the web page elements such as textboxes, links, checkboxes, radio buttons, seek bar\u00a0 etc. While the app is being developed, a clear and consistent locator should be given.<\/p>\n

      Different locators:<\/b><\/p>\n

      Id<\/strong><\/em>, AccessibilityId<\/strong><\/em>, ClassName<\/strong><\/em>, xpath<\/strong><\/em>, content-desc <\/strong><\/em>etc.<\/p>\n

      Inspecting Page elements using UIAutomatorviewer<\/h3>\n

      Pre-requisites:<\/p>\n

      The device\/emulator is up and running.<\/p>\n

      USB debugging is enabled.<\/p>\n

      Device is detected by adb.<\/p>\n

      The desired app is opened on mobile.<\/p>\n

      Steps:<\/strong><\/p>\n

        \n
      1. Go to the ~\/ANDROID_HOME\/tools\/bin\/ folder.<\/li>\n
      2. Run the uiautomatorviewer batch file (for windows) or sh file (for mac).<\/li>\n
      3. This will open the windows as shown below.<\/li>\n<\/ol>\n

        \"\"<\/p>\n

        \u00a0 \u00a0 \u00a0 4. Then it will capture the screenshot and show it with Page object hierarchy and attributes with values.<\/p>\n

        \"\"<\/p>\n

        \"\"<\/p>\n

        Inspecting Page elements using Appium inspector<\/h3>\n

        Appium inspection<\/b> is a standard procedure to identify the UI elements of a mobile app uniquely. It works with both real devices or simulators(iOS) or emulators(Android<\/b>).<\/p>\n

        Pre-requisites:<\/span><\/b><\/p>\n

        For Android.<\/b><\/p>\n

          \n
        • A standalone version of Appium (not via npm) is installed.<\/li>\n
        • The device\/emulator is up and running.<\/li>\n
        • USB debugging is enabled.<\/li>\n
        • Device is detected by adb.<\/li>\n
        • The apk is available.<\/li>\n
        • The apk is not available and the app is already installed then we can use app package and activity.<\/li>\n<\/ul>\n

          Steps:<\/strong><\/p>\n

            \n
          1. Launch Appium server.<\/li>\n
          2. This will show the below window.<\/li>\n<\/ol>\n

            \"\"\u00a0 \u00a0 \u00a0 \u00a03. Click to the search button, this will take you to the next setting desired capabilities screen.<\/p>\n

            \"\"<\/p>\n

            \u00a0 \u00a0 \u00a04. Set the correct desired capabilities as your device\/emulator\/simulator and click to start the session.<\/p>\n

            \"\"<\/p>\n

            \u00a0 \u00a0 \u00a0 5. And we have reached the screen from which we can inspect the element.<\/p>\n

            \"\"<\/p>\n

            \u00a0 \u00a0 \u00a0 \u00a06. For iOS, we can set the desired capabilities as<\/p>\n

            \"\"<\/p>\n

            \u00a0 \u00a0 \u00a07. If app is already installed we can use as below (Android)<\/p>\n

            \"\"<\/p>\n

            \u00a0 \u00a0 \u00a08. For iOS<\/p>\n

            \"\"<\/p>\n

            Let’s start creating locators<\/h3>\n

            Take a look at the below screenshots taken from an android app using uiautomatorviewer<\/b><\/em>. The highlighted element has most of the attributes. Let’s create locators for the same element in many ways.<\/p>\n

            \"\"<\/p>\n

            Such as:<\/strong><\/p>\n<\/div>\n

            \n
            <\/div>\n
            \n
            \n

            driver<\/b>.findElement(By.xpath<\/i>(<\/b>“\/\/android.widget.TextView[@content-desc=\u2019Verify Phone Number\u2019]”<\/b>))<\/b>;<\/b><\/em><\/strong><\/p>\n

            driver<\/b>.findElement(By.xpath<\/i>(<\/b>“\/\/android.widget.TextView[@index=\u20190\u2019]”<\/b>))<\/b>;<\/b><\/em><\/strong><\/p>\n

            driver<\/b>.findElement(By.xpath<\/i>(<\/b>“\/\/android.widget.TextView[@content-desc=\u2019Verify Phone Number\u2019 and @index=\u20190\u2019]”<\/b>))<\/b>;<\/b><\/em><\/strong><\/p>\n

            driver<\/b>.findElement(By.xpath<\/i>(<\/b>“\/\/*[contains,(@content-desc=\u2019Verify Phone Number\u2019)]”<\/b>))<\/b>;<\/b><\/em><\/strong><\/p>\n

            List<MobileElement> parent =\u00a0<\/b>driver<\/b>.findElements(By.xpath<\/i>(<\/b>“\/\/android.view.ViewGroup[@index=’9]”<\/b>))<\/b>;<\/b><\/em><\/strong><\/p>\n

            parent.get(<\/b>0<\/b>).click()<\/b>;<\/b><\/em><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n

            \n

            \"\"<\/p>\n

            Few more locators:<\/strong><\/p>\n<\/div>\n

            \n
            <\/div>\n
            \n
            \n

            driver<\/span><\/b>.findElement(By.xpath<\/i>(<\/b>“\/\/android.widget.TextView[@text=\u2019Verify Phone Number\u2019 and @index=\u20190\u2019]”<\/b>))<\/b>;<\/b><\/span><\/p>\n

            driver<\/b>.findElement(By.xpath<\/i>(<\/b>“\/\/android.widget.TextView[@index=\u20190\u2019]”<\/b>))<\/b><\/span>;<\/span><\/b><\/p>\n<\/div>\n<\/div>\n<\/div>\n

            \n

            \"\"<\/p>\n<\/div>\n

            \n
            <\/div>\n
            \n
            \n

            driver<\/b>.findElement(By.xpath<\/i>(<\/b>“\/\/*[contains,(@resource-id=\u2019android:id\/button1\u2019)]”<\/b>))<\/b>;<\/b><\/p>\n

            driver<\/b>.findElement(By.xpath<\/i>(<\/b>“\/\/*[@resource-id=\u2019android:id\/button1\u2019]”<\/b>))<\/b>;<\/b><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

            <\/div>\n<\/section>\n

            <\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"

            table of contents What is DOM? What are locators? Inspecting Page elements using UIAutomatorviewer Inspecting Page elements using Appium inspector Let’s start creating locators Before inspecting elements we will learn about DOM , locators. What is DOM? DOM stands for Document Object Model. In simple words, DOM specifies the structural representation of HTML elements. There […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-654","post","type-post","status-publish","format-standard","hentry","category-appium","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=654"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/654\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}