Manually testing your website on different browsers and devices can be time consuming and prone to errors.
Automated testing can speed things and give you the confidence everything will work when you deploy new code.
One way of doing test automation is using Selenium IDE (which is free) and BrowserStack. Its quick to set up and requires little or no coding experience.
Selenium IDE setup
Selenium is a free automated testing framework to validate websites across different browsers. You can write Selenium tests in different programming languages like java or python.
Selenium IDE allows you to write Selenium tests without the need to learn to code.
Selenium IDE is a browser plugin for desktop Chrome and Firefox. Using the plugin you can record an interaction with a website. This recording can then be used as the basis for the automated testing.
Getting started
- Install Selenium IDE from either the Chrome or Firefox web store
- Create a test using this Selenium IDE getting started guide
- Save the test as a .side file
This short video also gives a very good overview of what can be done.
Selenium IDE side-runner setup
Next you need to be able to run Selenium IDE via the command line.
If you aren’t a regular coder you will need to open up Windows Command Line (PC users) or the Terminal (Mac users).
To install the side-runner enter the following to the command line:
npm install -g selenium-side-runnerThe following dependencies are needed:
- node (the Node.js programming language) version 8 or 10
- npm (the NodeJS package manager) which typically gets installed with node
For more help see the Selenium IDE command line runner help page.
BrowserStack setup
BrowserStack is a software testing platform giving you instant access to 2,000+ real mobile devices and browsers.
The downside of Selenium IDE is it’s only a plugin for Chrome or Firefox. You can only test on a laptop or desktop. BrowserStack allows you to test on mobile devices, tablets, desktops and all of the popular browsers.
To get set up you will need to register for a BrowserStack account using their product called Automate. New users have a number of free minutes so you can try this setup before you have to spend any money.
Next, you will need to create a .yaml file with the information of the device you want to test.
For example this is what the file would like if you were testing a Google Pixel 5.
capabilities:
browserName: "Android"
os: "Google Pixel 5"
os_version: '11.0'
name: 'Selenium IDE automate test'
browserstack.debug: true
browserstack.console: "verbose"
browserstack.networkLogs: true
server: "https://username:[email protected]/wd/hub"
The .yaml file can be created within any text editor. Just save the file as ‘.yaml’ for example ‘pixel5.yaml’.
You can get the ‘os’ and ‘os_version’ information from the BrowserStack capabilities page.
The ‘name’ is the name you give to your test.
The BrowserStack options in the example above are set to provide the most information. You can see more debugging options on the BrowserStack website.
Finally you need to make sure you add in the correct ‘server’ information. Replace the username and access-key with the correct information. To get your details once you are logged into BrowserStack select ‘Access key’ as shown in the image below.
To run your test you need to make sure your Selenium ID project .side file is saved in the same place as your .yaml file.
Next run the following from the command line making sure you run it from the folder the tests are stored in. If you don’t do this you will need to add the path to your files eg “/path/to/your/config.yaml”.
selenium-side-runner BrowserStack-Selenium-Test.side --config-file "pixel5.yaml"If you have a number of tests within your Selenium ID project they will run in parallel (ie at the same time).
If you get stuck you can read BrowserStacks Selenium IDE introduction.
Once the test has run the command line will state if the test passed or failed. You will also get a recording of the test within BrowserStack.
The downsides
Ideally I would have liked to create a list of devices I wanted to test and for BrowserStack to test all of them at once instead of having to run each device one at a time. I’m sure there will be a way around this – I just haven’t explored the possible options.
The other issue is cost. BrowserStack isn’t cheap. One alternative option is to use Lambdatest which provides a number of free test minutes per month. This might be something I explore in the future.
Finally any automated testing takes time to build and then time to manage. If you have a very simple site automated testing isn’t really worth it. But if you have a number of long complex forms or journeys, automated testing can really speed up your QA and testing processes.
