Setting up a local environment for the Playwright Framework— Part 03

We have talked in Part 01 and Part 02 about what Playwright is and what the main features of Playwright are, with a detailed comparison. This article is about setting up the local environment for the Playwright automation framework. Please note that this series of articles was written using the Node version of Playwright with a Windows machine.

Pre-Requisites

Before starting, you must install and configure a few things on your PC. Some of these won’t be mandatory, but it will be easy to have them.

• Install Visual Studio Code — It is a source-code editor made by Microsoft with the Electron Framework for Windows, Linux, and macOS. Click here to download VsCode.
• Install NodeJS — It is an open-source, cross-platform, back-end JavaScript runtime environment. The playwright will be run on top of this. Use this link to download NodeJs. Note that Playwright is requiring Node >=14.
• GitHub Desktop—Official desktop client of GitHub will be used for local version control. Click here to download GitHub Desktop.
• Git — Better to install git as well. Click here to download.

Setup Directory and Install Dependencies

★ Step 01 — Create a new folder in any location. There are no specific needs, just create a new folder. Here are some shortcuts that you can use.

• WinKey + E — Open file explorer
• Ctrl+Shift+N — Create a new folder
• F2 — Rename the folder (Make sure that folder name doesn’t contain spaces)

★ Step 02 — Open the directory in Visual Studio Code. Use the “Open Folder” option in VsCode or follow the steps below.

• Shift Key + Right-click on the directory
• Click the “Open PowerShell window here” option
• Type “code .” and press enter. It will open the VsCode in the directory.

★ Step 03 — Open the VsCode inbuilt terminal.

• From the VS Code, Click on Terminal Menu > Click on New Terminal

★ Step 04 — Install Playwright

• Type the following command in the terminal and press enter. It will create the default project structure and install npm libraries. In newer versions of Playwright, configurations can be set during installation. If you get to do these configurations before installation, choose JavaScript as the scripting language.

npm init playwright@latest

Playwright installation time configurations

Once the installation is complete, you will receive a “success message” with some instructions (command list) to start.

Installation is completed

★ Step 05 —Learn the folder structure

The next step is to learn the folder structure. This could change once we start making adjustments.

tests folder: Uses to write the test scripts

test-examples folder: There are some scripts that you can try out.

node_modules folder: Required libraries are stored here.

package.json and package-lock.json: Helps to track dependencies and their versions, create new runner commands

.gitignore: Helps for version controlling

playwright.config.js: Playwright framework configurations include here

Playwright default folder structure

Conclusion

With Playwright installed, the environment setup part is now complete. If you get errors at this stage, it’s usually due to the NodeJs version or an error in the Node installation. So make sure you are using the correct version and NodeJs is installed and configured correctly.

What’s next?

Enabling Version Control for the Playwright Automation Framework — Part 04