How to Generate Playwright Tests using MCP Copilot

Hey everyone, let's take a look at how you can generate a playright test using the Playright MCP. What's the difference between using Copilot to generate a test and using the MCP? Well, basically imagine a scenario where you do not have access to the code, but you need to test a URL.

All you've got is a browser. Copilot can't help you here. And that's where the Playright MCP comes in.

It gives Copilot access to the browser so it can open a browser and use it just like a user would. But then it can save what it did into memory and then generate a test for you. Let's take a look.

So here I've got a reusable prompt file and this is located inside my GitHub folder inside a prompts folder and I've just called it generate on test. And this is basically setting the scene. It's saying you're a playright test generator.

You're given a scenario you need to generate a playright test for. Do not generate test code based on the scenario alone. Do run the steps uh using the playright MCP.

And then only after they're completed, emit the playright test and save that test in the test directory and then execute the test and iterate until the test passes. Um I've already got the MCP up and running. I've just got it locally installed here and it's running as you can see here.

Now, let's go ahead and drag and drop a prompt file into Copilot so it has it in context and then we can paste in the command we want it to do. We wanted to generate a player test for the following scenario. Navigate to URL, search for Garfield, and verify the movie is in the list.

Now, I'm using agent mode here and I'm using cloud 3. 5 SE for this example. Let's go press play and see what it does.

So, it's going to help us generate a playright test. But first, let's start by opening the browser. Look at that.

It's just opened up a browser window for us by running the Playright MCP server. Now, it's searching for Garfield. But look, it's run into an issue.

So, it's gone ahead and run a page snapshot. So, it can get all the accessible names of the page so it knows what it needs to do. And look at this.

It now sees it needs to click the search icon before it's able to run the text and type the word Garfield. So, that's really, really cool. Now, it's successfully able to set up the test scenario because it knows exactly what it needs to do to click to get there.

Look at that. It's just gone ahead and created um the the test for us. Let's go and look at that.

Look, it looks pretty good. And it's going ahead and running it, too. And there we go.

That worked. It passed just as we'd hoped. And there we have a test just generated by the MCP being the user clicking around um a scenario that we just asked for in basic English and it's able to generate that test for us.

That's pretty cool. That's how you can generate a test using the Playright MCP. Go ahead and play around with it.

Uh make sure you're tweaking those prompts to get it right. And happy testing everyone.