Environment Configuration | Bondar Academy
Course: Playwright API Testing with TypeScript
Module: Introduction
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will configure your computer for writing Playwright tests by installing necessary components. Follow these steps: 1. Install Node.js Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of the browser. To install: Open your browser and search for Node.js . Click on the first link to download Node.js. Download the LTS version (currently version 22) for stability. Run the package installer and follow the default installation prompts. 2. Install Visual Studio Code Visual Studio Code (VS Code) is the code editor we will use. To install: Search for Visual Studio Code and download the appropriate version for your OS. Do not confuse it with Visual Studio , which is different. Install it using the standard package installer. 3. Validate Node.js and NPM Installation Open a terminal in VS Code and validate the installations: node -v npm -v 4. Install Extensions in VS Code To enhance your development experience, install the following extensions: Playwright - for Playwright testing. Open in Default Browser - to quickly open HTML files. Material Icon Theme - for improved file icons (optional). 5. Install Postman Postman is a tool for performing API requests. To install: Visit postman.com and download the desktop application for your OS. Create a free account to use the application. Postman is useful for exploring APIs and debugging requests. Once you have completed these steps, your environment will be ready for Playwright testing. See you in the next lesson!
Video Transcript
In this lesson, we will configure your computer to prepare it for writing playwright tests. So we will need to install several components on your computer to configure the development environment. All right, so let's begin. So open your browser and type in the search bar in the Google Node.js. Node.js, and hit Enter. And the very first link you need to open is this one, Node.js. So what is Node.js? Node.js is a JavaScript runtime environment that allows you to run JavaScript code on your computer. So previously, when JavaScript was created, it was a scripting language only for the browser. So the JavaScript can be executed only in the browser. And by the way, this is still the only language that can be executed directly inside of the browser. But with the invention of Node.js, now it is possible to run JS code outside of the browser, which gave the developers endless possibilities to develop different types of the applications. And Playwright is running on JavaScript and also Node.js. So we need to install this component on your computer to be able to run JavaScript code. So click on Download Node.js, and keep in mind that you need to download the LTS version. As of today, it's version 22. But maybe later when you watch this course, it can be other LTS version, because Node.js continuously release new version. Make sure that you always download LTS and not the latest version, which is as of today, for example, version 23. So always use LTS. LTS version is the most stable version of the package that will not have any compatibility issues. All right, so click on Download Node.js, and after that, click on the Package Installer. So this is just a normal package installer, and you install it regularly like any other application. So if you run this on Windows, you will see a similar screen. And you just click Continue, Continue, and accept all the settings by default. Click Install, then need to enter my password right here. All right, Installation, and it is done. So we installed Node 22 and NPM version 10. That's it, close, and you can move this package to trash if you run this on Mac. On Windows, you just can delete this package after the installation. You don't need it anymore. All right, move to trash. The next step, we need to install a code editor where we will write the code. In our example, we will use a code editor with name VS Code. Hit Enter, and the very first line, Visual Studio Code. Make sure that you will not download Visual Studio, because Visual Studio and Visual Studio Code are two different IDEs or core editor. And we will need Visual Studio Code to work with TypeScript and JavaScript. Here, download for Mac OS or download for Windows. So currently, VS Code recognized that I'm running on Mac, so it's offering download for Mac. On Windows, you just download for Windows and install through the standard package installer how you did with the Node.js. So the standard process. So after you've done all that, open Visual Studio Code on your computer. So when you open for the first time, you will see something like this, or you will see a welcome window that's welcoming you to use VS Code for the first time. Right now, we need to validate that Node.js and NPM was installed successfully. So what you need to do is select the terminal, New Terminal, and New Terminal window will be opened right here. For the Windows users, if you run on Windows, I would recommend you to change the default shell from PowerShell to Command Prompt. Most likely, your default shell will be PowerShell. So here, click on this little arrow, then select Default Profile, and you will see the dropdown like this. So on Mac, I have different types of shell. On Windows, you will have some PowerShell, Command Prompt, maybe Bash, maybe some other shells installed on your computer. So in this list, select here Command Prompt. If you're on Mac user, most likely the default shell for you will be a Z shell, and keep using a Z shell, all right? So now in terminal, we need to validate the Node.js and NPM installation. So type node-v, hit Enter. You can see the version of Node.js 22 that we just installed, and npm-v. And we have 10.9 version of NPM that was part of the same installation package. The next step, we need to configure a little bit our Visual Studio code and install some other extensions. So here on the left, click on this little icon with extensions, and we need to install a couple of extensions. First of all, let's install PlayWrite extension, PlayWrite. And the very first one with a checkbox of the Microsoft, click on this guy. And you will need to click here, Install button. It's already installed for me, so I have uninstall button. But for you, click Install button. The second extension I would recommend would be this, Open in default browser, this one. So what this extension is about, it allows you to open HTML files or any other files with just a single click, making the right click in the Visual Studio code. And in the context menu, you will have a menu Open in default browser. So this will be useful for us when we will need quickly review HTML reports generated after the test execution. And instead of using a command line to open this report, we will quickly use a mouse to just select this report and open in default browser. It's just more convenient. And the third extension is kind of a personal preference. If you want to install this Material Icon theme is this guy. It's just the update for the default icons for the files in the Visual Studio code. So I use this one, I just like the view of this icons when I use the Visual Studio code, but it's completely up to you. If you want to use a default icons, it's totally fine, it's gonna work. Because sometimes students ask me, hey, what type of icons do you use? Your icon looks so cool. So this is what I use just for your reference. Well, and I guess that's pretty much it. And one more application we need to install is a Postman. So going back here, and I type postman.com, hit Enter. And here you can download the desktop application for Windows, for Mac, or for the Linux. For example, download Postman for Mac, and here you can install either for Intel chip or Apple chip. And this is how this application looks like. You will need to create account on the postman.com to use this application. It's completely free, you don't need to pay anything for using this application. Postman is very convenient for performing API requests. So before you write your API tests, usually it's very useful first to explore your API or sequence of API calls to figure out what is it doing, what the kind of request you need to create, and what kind of response coming back. And Postman is very convenient tool for exploring those things. And after you download and install it, you will see the window something like this. Then you click on the plus button here, and you can create the API requests like that. In this course, I will use Postman just to visualize how we create and construct our API request, what response is coming back, and how we can, for example, debug our APIs, because Postman provide very convenient interface for doing that. All right, guys, I guess that's it. The environment is configured, you have all needed components to move forward. See you in the next lesson.