In this first lesson, we're going to go through the process for installing Playwright and setting up your first Playwright project.
In the video above, and the detailed steps below, we cover the four steps to getting your first Playwright project up and running:
We'll be installing Node JS as we're going to be using TypeScript (a variation on Java Script) for writing and running our tests. The execution of our tests will be in this Node JS environment too. Then we'll install Visual Studio Code, our test development environment and IDE. Steps three and four will cover the installation of the Playwright extension and then setting up your first Playwright project.
The main prerequisite for working with Playwright is Node JS. Node JS provides the run time environment for executing your tests.
First download the Node JS installer for Windows (we're using Windows for this tutorial):
https://nodejs.org/en/download
Then run the installer and step the Node JS install wizard steps. You can accept all the default settings as you go through the install process.
Next we need to install Visual Studio Code. You can download Visual Studio Code from here:
https://code.visualstudio.com
Again run the installer and step through the install wizard dialogue boxes. Accept all the defaults you're presented with.
Next step then is to install the Playwright Extension for Visual Studio Code. The quickest way to do this, is to go to the extensions area in Visual Studio, search for Playwright, and that should give you the Playwright test for Visual Studio code extension.
Once this is installed, we're ready to create our first project.
After completing the install we can create our first project in just two steps. We need an empty folder on our file system, and we need to install the Playwright modules that we'll need for our first project.
Open Windows File Explorer and create an empty folder which will hold your first Playwright project. In the image below you'll see that I've created an empty folder called “at-pw-course/project1".
Now in Playwright you'll want to Open that folder.
Now, one thing you'll want to just check before you try to proceed and install your first Playwright project is that Visual Studio has picked up Node and npm (Node Package Manager).
Open the “Command Palette" here:
Then type select default and find the Terminal: Select Default Profile option:
And then select the “Command Prompt" option:
What we're really doing here is forcing VSC and the terminal profile to read the PATH settings being forcing your default terminal to be a command prompt. It's the PATH environment variable that will allow your setup to pick up the correct path to Node and npm.
Once you've done that create a new terminal
Once you have your terminal open you can type the commands node -v and npm -v. You should see that Node has actually been picked up by Visual Studio. If Node is available you'll see the version displayed.
We're also checking we have “npm" installed with the npm -v command.
Remember…
We'll see very soon how npm is used to install the various packages we need to create our first Playwright project. With both Node and Npm install we are ready to create our first Playwright project.
We've already created and opened our empty project folder. Now we can install everything we need to create that first project.
Go to the Command Palette (press Ctrl+Shift+p) and type Install Playwright.
The first thing you'll see is a select list that allows you to pick the browsers you want to test with. Select the browsers you need and click “Ok“.
You'll also see the option to select if you want to code in JavaScript or TypeScript. We'll be using TypeScript for everything we do in our lessons.
You'll also see the option to add GitHub Actions workflows. We'll talk about this in a later lesson where we'll add the execution to a GitHub project and run the execution of our test automatically.
Anyway, once you've clicked ok you should see this command run
npm init playwright@latest
Npm, the Node Package Manager, will install all of the packages we'll need for our Playwright project. Once that's complete, you should see the successful completion message with the little character representing the Playwright logo.
You'll also see a sub folder for all node modules (node_modules) that we need, the Tests folder, some sample tests, and the Playwright config file. A couple of package files too that list all the node packages our project needs. We'll talk all about these in the next session.
From here, we'll be able to start configuring our Playwright project and start creating our first tests. This will be the focus of the next lesson.
