One of the prime problems facing many automation engineers is how to commence testing a new app. Often you & # x27; re just afford a build of the app and a set of user flows to create automated test scenarios for -- no specific instructions from the developers on how individual elements might be access from automation. The question becomes, how do you turn UI ingredient on the screen into Appium & # x27; s? I & # x27; m sure many of you experience used the wonderfulAppium Desktopas a tool for inspecting your native mobile applications. Appium Desktop & # x27; s Inspector has a skillful point-and-click interface you can use to get information about on-screen elements, including suggested locator strategies and chooser. More on that, and other tools for inspecting aboriginal apps, in a future edition!

For now, outside the world of aboriginal apps, the picture gets more complicated. What if you experience been asked to automatise a web app using wandering Safari or Chrome? Or what if your app is a hybrid app? How do you know how to discover the web elements inside the app & # x27; s webview? If you & # x27; re familiar with Selenium, you might have started looking for some & quot; developer tools & quot; pick in Safari or Chrome on your roving device, only to be left empty-handed. The trick is to mix in the desktop variation of those browser on your computer!

Inspecting Mobile Safari and Hybrid Apps on iOS

If you & # x27; re running an iOS simulator with Safari exposed, and have pilot to the web page you want to automate, inspecting is as easy as opening up the desktop version of Safari, and going to the & quot; Develop & quot; menu in the menu bar:

(Don & # x27; t see the Develop menu? Go to Safari & # x27; s preferences, then the & quot; Advanced & quot; tab, and make sure & quot; Show Develop carte in menu bar & quot; is ensure)

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

From that menu, you should see a new entry in the list of device, reflecting the open simulator. Navigating into that carte and clicking on the appropriate website will pop up an examiner window for you:

You can now do everything you would normally do in Safari & # x27; s developer tools, including exploring the HTML hierarchy (complete with non-white rectangles being describe over the comparable elements in the simulator)! You will, of course, need to know how to turn this information into Appium locater / picker. For example, in the picture above, I & # x27; ve choose the card component for the mobile version of the Appium Pro website. It happens to have a unique form, so I could notice this element with a simple driver.findElement (By.cssSelector (& quot; .toggleMenu & quot;)).

(If you & # x27; re brand new to web maturation, it & # x27; s worth have familiar with reading HTML, since that is how you & # x27; ll know which locater strategies can be used to find an element, and the particular selector that will do the trick).

If you & # x27; re on a real device, you & # x27; ll ask to open up the Advanced setting card under the Safari preferences, and make sure that & quot; Web Inspector & quot; is turned on. Otherwise, you won & # x27; t see your device in the Develop menu.

The good tidings is that if you & # x27; re bunk a hybrid app, this same strategy should work without any additional setup -- you & # x27; ll just see your webview as one of the inspectable Page in the Develop menu!

Inspecting Mobile Chrome

We can employ a alike scheme for Chrome, though in my opinion the experience is not rather as seamless. Again, the first thing you & # x27; ll do is load up your page in the Chrome browser on your aper or device. Then, open up the desktop version of Chrome, and navigate tochrome: //inspect # device. You should see a window that looks like this:

From here, you should see your emulator or device listed, and if you & # x27; re prosperous, the specific page you & # x27; re looking at. Now you have but to tick & quot; inspect & quot; and you & # x27; ll be on your way.

If you don & # x27; t see your device or page, it could be for a few different reasons. First of all, emulators ask to forward the remote debugging porthole to the host system so that desktop Chrome (which is running on the host system) can access that port in order to facilitate the inspection. So the first thing to try is the ADB command which forward the appropriate porthole:

adb forward tcp:9222 localabstract: chrome_devtools_remote

Running this command should get your device to pop up in the Inspect list. Now, once you & # x27; ve clicked & quot; inspect & quot;, you & # x27; ll again get a full-featured examiner window with all the developer tools your little robot heart partiality:

The only downside to the Chrome examiner is that linger over elements in the HTML source does not highlight the corresponding element on the device blind. But anyway, you can use it in the same way I trace above for Safari to influence your locator strategies and chooser.

For hybrid apps, you might not need to do anything else. If you have opened up your app, navigated to the position containing the webview, and see the webview contents in the Inspect window, then great! If not, it could be that the webview has not turned on debugging. For security, Android requires that each webview explicitly allows debugging, otherwise debugging via Chrome will not work.

As a commodious way of applying this scope to all webviews in your app, you (or your developer) can simply ensure that the next method is called on the WebView class:

WebView.setWebContentsDebuggingEnabled (true);

Re-compile your app, launch it, and you should now see your webview in a debuggable, inspectable state!

4 Parts

Connet Now