This guide is for front-end developers who want to deliver cross-platform, cross-device applications and websites to their users. To become better at developing quality experiences across different devices and browsers at scale is an essential skill in the modern front-end or full-stack developer. We’ll explore concepts and strategies that you can use every day in your development that have helped companies deliver excellent software across many mediums.
Tips for developers doing cross-browser testing
Try not to use inline styles.
I know, it’s so simple to just type
style="" and voila! that weird margin error is fixed. But please, please refrain from inline styles and put your rules in the proper stylesheet. Media Queries are about to become your best friend, even if you didn’t know it, and you’ll save yourself hours of technical debt down the road. Always try and use well-named, granular class names and IDs.
Media Queries are the lifeblood of modern CSS. Where the
@media tag only allowed for a certain range of media types such as desktop computers, mobile devices, printers, etc, the Media Queries tag allows for you to set the rules based on width and height, screen orientation and resolution of a device. This allows for almost an unlimited possibility of exact configurations when it comes to your development. But of course we can’t code for every device, so we try to bring the greatest experience we can to the largest install user base.
How Developers can use CBT
Using our Screenshot feature as a developer is a real easy way to get your bearings on just how cross-browser friendly your website or web application actually is. It also makes it simple to share many different screenshots across many different devices to members of the QA team, design team, or upper-management.
Select the browsers your customers are most frequently using, as well as a few of the lesser equipped browsers like IE.
Once you’ve found the browsers and devices you’ll want screenshots of, just click Run and let CBT work its magic. You can now see Windowed, Full-page or Chromeless screenshots of your web application or site across all of the selected browsers in one glance. You’re able to filter to specific OS’s or Browsers, so you can focus on finding and fixing the bugs that happen most often on certain devices.
Before we launch almost anything on CrossBrowserTesting.com, we’ll run the URL through our Automated Screenshot engine to get a good feel of the browsers or devices we have to tweak. Once we note all of the UI discrepancies, we can immediately Live Test the screenshot with only 1 click – honing in on the exact browser and device the bug is happening on, and fixing it before our customers see it.
Live, Manual Testing
CrossBrowserTesting’s live, web-based testing allows you to test your website or web application across our large device set in the Cloud. You can choose specific Operating Systems, Devices, Browsers and Resolution so you can perfectly match a user’s environment to fix bugs and UI defects. If you are developing a corporate website on a Mac or Linux machine, our testing environment can be invaluable: you’ll have no trouble testing Windows or Android devices and browsers like Internet Explorer, Edge and more.
In a manual session you will have full access to the browser, debugging tools and more. You can use the inspection tool installed in our browsers to make CSS or HTML changes, or use the JS debugging tools to make quicker fixes to your site’s functionality across a wider variety or browsers.
Documenting Your Testing
Within the CrossBrowserTesting interface, there are a few different ways to document and share bugs with teammates or stakeholders. You can also extend those capabilities with our integrations like Slack or HipChat. You can see our entire list of integrations here.
- Take and Share Screenshots
- Record and Share Videos
- Record and Share Network Traffic
- Score your automated testing, and share PASS or FAIL with the team
- Take screenshots or video recordings and share with a public URL