In this session we look at creating Playwright projects. There’s two ways to create projects.
1. In Visual Studio Code
2. Command Line using `npm`First I'll walk you through the Visual Studio Code approach. Then I'm going to show you, and explain, the command line approach.
Creating Playwright Projects with Visual Studio Code
If we look at Visual Studio code approach first. The simplest way is to create an empty folder and then create a project using the “Command Palette“.
In VSC then select the “Open folder option" first
Find a location where you want to create your project and add a new folder in here for say, Project 2.
We've selected an existing folder, then created a new sub folder and opened that folder. From here we're ready to create a new Playwright project.
Then pressing “Control+Shift+p" for the command palette bar, and we can just type Install Playwright.
Once you've entered Install playwright you'll see the options to select which browsers you want to work with. You can select chromium, Firefox and WebKit.
Then select JavaScript or TypeScript. The default is TypeScript, Microsoft's JavaScript implementation. Then select if you want a GitHub Actions workflow, which we'll add for now and talk about in a later lesson. Finally, click on ok.
At this point what you should see in the terminal is the following command executed.
npm init playwright@latest --yes -- --queit --browser=chromium --browser=firefox --ghaWe're using the Node package manager (npm) and initializing the Playwright packages. We're automatically selecting yes for the install of the Playwright node modules. Using “quiet" to surpress and further prompting. We're selecting the Chromium and Firefox browsers to install. Then adding the –-gha option that adds GitHub Actions file.
Once complete we'll see our new project structure like this:
The alternative to the VSC approach is to run the project initialisation command from a command prompt window.
We can take the same command that we saw the command palette construct, like this:
npm init playwright@latest --yes -- --queit --browser=chromium --browser=firefox --ghaThen run this command in a command prompt. From the Windows start menu search for “command prompt" and open:
Now what follows does depend on your installation of Node and Npm (see previous post on Setting Up Playwright <- PLEASE LINK TO PREVIOUS POST). You can check this with a few commands though
where node
where npm
node -v
npm -vYou can run the above commands to check you have Node and npm installed and that the executables run by checking the versions.
Then we create a new directory to hold our new project and change to that directory (as we want all our packages and files to be created in this new directory when we run the init command).
mkdir project2
cd project2And this should look like this..
Now we're ready to run the npm init command to initialise your new Playwright project. Run this command:
npm init playwright@latest --yes -- --queit --browser=chromium --browser=firefox --ghaFrom which you'll be presented with some initial setup options:
You can select the two default options for the language and location of your tests:
At which point npm will spend a few minutes building your project.
Essentially we're running the same command in a Command Prompt that we ran in VSC. That command constructed as follows:
npm - run node package manager
init playwright@latest - initialise a Playwright project with the latest packages
--yes - accept the dfaults
--quiet - minimise options that you are prompted for
--browser= - selects the browsers your Playwright project will suppot
--gha - creaste the gitHub actions workflow fileWe'll go into all of these options in more detail later but that should give you and understand of the fundamentals.
Once the setup process has completed you should see something along the following lines:
We see the completion message with the little Playwright logo.
Whether you view your project in VSC or from the command line you'll find you have these files and folders:
First you'll see that we've got the GitHub folder (for workflows we create to run our tests in the GitHub CI environment). We've got the node modules folder that contains the modules needed to support a Playwright project. We've got a couple of folders to hold our tests (tests and tests-examples). A couple of package .json files that contain lists of node package dependencies for this project. Finally the Playwright configuration file (playwright.config.ts). We'll talk a lot more about these folders and files later but that's all you need to get started with your first project.
That's it really! Two simple ways to create your first Playwright project. In the next lessons, we'll look at how to write, record, and execute tests we create in our Playwright projects.
