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
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 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 can reference will be highlighted. Below is a screenshot of the sample output from 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 is also an 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.