Responsive website testing with Sizzy
It’s not only for developers, but a great tool for web testers!
Consistency plays a significant role in allowing for a seamless x-channel experience across device, platform and browsers. Subtle differences in elements such as navigation design are an acceptable and nimble compromise.
As you can imagine, when we unveiled our new look website back in 2017, people got emotional on social media. Our own version of a Beyonce-style Lemonade drop involved a shiny new navigation bar and switching up the design of our shopping pages. It was pretty much a whole new look, which has gone down pretty well worldwide.
Before any of the Twitter furore happened, we had multi-team development and testing going on. Yup, that’s right — we rebuilt our entire website as a responsive experience.
Multi-channel testing
My small part in this (within the Content Platform Team) was to ensure the areas we looked after still worked, that they still looked good 👀, were still usable and ‘accessible’. I have more thoughts on Accessibility but will refer to this in another blog post about ‘Inclusion Testing’ that’s coming soon 🌈.
When I realised how much testing was required, I started looking into tools that could help me ensure the cross-platform 📱💻 experience was still a positive one. I tried quite a few free and paid for online tools (using free trials, of course).
It’s easy to forget about the importance of ensuring that, functionally wise, everything you can do on one channel, can also be done on another. My new favourite free online tool for testing responsive sites is now Sizzy. It is a great open-source tool for testing the development of responsive websites and relies on React.js.
When web designers want to develop apps, which are functional on various devices, one problem they face is switching between multiple screens while they are testing the app’s functionalities. The developer called Kitze previously used React Storybook to switch between all the variations of a component, but still had to switch between 12 devices just to see the changes in all of them — that’s how it all started.
The solution
Kitze decided to solve his own problem. This tool allows the web designer/developer to view the several displays at once, enabling them to have comparable views of the codes and changes made in them simultaneously. For example, the tool allows you to do the following:
- Preview multiple screens at once as you develop
- Preview all the changes instantly on multiple devices (I actually said ‘Wow’ out loud when I found this website)
- Preview a URL on multiple devices at once
- Zoom on the overview web page, proportionally shrinking the person previews
- Filter the devices
- Choose if you want to display the keyboard of the respective mobile device (this is really helpful)
Browser extension
The Sizzy Chrome extension adds a button to your toolbar. When I discovered this, I went full fangirl 🤩. When the button is clicked, it opens the current page you are on in Sizzy.
The extension is open source along the whole project. The entire code can be explored here: https://github.com/kitze/sizzy/tree/master/chrome-extension
But don’t just trust me, take a look for yourself— It currently has 5,182 stars on Github.
It gets better…
You can use Sizzy to test websites locally…SAY WHAT?
Yes…that’s right, you can! If you’re running a local server, just paste http://localhost:3000, or whatever the link of your local web server is, into the URL bar of Sizzy. Keep in mind that the link must start with https:// or http://. You cannot point to an index.html file that’s starting with file://. If you need a simple server to run your local files you can use http-server (a zero-configuration command-line http server). Just start http-server, point it to the folder of your website and it will serve your app on http://localhost:8080. Then you can paste http://localhost:8080 in the URL bar of Sizzy 💥.
Erm…doesn’t Chrome already do this?
I appreciate that you can do essentially the same with Chrome dev tools, since it’s using the Chrome user agents, but it is presented in a much nicer way for visual checks and demos, across multiple screens, at the same time. Think of the possibilities this tool can bring, if someone had the time to take it further. I am writing about this because it is a useful tool that has helped me. Testing the front-end is only a small part of my day job, so this little piece of loveliness is just right for my QA Goldilocks.
Sizzy has been approved on OpenCollective, so if you’re planning to use it you can consider supporting it through a small donation. Your name and image will automatically appear in the supporters section on the GitHub readme.
AJ does all of her own stunts and is a QA at ASOS. She believes in the value of human, manual and exploratory testing. She’s not looking to slot in as ‘yet another tester’, but someone whose value is greater than just passing or failing tests.
If you enjoyed this story, please click the👏 button and share to help others find it. Feel free to leave a comment below — I am open to insight, learning and discussion.
