00:00 An end to end test is a test that involves your entire application from beginning to end. In the context of web applications, that usually means from the user facing UI to the very depth of your back end, everything is involved. But that doesn't mean that such a test runs every possible logical branch that exists in your app. That would be a waste. Instead, the point here is to make your entire app a single testable unit, the same way a React component is a testable unit in your component tests.

00:28 And the idea of end to end test is to put your application into a complete and realistic user scenario. For example, if you're building an e commerce application, one of such scenarios might be the user logging in, adding something to the cart, and completing the checkout flow, all without leaving their browser the same way they would do when interfacing with your production application. Notice that I'm drawing a comparison here because end to end tests don't normally run against the production version of your app. Despite involving your entire system, they are still controlled tests, and they benefit greatly from running in a controlled environment, which is usually a part of your build pipeline. When explaining end to end tests, I often use a car factory analogy.

01:09 So let's imagine you're running a car factory. One thing you definitely want to do is to introduce a process that ensures quality throughout the entire pipeline, your quality assurance. And you start from testing individual car parts, things like this wheel spins or this window goes up and down. These tests are cheap to perform, and they run fast because they run-in isolation. You don't need an entire car to make sure that the wheel is functioning correctly.

01:34 But even when you have many pieces working great in isolation, that still doesn't mean that things won't fall apart when you put them all together. So you introduce another step in your quality assurance pipeline that, for example, puts two wheels on a chassis and make sure that when you turn the steering wheel, the wheels also rotate in the right direction. Notice how this integration test doesn't repeat the quality check for individual pieces involved. Instead, it's implied that they function correctly so that the integration test is focusing just on how these pieces combine and work together. But even if you checked all the integrations throughout the car and confirmed that they're working great, that is still not what the end user gets.

02:16 They get a complete car. And so the last step in your quality assurance pipeline is to take a complete car, put in a dummy, and make sure that it's able to start the ignition, drive down the street, and get out of the car, performing the exact sequence and nature of actions that the real human would. And that's exactly what an end to end test does. Now it's important to understand that end to end testing doesn't always involve the browser. Of course, as web developers, we are interested in running our applications in the real browser because this is where our users are.

02:47 But as a practice itself, end to end testing is not exclusive to web apps and exists in other mediums of software. For a backend system, for example, an end to end test would be interfacing with its public APIs and asserting on the returned responses. As a library author myself, my end to end tests are about the user being able to install the tarball of my library with something like npm install and then import and use it in their project. And notice how the browser isn't even involved in any of those scenarios. In this workshop, we're talking about web applications, so naturally we're interested in testing them in the browser.

03:22 And that's exactly the type of test I will be referring to whenever I say end to end test from now on. To help us write those, we're going to use a designated testing framework. Because in addition to running your tests, something also has to run an actual browser and connect the two together. So when you say in your test click on this button, something actually finds that button on the page in the browser and clicks on it. We're not faking things here.

03:45 Your tests are actually interacting with the real browser instance because that is exactly where your users interact with your app, and an end to end testing framework is the thing that enables that. This kind of automation can be pretty complex, though. And it's a big reason why end to end tests have this notorious reputation of being slow and flaky. Spawning the browser takes time, interacting with it takes time, and it's on top of your application taking time to process what's going on. There are simply a lot of moving pieces involved in an end to end test.

04:13 But luckily, testing frameworks have significantly improved in the past decade alone and now ship more refined, performant, and stable experiences. You can choose between multiple options as well such as Selenium, Cypress, Webtest Runner, and Playwright all viable choices. In this workshop, you're gonna be using Playwright. Not because this is what I like and use myself, but because I believe it has a number of benefits that will help you write better tests. Playwright is a well established industry standard and has been around for a really long time.

04:41 It has a great feature set and works with other languages too, like Python, dot net, or Java. It has a phenomenal browser automation API, which makes both simple and complex tasks possible whenever you need it. But my favorite thing about it is that it encourages accessibility first testing, which means that you'll locate elements on the page and interact with them based on their accessibility attributes. Not only does that improve the quality of your markup, but also gives you a decent baseline accessibility testing for free. That sounds familiar, doesn't it?

05:10 It's exactly the same approach Vitas took with their component testing, because both of those tools were inspired by React Testing Library, and have adopted not only its philosophy, but a lot of its APIs as well. Okay, enough talking, it's time for you to write some end to end tests.