In the previous post, we have shown you how to perform synchronized testing using Browser Sync. If you have been following the post, you see that “synchronized testing” will boost your development workflow in terms of testing mobile-optimized website across multiple browsers and devices simultaneously.
Interactions within the browsers such refreshing, clicking, and filling out forms are reflected across the browsers and connected devices in real-time.
But we know that everyone has their own working styles. A few people may prefer using Command Line, while some may prefer using an Application with a graphical interface as that is more intuitive to them. So, in this post, we are going to show you an alternative to doing synchronized testing using an Application called Ghostlab. Let’s take a look.
Ghostlab comes at a US$49 price for a single license, which can be used in two computers. It also provides a Trial version with all the features in place, so you can explore it before deciding to buy.
It is available for Windows and OS X. Grab it here. Install it per your OS procedure, then launch it.
We are ready to use Ghostlab.
The first thing that we have to do is add our projects to Ghostlab. There are two options: we can drag-and-drop the project directory onto the application’s window, or we can copy-and-paste the URL address of the project, like so.
Ghostlab registers all the added projects as follows
We can also drag-and-drop the project list to switch their positions.
Furthermore, we can configure each project. Move the mouse cursor over the project icon and it will turn into a gear icon. Click on the icon to expand it for configuration options displayed in an array of tabs.
Within these tabs, we can turn the Ghostlab server on or off, select which Browser to view the project on, change the project title or the URL, etc.
Turning On The Server
As we mentioned above, Ghostlab is equipped with a built-in server which works for both static sites (only HTML and CSS) and dynamic sites which are built with PHP, Ruby, etc. Once the configurations are all set up, we can move on to turning the server on. To do so, you can simply click the arrow icon of the project list.
When the server is “on”, you will see the notification showing the server URL and Port at the bottom-left of the window application. Click on the rocket icon to launch the project in the default browser, or click the browser icon below the rocket to select other browsers. You don’t have to copy-paste the URL.
Note: The server is applicable only for one project at a time. If you turn on the server in another project, it will switch off for the older project and turn on for the newly opened one.
When we launch the project in any browser, Ghostlab will register it on the right sidebar.
We can debug the project on each of these connected browsers/devices using the Ghostlab built-in code inspector. Click on the
< >, and the code inspector (which looks similar to Chrome’s) will pop up.
When we trawl through the DOM tree, the respective elements in the browser is highlighted.
And ultimately you can also perform “synchronized testing”, similar to Browser Sync. It will automatically refresh all the connected Browsers whenever a change is made. User interactions like scrolling, clicking, and filling out forms are also reflected at the same time.
We have shown you how to perform “synchronized testing” both using a command line tool, Browser Sync, and an application with graphical interface. Both serve the features very well. My only complaint with Ghostlab is that the UI seems a bit out of place in OS X; I’m sure it looks fine in Windows though.
Lastly, it is up to you to decide which one is best suited for your workflow and budget.