Conditions to Inspect WebView Elements We can use Chrome DevTools to debug and inspect WebView content in Android applications. 1)It requires Android version 4.4 or later i.e. API level >=19. 2)WebView debugging should be enabled; developer must enable ‘setWebContentsDebuggingEnabled’ flag in the WebView class. This flag enables debugging of web contents (HTML / CSS / JavaScript) loaded into any WebViews of app. 3)Chrome browser with version 32 or greater to be installed on desktop and Android device and DESKTOP_ANDROID_CHROME_BROWSER_VERSION >= ANDROID_DEVICE _CHROME_BROWSER_VERSION 4)In addition to this, Appium during automation recognize the WebView context only if webview debugging is enabled from within app. We can inspect webview on LOLLIPOP / KITKAT Android devices. 5)Appium also uses Selendroid under the hood for webview support on devices older than 4.4. To use this feature of appium, it is mandatory to specify “automationName” as “selendroid” in desired capabilities passed to Appium server. If our hybrid app under test is build in such a way that it supports minimum Android version 4.0.4 (API Level 14) and max Android version 4.3 (API level 18) then we can inspect webview elements and execute our automation tests using selendroid mode of appium.
Conditions to Inspect WebView Elements
Inspect Android Mobile Web Elements
Inspect Android Mobile Web Elements You want to use the Chrome ADB plug-in to find Android mobile web elements. 1. Go to Settings ➤ About Phone and tap “Build number” seven times (Android 4.2 or above); then return to the previous screen and find “Developer options” 2. Tap “Developer options” and click On in the developer settings. (You will get an alert to allow the developer settings; just click the OK button.) Make sure the “USB debugging” option is checked 3. Connect your Android device to your computer (you should have installed the USB driver for your device). After connecting, you will get an alert on your device to allow USB debugging; just tap OK. 4. Download and install the Chrome ADB plug-in from https:// chrome.google.com/webstore/detail/adb/dpngiggdglpdnj doaefidgiigpemgage?hl=en-GB Make sure you have installed Chrome version 32 or newer. 5. Open Chrome on your computer and click the ADB plugin icon, which is in the top-right corner, and click View Inspection Targets6. Open Chrome on your device and navigate to the desired URL (Google.com). 7. Go to chrome://inspect/#devices . This page will display all the connected devices along with open tabs and web views. Make sure “Discover USB devices” is selected. Now click the “inspect” link to open the developer tools
8. You will get the screen shown in Figure . Now click the screencast icon in the top-right corner to display your device screen. You are all set to find elements with the Chrome ADB plug-in.
9. Here you will find the ID of an element using the Chrome ADB plug-in remotely, with an example of the Google search page. a. Navigate to https://www.google.com on your mobile Chrome browser. b. Click the Inspect link from the ADB plug-in of your computer’s Chrome browser. c. Click the inspect element icon and mouse over the search box. How It Works USB debugging should be enabled on the device so that it is recognized by a computer as a connected device. The Chrome ADB plug-in allows you to view all the connected devices and web views. Select the device/web view and click Inspect to view mobile web elements and their properties.
Subscribe to:
Posts (Atom)