When working with Claude Code or with any AI
agents, it's a good idea to give them ways
of validating their work. That could be
automated tests. I'll get back to that.
But it can also be browser access, at least if you're building a web
app where they can access a browser and test something.
So for example, here, I got my development server up
For me, it's running on port 3001. By default, it would be
port 3000. And I could now tell Claude Code
to test the application it built. So I could say, "Test
the application you built using the Playwright plugin or MCP," it's kind
of the same thing, "test all main features step-by-step
work correctly." And I also tell it that the application server
running, and in my case, it's running on port 3001.
Playwright is a tool that was initially built to help with
end-to-end testing of web applications, and that still is kind of
its main purpose, but with the rise of coding
agents, it now is also very popular for giving
access so that they can interactively explore a website and
work with it. Now here, I'll not send this in plan mode, but
instead with accept edits on. And what this should do
now is use that Playwright integration which we added through that
plugin to then spin up a browser window and
navigate it on its own and test the application on its
own. So here, it's initially asking me for permission
Playwright tool, and I don't want it to ask again,
that. And it did now open this browser.
So this browser window here was opened by Claude Code and navigate to
localhost 3001. Now, since this is the first time it's
using this plugin, it's asking me for all kinds of
Playwright, and unless you enabled that mode where you dangerously grant
all permissions, you'll have to initially allow them all
step-by-step. But of course, that will get better once it used that
plugin a bit more. And it can now indeed navigate around
navigate to this authentication page here.
Now it's asking for more permissions to fill in that form field.
So I'll allow that, and you see it filled in these form
step, it will likely click this button.
Now it wants to take a snapshot of the page so that it can look at it because as
mentioned before, Claude Code has image vision
it images, but it can also, of course, take a look at images
itself. It can also take a look at the network
or anything like that. And as you can see, it now made it to the dashboard and it
will keep on interacting with this site, now creating a new note.
And that, of course, is a very powerful capability since it
Claude Code to test its UI changes and its
website changes on its own, and it creates a feedback
loop where Claude Code can then on its own detect
issues, fix those issues, test those changes and so
on. It's worth noting though that browser access is
quite token intensive because all these tool
descriptions it's creating, all these tool calls do cost quite a
bit of tokens. They can get quite long.
Looking at all those images that it eventually creates costs
tokens. So you should kind of be careful about
feature, but of course, it is a very powerful feature at the same
which should definitely be in your tool set.
And as you see, it's even able to open new tabs to test
sharing feature here, for example.
So now it concluded its testing, closed the browser, and it
found some problems which it is now trying to fix.
And once it implemented those fixes, it'll of course also try to
test them again in the browser. And again, that can be a very powerful feedback
loop therefore.