AiT Online 1 - Chrome DevTools

AiTOnline is a fortnightly Twitch livestream ‘AiT Online’ in which Mark and Richard explore a different testing tool or automation tool. Each stream is followed up by a debrief to share highlights, features and thoughts on what was covered. If you’ve missed any of the streams, you can view them on the AiTOnline YouTube channel.

On the 13th June we kickstarted our new fortnightly live stream which involved a lot of experimenting with both the Twitch stream and screensharing tools, so we decided to go with a tool that we both felt comfortable with, Chrome Developer Tools. We used the opportunity to go through some of the features of DevTools and share tips, tricks and features so that we could learn more from each other about this expansive toolset.

The Elements Panel - 2:05 - 13:51

With the introductions and startup complete, we started by taking a look at how we’ve used the Elements panel in the past and some of the features available to us. During this time we discovered:

• The find tab in the Elements panel can be used to search for not only strings but for elements using CSS selectors. This is a handy tool for testing out CSS selectors before adding them into any UI automation tools. We also explored how the feature worked with XPath, but you don’t want to use XPath.
• The zoom in and out features in DevTools to help make it easier to read.
• How to look for hidden values on our AiTOnline playground
• How to modify elements to get around popups
• The CSS panel on the right hand side to modify and explore styling of the AiTOnline playground
• Finding additional information about a site in the HTML head tags

We barely scratched the surface of the Elements panel, but the tips and tricks we shared showed lots of ways in which you can explore and learn more about the site you are testing just by exploring the HTML.

The Network Panel - 13:51 - 31:40

Next we looked at the Network tab to learn more about the HTTP traffic going back and forth from AiTOnline playground. During this time we discovered:

• Blocking requests to see how that affects a site
• How requests can give you more information on how a page is constructed
• Network tab filters to hone in on specific requests that are called at specific points
• Understanding the table view of the Network panel and the information it reveals
• The snapshot feature that takes a screenshot after each request is loaded to show what the page looks like as it goes through it’s loading process
• Throttling the network speed to explore how a site handles poor network connectivity

Once again, another area of DevTools that is jam packed with features that we only had a brief amount of time to explore before we moved on.

The Application Panel - 31:40 - 40:51

A question arose about how the AiTOnline playground was handling authentication token cookies, so we began to explore some of the features around the Application panel to see if we could begin to edit our tokens to change behaviour. During this time we discovered:

• That Cookies can be edited and added via the Application tab (contrary to our popular belief)
• Modifying Cookies in the Application panel can affect the behaviour of a site.
• You can access the response data sent from XHR requests.

It’s fair to say that both of us don’t really use this panel other than for working with Cookies. Sadly the features of the AiTOnline playground meant that there was relatively little information in the other features for us to play with.

The Console Panel - 40:51 - 58:44

We then moved onto my favourite panel, the Console panel, where we can learn more about what the JavaScript in a page is doing as well as use it as a scratchpad for developing new ideas with JavaScript. During this time we discovered:

• We can use the console tab to trigger JavaScript within the browser.
• There are subtle differences in the console panel with the Firefox DevTools version.
• We can use JavaScript to retrieve information on elements and interact with it.
• How to quickly grab an array of elements using JavaScript
• We can call the fetch library to make HTTP requests in the console tab and beyond
• The ability to save details of the console to a file to add to bug reports

This panel is probably the one we were most experienced and comfortable with, sharing many different tips and tricks that we’ve developed in our testing over the years.

Mobile Emulation Feature - 58:44 - 1:04:51

Finally, we looked the mobile emulation feature in DevTools that allows us to view how responsive a site may be. During this time we discovered:

• We can select different emulated devices to view the site with different mobiles
• How we can use the Command panel to select many tools and features in DevTools to take full size screenshots

Whilst the feature itself didn’t have a lot to explore, the information revealed from exploring different device screen sizes can be extremely useful. We also realised that we had only just started to get to know the tool once we got the Command panel open.

Final Reflections

DevTools is an essential tool whether you’re a developer or a tester if you are working in a Web context. The amount of features it has is almost dizzying which is a blessing and a curse. Each feature offers a wealth of opportunities to create, learn and break web sites but it takes time to get to grips with them all. My best advice would be to try and spend a little time with each feature and explore it for yourself and see how it might help. That way you will add a formidable tool to your testing toolbox.

All in all a successful first live stream that we enjoyed thoroughly. Roll on the next one!