Synchronized Testing using Ghostlab
Interactions within browsers, such as updating, clicking and filling out forms, are reflected in real time on browsers and connected devices. But we know that everyone has their own style of work. Some users may prefer to use the command line, while others prefer to use an application with a graphical interface, as it is more intuitive for them. In this article, we are going to show you an Alternative to synchronized tests with an application called Ghostlab. Let’s see.
First Steps
Ghostlab costs $49 for a single license that can be used on two computers. It also offers a trial version with all the existing features so that you can explore them before deciding to buy. It is available for Windows and OS X. Install it according to the procedure of your operating system, then launch it.
Project configuration
The first thing we need to do is add our projects to Ghostlab. There are two options: we can drag and drop the project directory into the application window or copy and paste the project URL address. We can also drag and drop the list of projects to change positions.
In addition, we can configure any project. Hover over the project icon and it will become a gear icon. Click on the icon to expand it to the configuration options that appear in a series of tabs. In these tabs we can activate or deactivate the Ghostlab server, choose the browser in which to view the project, modify the title or the URL of the project, etc.
Turning on the server
As mentioned above, Ghostlab comes with a built-in server that works for both static Sites (HTML and CSS only) and dynamic Sites created with PHP, Ruby, etc. Once all the configurations are configured, we can proceed to power up the server. To do this, you can simply click on the arrow icon in the project list.
If the server is “enabled”, you will see the notification with the server URL and the Port at the bottom left of the window application. Click on the rocket icon to launch the project in the default browser or click on the browser icon under the rocket to select other browsers. You don’t need to copy and paste The URL.
Note: The server is only applicable to one project at a time. When you turn on the server in another project, it is disabled for the old project and enabled for the newly opened project.
Connecting Devices
When we launch the project in any browser, Ghostlab saves it in the right sidebar. We can debug the project on one of these connected browsers/devices using the Code Inspector built into Ghostlab. Click on the < > and the Code Inspector (similar to that of Chrome) is displayed. When we browse the DOM tree, the corresponding elements are highlighted in the browser.
And in the end, you can also perform “Synchronized Tests”, similar to browser synchronization. It automatically updates all connected browsers when a change is made. User interactions, such as scrolling, clicking and filling in forms, are reflected simultaneously.
Last Thought
We have shown you how to perform “Synchronized Tests” with both a command-line tool, a browser synchronization and an application with a graphical interface. Both serve the functions very well. My only complaint with Ghostlab is that the user interface in OS X seems a bit irrelevant. I’m sure it looks good in Windows. After all, it’s up to you to decide which one best suits your workflow and budget.