I am very specific about my workflow. I like things a certain way. DRY — Don’t Repeat Yourself, has been the core philosophy behind the way I work. If anything seems like a grunt task, something that I find myself doing, again and again, I will work to automate it. Thankfully, WordPress automation tools and scripts allow you to optimize several tasks.
Once automated, things become easy and error-free. Manual work, with less modular code, is always hard, takes a lot of time, and gives me a great deal of pain.
One of the most tedious problems is reloading your browser everytime you change something on your theme or plugin.
In this post, I will introduce you to time-saving synchronized browser testing in WordPress using BrowserSync. By the end of this article, you’ll be equipped with the practical knowledge to automate your browser testing, syncing it with other devices, and sharing your local development sites online without having to upload any files on a dev/staging server.
Automated Browser Testing with BrowserSync
BrowserSync is an automation tool which ensures a speedy web development process. It does so by synchronizing file changes and interactions across multiple devices.
BrowserSync has helped me cut down at least two-thirds of the time I had to spend on automating sync between different browsers on different devices. I put in a lot of work to make my site look good from every angle. However, analyzing each and every change becomes difficult. But with BrowserSync you can achieve your goals quite quickly.
How does BrowserSync Works?
BrowserSync helps you auto-reload you browser when any type of file gets changed. For example, if you changed the color of your nav bar and press save in a CSS file, you’ll have to come to your website and reload it to see if the change did actually happen.
But with BrowserSync it will either auto-reload the browser for you, as soon as you change a file or if the changes are too small, it will inject them inside the site, without even reloading it. Hence saving you hours of development time.
For Static Sites: BrowserSync will create a simple HTTP server that runs your site on the localhost with a particular port.
For Dynamic Sites: If you’re working on a dynamic site like is the case with WordPress, you already have a server running through something like VVV, DesktopServer, or MAMP/XAMP, etc. In this case, you can use BrowserSync as a proxy server to piggyback on your dynamic server.
Also, BrowserSync injects a JavaScript file on every page. The purpose of this file is to interact with the server and the client to watch changes in your code or browser action. The moment it detects any change, it performs a live page reload.
Features of BrowserSync
BrowserSync’s impressive feature-set help me with the following stuff:
- Live Reloading: Synced testing across different browsers is probably the most important feature of BrowserSync. All the changes in your code and the page are auto-reloaded. Live reloading across browsers and devices helps me test similar features in a single click with synced scroll, clicks, form inputs, etc.
- CSS Injection: One primary function of BrowserSync is to watch all the CSS files which are currently available in your
css
directory. Later, when a change is made, it updates all the connected browsers without letting any web page to reload. - Well-interacted Synchronization: This means that all the changes are mirrored across all the browsers and devices in a single go.
- Tunneling: Displaying a work-in-progress website to anyone is a feature which BrowserSync has supported since the day one. Just change the port and set up a tunnel through a random public URL (provided by BrowserSync). It provides an excellent opportunity to test on multiple devices and also share with your teammates in minutes.
- Develop With Slower Connections in Mind: Internet speed is a factor which may vary globally, and you have no control over it. So, to get an idea how your site performs at slower internet speed, BrowserSync has a feature which you can use to throttle your site connection speed.
- URL History: BrowserSync logs all browsing history so you can push a test URL to all devices.
- Third-Party Tools: BrowserSync can easily integrate with multiple task runners like Gulp and Grunt. Also, it works equally well with all operating systems.
Installing the BrowserSync Setup
To install the BrowserSync default plugin into your WordPress project follow these steps:
Step #1: Install NodeJS & NPM
BrowserSync is an NPM package, and it needs Node.js to be installed. If you’ve already installed it earlier, just check through the following commands:
node -v # v7.10.0 npm -v # 4.2.0
Step #2: Install BrowserSync
Next, you’ll install BrowserSync globally by typing the following commands in your terminal.
npm install -g browser-sync
This will download all the BrowserSync files and install them globally to make it available to your projects. To confirm the successful completion of its setup, in your terminal type:
browser-sync --version
By doing so, you should get some response like BrowserSync version 2.18.12 which is the most recent one at the time of writing.
Step #3: Using BrowserSync with Command Line
You can also use BrowserSycn setup with your command line. Here is the set of commands that can be run:
$ browser-sync start [options] Start Browsersync $ browser-sync init Create a configuration file $ browser-sync reload Send a reload event over HTTP protocol $ browser-sync recipe [name] Generate the files for a recipe
Step #4: Help in Command Line
To seek any help for BrowserSync type the following command:
$ browser-sync <command> --help
You can use this command in your project as follows:
# Get help for the start command only $ browser-sync start --help # Get help for the recipe command only $ browser-sync recipe --help
Step #5: browser-sync start
Commands
The browser-sync start
command supports a set of actions which are preceded with a “–“. You can add any number of these arguments to get the best out of BrowserSync. Here’s a non-exhaustive list.
--server, -s Run a Local server (uses your cwd as the web root) --serveStatic, --ss Directories to serve static files from --port Specify a port to use --proxy, -p Proxy an existing server --ws Proxy mode only - enable websocket proxying --browser, -b Choose which browser should be auto-opened --files, -f File paths to watch --index Specify which file should be used as the index page --plugins Load Browsersync plugins --extensions Specify file extension fallbacks --startPath Specify the start path for the opened browser --https Enable SSL for local development --directory Show a directory listing for the server --xip Use xip.io domain routing --tunnel Use a public URL --open Choose which URL is auto-opened (local, external or tunnel), or provide a url --cors Add Access Control headers to every request --config, -c Specify a path to a configuration file --host Specify a hostname to use --logLevel Set the logger output level (silent, info or debug) --reload-delay Time in milliseconds to delay the reload event following file changes --reload-debounce Restrict the frequency in which browser:reload events can be emitted to connected clients --ui-port Specify a port for the UI to use --watchEvents Specify which file events to respond to --no-notify Disable the notify element in browsers --no-open Don't open a new browser window --no-online Force offline usage --no-ui Don't start the user interface --no-ghost-mode Disable Ghost Mode --no-inject-changes Reload on every file change --no-reload-on-restart Don't auto-reload all browsers following a restart
Let me just show it to you how you can use them with a few useful examples.
Step #6: Running BrowserSync
I’m sure by now you have a decent idea about BrowserSync and its working. Let’s now define the commands for its actual operation and see how it works.
I’ve mentioned that BrowserSync creates a server for static websites and can be used as a proxy for dynamic sites. Therefore, it defines separate commands for each of these.
Static Websites
If you are developing a static site, just head over to the site project folder, and inside the root folder run this command in your terminal.
browser-sync start --server --files "css/*.css"
The “css/*.css"
means that BrowserSync watches all the CSS file changes inside your project folder.
To make BrowserSync watch all types of files type the following command:
browser-sync start --server --files "**/*"
Here, **/*
means any/all directories and all files inside them.
Dynamic Websites
Since with WordPress development, you already have a server running your dynamic site (e.g. DesktopServer, MAMP, VVV, etc) — here you can use BrowserSync as a proxy. Let’s say you have a local site called local.dev
to start BrowserSync for such a site run the following command:
browser-sync start --proxy "local.dev" --files "**/*"
And BrowserSync will start watching your dynamic site for changes.
Step #7: Tunneling
Like I’ve mentioned earlier, BrowserSync lets you share a local development site with your teammates over the internet right from your own computer. This is where the tunnel option from BrowserSync comes into play. Each time you start BrowserSync, just enter the “-- tunnel
” argument to it like:
browser-sync start --proxy "local.dev" --files "**/*" --tunnel
Running this command will provide you with a set of the following information:
- Local URL: This is the regular URL of your local host which keeps on reloading for your changes.
- External URL: The URL which you can access on the local Wi-Fi network, the one I use to test my site on a number of other devices.
- Tunnel URL: The URL which you can share publically with your teammates across the globe and they can take a look at your local site, inside your computer, just as if it is on a staging server.
- UI: This is the default UI to configure BrowserSync.
- UI External: To set the default UI on any local network use this external link.
BrowserSync UI
Click the BrowserSync UI link and you’re directed to a new browser window (Hot tip: You can press and hold Command ⌘ on Mac while clicking the link in the terminal to open it right away). Here, you find a range of options which can be configured. All you have to do is click on the left sidebar and set it accordingly.
Conclusion
That’s it for today. BrowserSync is a robust browser automated testing tool which improves my development workflow. I think it should be added to your WordPress automation toolkit. Believe me; it’s totally worth it. For more details on how BrowserSync works with tools like Gulp and Grunt, you can click here.
I’d love to hear your comments on this. Share your experience with me.
As usual, don’t hesitate to leave any questions or comments below, and I’ll aim to respond to each of them.
1 Comment
Join the conversation