 Hi everyone, my name is Matjas and I'm here to tell you what's new in Puppeteer. But before we can do that, we should probably talk about what Puppeteer is in the first place. Puppeteer is a browser automation library for Node. It lets you control a browser using a simple and modern JavaScript API. After installing it using NPM install Puppeteer, you can require Puppeteer in your Node script and start automating. The first step to browser automation is to launch an actual browser. And with Puppeteer, that's just one line of code. Next, we open a new page. This is equivalent to opening a new tab in your browser. Now let's navigate to a URL. This line of code ensures that the page has finished loading before continuing with the rest of the script. Then we take a screenshot and save it to a file before finally closing the browser. And that's it. That's the entire script. We did all of that with just a few lines of code. And Puppeteer can do much more. You can generate PDFs, evaluate JavaScript in pages, enter text in input fields, click on elements. Almost anything you would manually do when using a browser can be automated using Puppeteer. The Puppeteer project is fully open source and has received contributions from individual contributors all around the world, as well as from companies like Mozilla, SauceLabs, and Microsoft. At Google, the Puppeteer team consists of Chrome engineers who also work on DevTools. And this might sound a little strange at first, but it actually makes sense, because Puppeteer is built on top of the same underlying protocol that DevTools also uses to communicate with the Chromium backend. Because of this, Puppeteer also gives you access to advanced browser functionality that is usually only available through DevTools. For example, you might know that DevTools lets you emulate print media, so that you can easily debug print styles. Well, Puppeteer lets you do the same thing in an automated script. Here we call page.emulateMediaType to force print styles, and then we save the result as a PDF. Okay, now that you know what Puppeteer is, what it can do, and who is working on it, let's take a look at some recent feature additions. Similar to emulating print styles, we recently added DevTools support for emulating light and dark mode, as well as other so-called CSS media features. We then shipped a new Puppeteer API that lets you perform the same emulation programmatically. This Puppeteer script takes two screenshots of your web app, one in light mode and one in dark mode. It works independently of your operating system settings. One of my favorite features on web.dev slash live is the schedule, which adapts to your local time zone. I live in Germany, so when I view the schedule, I see something like this. Today's event started at 2pm for me. But someone in Tokyo, for example, would see a different time. For them, the event started at 9pm. I love that the website just tells me what I need to know in my local time. Nobody likes doing time zone math. To make it easier to test this kind of time zone aware functionality, we added DevTools support for emulating arbitrary time zones. Yesterday's event started on June 30th at 6pm for me, but for someone in Tokyo, it was already 1am on July 1st. In addition to the new DevTools functionality, we also added a new API to Puppeteer to let you change time zones programmatically. This script emulates various time zones and then executes some time zone dependent JavaScript in the page context. We're logging the same date, but in two different time zones, and that produces different outputs. Here's another example. This Puppeteer script forces the Tokyo time zone, then loads the web.dev live page and finally takes a screenshot of just the schedule, similar to the side-by-side screenshots we saw earlier. DevTools recently gained support for simulating the effect of various vision deficiencies, including blurred vision and color vision deficiencies. This can help you identify accessibility issues related to color, such as bad contrast. And guess what? We added a corresponding Puppeteer API that lets you apply these simulations programmatically. This script takes a screenshot of the web app after simulating blurred vision, a chromatopsia, or full color blindness, and dutronopia, which is red-green color blindness. One feature we're still experimenting with is the ability to register and use custom selector query handlers. Many Puppeteer APIs deal with selector strings, which by default use query selector or query selector all to find elements in the page. We've heard from users that they want to be able to provide their own selector query handlers with custom logic, and this new feature now makes that possible. You can imagine providing a custom hash text handler which looks for DOM nodes containing a string of text, or maybe you want to select elements across shadow DOM boundaries, which query selector doesn't let you do. There's one more feature I want to talk about, and it's a little different from all these API additions we've been covering until now. Let's go back to our very first example, launching a browser, navigating to a URL, and taking a screenshot. Puppeteer was originally built for Chrome, so when you call puppeteer.launch, it launches a chromium browser by default. You can now also specify this explicitly by using the product option. Okay, so we added the new product option. By itself that's probably not very interesting, but here comes the exciting part. Instead of Chrome, you can now specify Firefox, and then use the same puppeteer API to test a real Firefox browser. By changing just this one line, we are now automating Firefox instead of Chrome. Firefox support for puppeteer is the result of an ongoing collaboration with Mozilla. Part of this effort involves patching puppeteer itself, but a big chunk of the work happens in the Firefox codebase. The puppeteer Firefox implementation is still experimental, and so not all the puppeteer APIs are yet compatible with Firefox. But Mozilla has been making great progress here. In fact, as of mid-May, exactly 319 out of the 638 tests in puppeteer's test suite are passing on Firefox. That's exactly 50%. We're hoping to ship puppeteer with more complete Firefox support soon. Longer term, we would love to support Safari as well, and we're actively working on making that happen in collaboration with other browser vendors. We believe the right way to get to a fully cross-browser puppeteer is by standardizing a protocol that all browsers can implement instead of building on top of the proprietary Chrome DevTools protocol. In addition to all those new features, a lot of work has been going on behind the scenes of puppeteer. We recently finished migrating the codebase to TypeScript. We simplified our test runner, we considerably improved the robustness of our continuous integration setup, and our documentation keeps getting better and better. This work is often less user-visible, but it's crucially important because it enables us to iterate more quickly and more confidently. I hope you enjoyed this overview of what's new in puppeteer. Thanks for listening and see you next time!