Transcripted Summary
Now let's close station one by transitioning from theory to our working environments.
# The Machine Checklist
Throughout this entire course, I will be demonstrating advanced engineering concepts inside VS Code and inside Inflectra SpiraPlan. To follow along with me, you need to make sure your machine is prepared. On my screen, I will briefly walk through the items on the checklist.
- Make sure you have VS Code installed as your primary IDE.
- Verify you are running the Node.js LTS version. LTS is for long-term support, which automatically includes npm. Both attachments have an arrow showing the download link.
- Make sure your environment variables are active, which you can verify in your terminal by running the verification commands
node -vandnpm -v. - Make sure you have an empty working directory created on your machine where we will install our Playwright framework libraries. As you can see, I have created a sample working directory folder called Playwright Demo. However, I will use a different directory for this course.
With your machine checked, you need to establish an enterprise quality management platform. I will use SpiraPlan by Inflectra. I came across SpiraPlan at inflectra.com, which is a great alternative because it has out-of-the-box traceability. It bridges the entire quality lifecycle by linking your project releases, business requirements, and functional test cases directly into a unified view. There are no third-party plugins required to see your coverage.
# Initializing the Playwright Project
Let's initialize the Playwright project. This is the presentation slide for the setup of Playwright, but let's walk step by step in VS Code.
Go to the terminal and start with the command npm init playwright@latest.
Now, Playwright wants you to choose TypeScript or JavaScript. Select TypeScript. Where to put your end-to-end tests — we're going to select tests by default. Now that you have selected the tests, the next thing is to add a GitHub Actions workflow. Normally, I would recommend selecting false for the GitHub Actions workflow, so I'm going to press Enter and it selects false by default. Now the next step, which is the final step, is to install Playwright browsers — keep the default option, true, so you can download and configure the binaries for Chromium, Firefox, and WebKit.
And that's it for Playwright.
# Connecting Your AI Client
Now we would interact with AI. There is more than one way to execute our agentic workflow, and I'm going to show you how to use Claude Code using the terminal, and also how to do it with the extension interface.
So we see that it's finished and it says happy hacking. Now, when it comes to Claude Code and a terminal, type claude and press Enter. Select yes for the statement "I trust this folder." At that point, you will start typing your commands inside of Claude Code.
Another way to execute our agentic workflow is through the chat window. Let's install the interface. Navigate to the VS Code marketplace by clicking this extensions icon, and search for Claude Code for VS Code. I have the extension set up, but you must click install, then trust publisher and install. Next, you will see trust workspace and install.
Within seconds, your chat panel is active. You might see an orange icon in this right corner over here to bring up the chat window. If you do not see the orange icon, then click these three dots and select Claude Code: Open. And you will bring up a chat window — and you could bring up as many as you want to. You see now I have four chats. So you could bring up how many you want to, and you can also move them around.
# You Are Not Locked to One Vendor
Now, let me address an important question. If you or your organization uses a completely different AI client that is not Claude Code, or you do not currently have a subscription for Claude Code, don't worry about it. The core skill files, the principles, and the framework governance tags we're going to use in this project throughout the course are completely universal. They are not locked to only one vendor. They will work on any LLM workspace.
Now that you have access to whatever you are going to use for your development engine — like Goose AI, for example, is a good one, or running your local open source model — the intelligence lies in how you design the skills, not the chat window you use.
When it comes to Claude Code, it requires a subscription. Therefore, this is the only part where engineers encounter paywalls or credit card prompts, but you can completely bypass those financial points using the following three options.
Option A is the VS Code extension route. If you utilize the native Claude extension panel directly inside your VS Code workspace, Anthropic provides a baseline of free daily usage allowances for developers using this particular interface in VS Code. This allows you to build out your framework integrations completely for free.
But if you want a vendor-agnostic environment, we drop into Option B. Instead of being locked into a proprietary web interface, you can deploy Goose and install the free Continue extension inside your IDE. Both of these are free, local tools, and they operate like an engineer directly inside your workspace. Most importantly, they support MCP. This means they can utilize Playwright MCP and Playwright Test MCP.
Let's look at three steps to execute Option B. First, under client workspace setup, you will run the startup terminal script to deploy the standalone Goose client and pull the free Continue extension right from the VS Code marketplace. Second, you connect that setup to a free local LLM runner, which runs open models right on your computer's own hardware. Third, you can sign up for a free developer account on cloud inference platforms. This gives you fast execution speeds for open source models without ever requiring a credit card — no paywalls. You'll have the freedom to master testing on your own terms.
Our environment is set up. Our Inflectra SpiraPlan is live and our workspace interface is fully prepared. In our next video, we will install Playwright MCP, and I will see you in station two.
