Playwright Installation and Overview | Bondar Academy

Lesson Summary

This lesson covers the initial setup of a Playwright project, including folder creation, installation, and an overview of the framework structure. Creating the Project Folder Create a new folder for your project, e.g., playwright-ui-testing . Open the folder in Visual Studio Code . Installing Playwright To initialize the Playwright framework: Open a new terminal in Visual Studio Code. Run the command: npm init playwright@latest Follow the wizard to select options: Choose TypeScript as the language. Keep the default test folder name test . Opt not to add GitHub actions. Install Playwright browsers. Project Structure Overview node_modules : Contains all installed packages for the project. test : Folder where your test files are located, e.g., example.spec.ts . .gitignore : Excludes certain files from version control. package.json : Configuration file for the Node project, listing dependencies. package-lock.json : Locks the versions of installed packages. playwright.config.ts : Main configuration file for Playwright. Running Tests To execute tests: Use the extension in Visual Studio Code to run the tests from example.spec.ts . Tests can be run in either headless or headed mode. With the initial setup complete, you are ready to proceed to the next lesson.