Front-End Testing and Advanced Browser Automation

Umar Hansa

Your instructor: Umar Hansa

Workshop includes:

Working examples to take away
Interactive sessions
Workshop recordings
Dedicated Q&A time
Smashing Certificate

Unfortunately, this workshop is fully sold out! But you can join the waiting list in case a ticket becomes available:

Workshop, 5×2h + Q&A • Wed & Thu, August 19 – September 3 2020
09:00 – 11:30 AM PDT (Pacific Daylight Time)

Browser automation helps us create resilient web applications by ensuring they are battle-tested through end-to-end tests.

On the other end of the spectrum, they also help create a whole new field of websites and services, through techniques such as browser scraping. In this workshop, you will learn browser automation from the ground up.

To get you fit for making full use of the benefits that browser automation brings along, we will cover:

End-to-end testing (with and without a testing library)
Scraping data from other websites and services
Automated performance, accessibility, and visual regression testing
Running automated browsers on free cloud services and a $5 VPS
Common pitfalls with browser automation and how to debug related automation issues.

Make your tests resilient: if every minor change causes your test to break, it is probably too brittle. In this workshop you'll learn how.

— Umar Hansa

What Will We Explore In This Workshop?

Testing
End-to-end browser testing helps us create rock-solid web apps. Especially because you can validate certain website behavior which unit tests or integration tests will never catch. Learn common testing patterns, from user registration workflows (and email sending) to page interactivity and navigation.
Scraping
Believe it or not, entire startups are building their businesses around scraping web content. We’ll learn scraping strategies and how to operate fairly. As a fun exercise, we will produce an automated price checker that notifies us when an online product becomes cheaper.
Auditing
Testing is more than just asserting page titles. It’s ensuring you have no performance or accessibility regressions when you make changes to the code. Performance, accessibility, and even visual regression testing can be checked automatically. Learn the tools which can help you achieve this.
Personal productivity
How many of us have automated all those boring parts in their workflows? Very few, I suspect. That’s why we’ll look into strategies that help you become more productive — from filling in long web forms to dynamically creating images and even setting up your web development environment with automated browsers.
Deploying + Debugging
First, we’ll deploy our tests to the cloud. Test failures are inevitable, though, but with the right techniques, we can speed up the debugging process dramatically. DevTools and exporting screenshots and videos of our test run to see what went wrong are two of the approaches we’ll take a closer look at.

The closer you can get your test to match how people actually use your website in the real world, the more resilient your website will be.

— Umar Hansa

Who Is This For?

This workshop is aimed for all developers, whether it’s frontend, backend, or even those still exploring engineering field. We will cover much more than just testing, so join us on this journey to learn how automating browsers can help you.

Please note that we will be using JavaScript and Node.js along the way.

What Hardware/Software Do You Need?

A machine with Chrome installed (Firefox and Edge are optional)
Your favorite code editor (e.g., VS Code, Sublime Text, etc.)
Node.js v14.1.0 or newer
A GitHub account
Basic knowledge of JavaScript

About Umar Hansa

Umar is a web developer and Google Developer Expert based in London, with a focus on writing tips and tutorials for the modern web. He tweets web tips and known for his DevTools course.

Time & Schedule

The workshop is split over five days with two-hour-long sessions on each day — and lots of time for Q&A of course. Our virtual doors open at 8:45, we start at 9 AM PDT.

Please mark your calendars:

Wed, August 19, 09:00 – 11:30 AM PDT
Thu, August 20, 09:00 – 11:30 AM PDT
Wed, August 26, 09:00 – 11:30 AM PDT
Thu, August 27, 09:00 – 11:30 AM PDT
Thu, September 3, 09:00 – 11:30 AM PDT

Schedule

This is the schedule for each of the five days:

Day 1 — Introduction

8:45 AM PDT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:00 AM
An introduction to browser automation and testing web applications in JavaScript.