Playwright Setup | Bondar Academy
Course: Playwright API Testing with TypeScript
Module: Introduction
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will install the Playwright Framework from scratch. Follow these steps to set up your project: Step 1: Create a Project Folder Create an empty folder on your computer where you want to install your project. For this demonstration, we created a folder named pwapi-testing on the desktop. You can choose any location you prefer. Step 2: Open the Folder in Visual Studio Code Open Visual Studio Code. Click on File and select Open Folder . Choose the pwapi-testing folder. Enable Auto Save in the settings. Step 3: Install Playwright Refer to the Playwright documentation for installation. Execute the following command in the terminal: npm init playwright@latest Answer the configuration questions: Select TypeScript for the programming language. Accept the default test folder. Keep GitHub Actions as false . Install Playwright browsers as true . Step 4: Review Project Structure After installation, the following files and folders are created: playwright-config.ts - Main configuration file. package.json - Node.js project configuration. gitignore - Specifies files to ignore in version control. test folder - Contains example test files. node_modules - Automatically generated folder for dependencies. Step 5: Run Tests To ensure everything is working, run the following command: npx playwright test This will execute the tests across different browsers. You may see multiple tests due to the configuration settings. In the next lesson, we will modify this setup for API testing using the Playwright framework.
Video Transcript
All right, guys, so let's move on. And in this lesson, we will install Playwright Framework from scratch. All right, so let's get into it. So on your computer, create any empty folder where would you like to install your project. So for this demonstration, I created an empty folder on the desktop. And I call this folder pwapi-testing. This is a completely empty folder and nothing inside of it. You can create this folder whenever you want under documentation. Maybe you have a separate folder where you keep your other projects. So create your folder over there. After you created an empty folder, go back to Visual Studio Code and open this folder in Visual Studio Code. So click on File, and right here. And by the way, here autosave menu, put the checkbox next to the autosave. So Visual Studio Code will automatically, will make changes to files that you update during working on the project. So here, inside of the menu, click on Open Folder. And open this folder Desktop pwapi-testing. Open this folder in Visual Studio Code. Currently, it is empty, nothing is here. And we're gonna put Playwright Framework into this folder. How to do that? So going back to Playwright documentation, I'm on playwright.dev docs intro. In under installation section, it's a quick guide how to install the Playwright. We need to execute this command in the terminal. So let me copy this, npm init playwright at latest. Going back to Visual Studio Code, open a new terminal session. And just paste this command over here and execute. Then you have several configuration questions. So what do you want to install, TypeScript or JavaScript? So we will use a TypeScript, hit Enter. Where would you like to put end-to-end test? I will put it into default test folder. So just hit Enter. At the GitHub Actions workflow, we don't need it right now. So keep it false as default and install Playwright browsers. Well, let's keep it true, just to be in sync with the current version of the Playwright, even if we will not use actually the browsers. So it is installing needed components, and everything is done. You can see on the left, we have a new folder structure created automatically for us, so let's quickly make a review, what do we have? So in the root of the project, we have file playwright-config.ts. This is the main configuration file of the Playwright. And by default, Playwright loaded with a bunch of different stuff and examples, how this file can be configured. We will not change anything as of right now, and later, we will come back to this file to update some of the configuration settings. So far, we're just gonna keep it by default. The next file is package.json. So this file is related to configuration of Node.js project, and primarily, we are looking into this section, dev dependencies. So the section defines all the packages that are installed in our project. And later, when we develop this framework, we will add new packages that will be helpful for our API testing. So far, we have just two packages, the Playwright framework itself and types of node, that's pretty much it. Package.log.js is file that is automatically generated and just locking the versions of the files to avoid some compatibility issues and so on. And this file can be safely deleted, for example. So if I delete this file right now, for example, move to trash. And if I run command npm install, npm install right now. This file will be recreated automatically based on the package.json file. The next file is gitignore. So this file related to git version control to make sure which folders we don't want to put into version in control and committed to the GitHub repository if you work with git. The next is just test examples. So Playwright gave us some example test that we want to explore how to write the test, we don't need that, so let's delete it right away. Delete, move to trash. The next, test folder. Test folder is the place where we keep our API test. Again, Playwright for us generated examples.spec.ts with two test files as an example, test number one, test number two. And this is UI test, we will use API, so we will modify it later on. And the naming convention for the test files in JavaScript or TypeScript programming languages is name of the file.spec.ts. The spec does not mean anything. So if you rename this file to anything else and just, for example, example.ts, it will work the same way. So spec is just a naming convention in JavaScript that developers know, okay, if this file called as a spec, it means that tests inside of this file. And the node modules folder, this folder also generated automatically when you install the dependencies from the package.json. So the packages listed over here, they are stored right here. So you can look, we have a Playwright over here, we have types, we have some other default modules, and so on. So this folder also can be safely deleted. For example, if your project is not working properly, you have some conflicts on something like this. Sometimes you can just delete node modules, run npm install, and this folder will be automatically regenerated with the fresh versions of the packages. All right, so that's pretty much it. So simple framework structure, and let's quickly run this to make sure that it is working. So terminal, new terminal, and to run the test, we need to execute npx Playwright test and hit Enter. Okay, tests are running, and everything is passed. So you can see it was executed six tests total. So you maybe wonder why we have six tests, we have only two over here. That's because of the how configuration file here is configured. So we have three projects and tests were executed across three different browsers, Chromium, Firefox, and WebKit, so that's why we have six tests total. And after that, the report was generated. You can open this report executing this command, or we can use the extension that we installed previously open in the default browser. So on the Playwright report, you see a new folder was generated. We have index.html. This is a default Playwright reporter, and I click here and open in default browser. Click on this, and here we go. This is the report of the examples test that were executed. And just again, right, so this is UI test, we don't care about UI test. We will convert all this to run API test only in the upcoming lessons. So that's it, Playwright is installed, the initial configuration is done. And from here, we continue working with this setup, modifying it for API testing using the Playwright framework. All right, guys, see you in the next lesson.