

Otherwise, you won't see your device in the Develop menu.

If you're on a real device, you'll need to open up the Advanced settings menu under the Safari preferences, and make sure that "Web Inspector" is turned on. (If you're brand new to web development, it's worth getting familiar with reading HTML, since that is how you'll know which locator strategies can be used to find an element, and the particular selector that will do the trick). It happens to have a unique class, so I could find this element with a simple driver.findElement(By.cssSelector(".toggleMenu")).

For example, in the image above, I've selected the menu element for the mobile version of the Appium Pro website. You can now do everything you would normally do in Safari's developer tools, including exploring the HTML hierarchy (complete with colored rectangles being drawn over the corresponding elements in the simulator)! You will, of course, need to know how to turn this information into Appium locators / selectors. Navigating into that menu and clicking on the appropriate website will pop up an inspector window for you: (Don't see the Develop menu? Go to Safari's preferences, then the "Advanced" tab, and make sure "Show Develop menu in menu bar" is checked)įrom that menu, you should see a new entry in the list of devices, reflecting the open simulator. If you're running an iOS simulator with Safari open, and have navigated to the web page you want to automate, inspecting is as easy as opening up the desktop version of Safari, and going to the "Develop" menu in the menu bar: The trick is to mix in the desktop versions of those browsers on your computer! Inspecting Mobile Safari and Hybrid Apps on iOS What if you have been asked to automate a web app using mobile Safari or Chrome? Or what if your app is a hybrid app? How do you know how to find the web elements inside the app's webview? If you're familiar with Selenium, you might have started looking for some "developer tools" option in Safari or Chrome on your mobile device, only to be left empty-handed.

More on that, and other tools for inspecting native apps, in a future edition!įor now, outside the world of native apps, the picture gets more complicated. Appium Desktop's Inspector has a nice point-and-click interface you can use to get information about on-screen elements, including suggested locator strategies and selectors. The question becomes, how do you turn UI components on the screen into Appium's locator strategies? I'm sure many of you have used the wonderful Appium Desktop as a tool for inspecting your native mobile applications. Often you're just given 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 accessed from automation. One of the prime problems facing many automation engineers is how to start testing a new app.
