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.

Click Preferences under the Safari Menu.

Click Preferences under the Safari Menu.

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.

safari inspect element

Check the Show Develop menu in menu bar checkbox

The tool can now be accessed by right-clicking in the browser window and selecting “Inspect Element”.

Inspect element under our right click menu.

Inspect element under our right-click menu.

Once Inspect Element is launched, the user can now identify any object that is on the page by clicking the Inspect magnifying glass button.

Clicking the magnifying class will allow you to identify HTML elements on the page.

Clicking the magnifying glass will allow you to identify HTML elements on the page.

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.

We can see the corresponding HTML in the inspector for our Store header element.

We can see the corresponding output in the inspector for our Store header element.

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.

1

Select User Agent under the Develop Menu, allowing us to choose from a variety of devices.

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.

The Safari browser displaying at a mobile breakpoint.

The Safari browser displaying at a mobile breakpoint.

 

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.