Playwright Installation | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Getting Started with Playwright
Instructor: Artem Bondar
Lesson Summary
Welcome to the new Playwright section! In this lesson, we will cover the following key concepts: Overview of the Playwright framework structure How to run and debug Playwright tests Reading Playwright test reports We will start by installing the Playwright framework from scratch using two sample tests. You have two options for installation: Create a new folder for an independent project Install Playwright into an existing folder In this lesson, we will install Playwright as an independent project: Create a new folder named demo test . Open the folder in Visual Studio Code . Open a new terminal session and execute the command: npm init playwright@latest During installation, you will be prompted to choose a language. We will select TypeScript as it is the default for Playwright documentation. The installation will also include necessary browsers like Firefox and WebKit . Folder Structure Overview After installation, the following folder structure is created: node-modules : Contains libraries and components, including the Playwright framework. test : Contains test files, with example.spec.ts as a sample. gitignore : Excludes certain folders from the git repository. package.json : Describes the project and its dependencies. Playwright.config.ts : Main configuration file for Playwright settings. In future lessons, we will explore more capabilities of Playwright, including running and debugging tests. See you in the next lesson!
Video Transcript
Hello guys! Welcoming you to the new Playwright section and in this section we begin working with the Playwright. So in this section I will show you overall the framework structure, how to run Playwright test, how to debug Playwright test, how to read report of the Playwright, so you get familiar with the framework environment overall. In this particular lesson we install Playwright framework from scratch and using two sample tests I will show you around, so let's get into it. So you have two options, you can either create a framework in a new folder and run it as independent project or you can install Playwright into the existing folder. So we will do both, but in this particular lesson we install just the Playwright as an independent project. So in the same folder, let me create a new folder and let's call it like demo test and inside of this folder we will install a Playwright. So let's open this folder in Visual Studio Code first. All right, this is an empty folder, I open a new terminal session and inside of the terminal I need to execute command npm init Playwright add latest. Latest means that we want to install the latest version of the Playwright and hit enter. Playwright configurator will ask you which language do you want to use, TypeScript or JavaScript. For us it does not really matter, JavaScript and TypeScript have a little minor differences, but we will use a TypeScript since this is a default language for the Playwright documentation. So we use a TypeScript. So where you want to put your test, we keep default test folder, GitHub workflow actions we keep it as false for now. Install Playwright browser, yes we want to install the browsers and it is doing the installation. So right now it's downloading Firefox for us, downloading WebKit is the Safari and all set. That's it, you can see that we have a new folder structure showed up and let me quickly go through the folder structure to explain what we have here. So the very first folder is node-modules. Node-modules folder generated automatically and this is the place where in Node.js applications we keep our libraries or all our components. So inside of the node-modules you can see the Playwright folder. So this is pretty much a place where the Playwright framework is sitting as a part of our framework. You can safely at any time delete folder node-modules, run npm install and this folder will be automatically generated again. Test folder is the folder with our test files and Playwright created for us example.spec.ts and we can see as an example we have two tests created right here. The naming convention for the test files in JavaScript application called spec.ts. So spec does not have any functional meaning, it's just in the naming convention. So just by the looking at file you can tell okay this file responsible for the tests. That's why it is like that. Test examples is just another folder. This folder will not be used in the test runner with just more examples of what Playwright can do. They just automatically created those tests for us. And few other files. So gitignore automatically added the folders that we don't want to commit into the git repository such as test results or test Playwright reports. And two other files package.json and package-log.json. package.json is the file to describe our overall project, npm scripts and dev dependencies of any packages that we want to install into the project. As of now we have just a single dependency which is a Playwright. But in future if you need to add other libraries or other packages that you want to extend your project capabilities you can always add it into the dev dependencies section and script section is the place where we will keep npm scripts. package-log.json again this is a file that kind of locking the configuration of your framework and it's always can be safely deleted and when you run npm install it generates this file again. So sometimes this package.log can help to avoid some compatibility issues between the packages and so on. And the main file Playwright.config.ts is the main configuration file of the Playwright where you tweak certain settings of the framework. You can see right now there is a lot of stuff some code is commented out some has notations what each of these lines means so we will keep everything by default at the beginning and we will have a separate class related to the Playwright configuration and different settings that you can set up over here. So that's it so simple this framework is ready to be used and starting from the next lesson we will begin exploring the Playwright capabilities how to run the test interact with the test debug the test and so on. So see you in the next lesson