Hello Clever People! I hope you’re having an amazing day! I’m Victor and in the next 15 minutes, I’ll help you get started with a cool new automation tool called Playwright. By the end of this video you’ll know: what Playwright is, how to install IT and its dependencies, how to generate automation scripts without writing a single line of code, how to interact with elements on the screen, and how to take screenshots or record the whole thing as a video. We’ll be seeing some code, but I’ll take you through it step by step. And it’s going to be mostly auto-generated, so don’t worry if you don’t speak code. So, let’s get it on! First, allow me to attempt the shortest Playwright introduction ever Playwright is essentially a Node.js library made for browser automation. It’s free, open-source and it’s backed up by Microsoft Some of the team members used to work for Google at a different automation tool called Puppeteer. In the meantime, they moved to Microsoft and became the Playwright team. So they have plenty of experience. They are incredibly responsive with resolving bugs and answering questions. They have a usual triage time of less than 48 hours and have already addressed more than 1600 issues. A small disclaimer: this video is not sponsored and I don’t have any affiliation with the team, I just really like the tool they are building. It supports 3 browser engines that together cover all the popular browsers like Google Chrome, Microsoft Edge, Apple Safari, Opera, Mozilla Firefox etc. It can be used with the most popular languages out there like Typescript & Javascript, C#, Java, or Python And it has some cool Perks as well. It can: automatically download the browsers it needs record videos of your test intercept and modify network requests emulate devices, location, locale, timezone, etc. And it has a cool Code Generator and Debugger which I’ll show you in a minute In a nutshell, Playwright is awesome. Let’s get on with installing it. It’s a fairly easy process. We only need 3 things: Node.js, Playwright, and code editor. As an operating system, I’ll be using Windows. You’ll be fine with a Linux or a Mac OS as Playwright is compatible with those as well. So, 1st, let’s Install Node We'll do this by going to Nodejs.org and clicking the LTS version. Ok, we'll just do a next next next install with most of the default setup. It's a quick installation. And then, by going to code.visualstudio.com we can start the installation for Visual Studio Code. It's going to be another next, next, next installation. Ok, so once Visual Studio Code is installed, we'll need a new folder. Visual Studio basically works with folders as projects so, just create a new folder for this project. It's going to be playwright-test. Once we have this, we can open it up from VS Code. File > Open Folder > Click Select Folder. Now, all there is to do is install Playwright which we can easily do by starting a Console Terminal > New Terminal. Write "npm i -D playwright". -D stands for Dev. It's going to take a minute or so. That was it with the installation process. Let me know in the comments below if you ever used a code editor or an IDE before, and if so, which one do you prefer. Let’s continue with creating a simple automation script. So let's create a new file. Right-click - new file. We'll call it hello-platywright.js. I promised you we won't be writing any code so this is the perfect moment to start Playwright's inspector. We can do that by writing "npx playwright codegen". We can launch this directly or we can give it a website, let's say http://wikipedia.org. It's going to start a browser window and the actual inspector. We can see the browser window here, and the inspector here. This is already recording, so each time we do an action in the browser window we will see a new line of code in the inspector. So let's make this a bit smaller so we can see better. So let's say we want to automate wikipedia.org. So let's go to English > Final Fantasy 9 > Combat and character progression. Let's take a look at the generated script here, on the right side. It has generated Javascript Code because Javascript is selected by default, but we can select any of the 4 languages it supports (actually 5): Javascript, Java, Python, async Python, and C#. The structure is going to be the same for any language. So if we take a look at the code for just a bit, it first starts a browser, it then starts the context, then starts a page, and then it navigates to the Wikipedia website, it then clicks on the English Language and so on and so forth. If we change this to Java, even after we recorded everything, then we will see the same structure again. It first starts the browser, then starts the context, then it starts a new page. Any Playwright script that starts from scratch it's going to start the same, so Browser > Context > Page. We'll go through these in just a minute. So let's go to Javascript, copy everything and go to our code editor. Paste everything here. Amazing, you can already run this. But before that, let’s take a minute and understand what happens in detail. So, as I mentioned, the first thing that it does is start the browser. The browser in Playwright is similar to a real-life browser. So think about this as starting a new browser window. It then goes on to start a new context. It's kind of like starting a new window inside an existing browser. We already have this browser here, and we use it to launch a new completely independent window. If you start 5 contexts, for example, they are going to be completely independent of each other. And then, we have a new tab. So, browser ... window ... tab. Just like in real life. And then, you are going to find some familiar actions here. So, we opened up Wikipedia, we clicked the English Language articles, then we went to the Final Fantasy IX article, and we clicked on the Combat and Character progression link. So let's what we have here, by running it. We'll run it by using this simple command: "node hello-playwright.js". We see the browser running, clicking ... and ... that's it. I hope you caught it. Let's modify it a bit. Let's see what it can do for us. For example, we can easily take a screenshot: page.screenshot and we just have to give it a path to the screenshot. Let's call this one wiki_screen.png. And let's run it again using the same command. And let's see what happened. We'll just go to our File Explorer here, and we see the new screenshot here. We'll see exactly what we expect, so it actually navigated to the anchor that we clicked last. Another cool thing that Playwright can do is record videos of the whole execution. So for this, we just need to change the properties of the context. If we go to the context here, we create a new object and we say recordVideo. And we just have to give it a path through this dir property, so let's say ... videos. Save and run it again. At the end, we should see ... yes, so we have a new videos folder here and it has a file in it. Let me open it in explorer. So if we go to Videos, we see this video here. Let's run it, and as expected, everything that Playwright does is actually recorded. So before we finish off, I want to show you just another thing. Playwright is headless by default. This means that the browser runs, but you can't see it. In our case, because we took the code from the Inspector which generates the code automatically, they actually added this automatically for us. So ... "headless: false". This means that the browser won't actually run headlessly. But if we run this, and ... let's say I delete this videos folder so that we know it actually runs. And if we run it again, you can see it created Videos again... and ... it finished. I just wanted to show you how a headless run looks like ... You don't see anything :) That’s it. Let me know in the comments below if you plan on using Playwright in the future and for what kind of project? I maintain a small newsletter about Playwright, so make sure to head over to testopic.com/playwright if you want to be updated when I post a new video, cheatsheets, or other interesting stuff about this amazing tool. Cheers, and have a good one!