How to Install Playwright Test

• 00:16 Setting up Playwright using VS Code extension
• 01:52 Setting up Playwright using npm init command
• 04:02 Setting up Playwright manually

In the video, Jared from Comment Quality demonstrates three different methods of setting up the Playwright automation tool using the Playwright Test package.

The first method involves using the Playwright extension for Visual Studio Code (VS Code). Jared explains that once the extension is installed, we can utilize the in-built command palette (Ctrl + Shift + P) to install Playwright. This command will prompt the installation of the required browsers and sets up a basic CI workflow if you choose to add a GitHub action. After the installation, scaffolding is set-up, which includes example tests and Playwright configuration setup.

The second method uses the npm init command. Jared explains that this method allows for more flexibility as compared to the VS Code extension. By typing npm init playwright@latest in the terminal, the user is prompted with interactive questions about the language preference, the location of the end-to-end test, and the addition of Github actions. The scaffolding set-up, in this case, is similar to the first method.

The third method involves manual set-up. This method does not involve any scaffolding set-up. It requires the user to create a new npm project and manually installing the Playwright as a dev dependency npm i -D playwright-test. The manual way also requires the user to install the necessary browser binaries using the npx playwright install command.

Jared concludes the video by assuring his viewers that he would cover more advanced topics related to Playwright in future videos.