Safari’s native development tool is Safari Inspect Element. Unlike the other browsers, Safari Inspect Element is not activated by default. We will be showing step by step instructions on how to activate it. Safari also offers a different feature from the other browsers where the user can view any webpage
in a mobile device emulator. For mobile webpage testing purposes, this feature is extremely useful. 3Qi Labs also offers this feature through our Awetest Responsive Testing Utility, emulating views for mobile phones, tablets, and different browser breakpoints.
Safari Inspect Element
In order to use Inspect element the user must first click on Safari in the browser toolbar and select Preferences.
Within the Safari’s Preference window select Advanced, then select ‘Show Develop menu in menu bar’. After doing this for the initial time using the Inspect tool then the user can proceed normally for all following times.
The tool can now be accessed by right clicking in the browser window and selecting “Inspect Element”.
Once Inspect Element is launched, the user can now identify any object that is on the page by clicking the Inspect magnifying glass button.
By moving the mouse over the browser window, elements that the tool is able to reference will be highlighted. Below is a screenshot of sample output from the Apple’s “Store” button located on the site’s main landing page.
Note that the values would be identical to the values returned by all of the Browser Developer Tools on the other major browsers (IE, Firefox, Chrome), which can be seen here.
Mobile Device Emulator
For mobile testing purposes the user has the option to view the browser in different mobile versions. Inspecting Elements while on the mobile device emulator works the same way as on the desktop site. To get to the Device Emulator the user simply needs to go to the Safari menu bar Develop > User Agent > Safari iOS 7 – iPhone.
This allows for the browser to be viewed as if it were being used on an iPhone. There are also option for iPod touch and iPad viewing.
Now that you know how to inspect HTML elements in Safari, learn how to properly harness Watir and Selenium Webdriver to build web and mobile automation scripts with our How To series. These guides detail Watir, Selenium, and Ruby tips and tricks, useful to anyone ranging from an automation novice to a seasoned scripting veteran.