How to inspect the web elements in the Safari mobile web browser – iOS?

In order to automate the mobile web application running in the iOS specific safari mobile web browser using the Appium, we need to inspect the web elements available in the mobile web browser. Web elements information should be captured and utilised in the automation scripting part associated with the development IDE such as Eclipse.

We are going to use the Safari Develop menu available in the Mac and the iOS simulator or real device browser will sync with the Mac develop menu to identify the required web element information as follows;

Prerequisite in Mac;

1. Open the Safari browser in Mac

2. Go to ‘Preferences’ under the ‘Safari’ tab

3. Go to Advanced Tab in the opened window

4. Select the checkbox of ‘Show Develop menu in menu bar’ as mentioned in the below screenshot

5. Now, you could see ‘Develop’ menu in the safari web browser

Prerequisite in iPhone or iOS Simulator;

In this post, I’ve used the iOS Simulator for inspecting the web elements.

1. Go to the ‘Safari’ under the ‘Settings’

2. Go to Advanced option (scroll down if you are using iOS simulator)

3. Enable the Web Inspector option as mentioned in the below screenshot

Please open the mobile web application in the Safari mobile web browser available in the iPhone real device or iOS simulator as mentioned below;

Example: https://www.india.ford.com

Now, Go to the Safari browser in the Mac and select the ‘Develop’ menu. Select the ‘Simulator’ option under the ‘Develop’ menu and you could see the mobile website address as mentioned in the below screenshot;

Select the website address and you could see the web inspector window in the Mac as mentioned below;

Now bring the iOS simulator safari browser window and web inspector window each other, select the required web elements in the mobile web browser window as mentioned in the below screenshot;

After selecting the ‘start element selection’ icon, you could see the icon colour changed from Grey to Blue;

Select the required web element in the safari mobile web browser using the ‘start element selection’ icon and its information will be displayed in the web inspector window as specified in the below screenshot;