00:00:00The way our team builds our apps has been significantly improved.
00:00:03The reason?
00:00:03Claude Code recently launched its Chrome extension.
00:00:06You might think this was already possible with the Playwright or Puppeteer MCP.
00:00:09But those tools had serious problems like an unnecessarily bloated context window,
00:00:14a messed up project folder filled with random screenshots,
00:00:17and most of the time they couldn't even complete the actions on the app.
00:00:20This is why I was never a huge advocate of automated testing using AI.
00:00:24But this is also why I was really excited about this new Claude extension.
00:00:28If you've been keeping up with the channel, you might know that we actually made a video on it some time ago.
00:00:32The funny thing is that it wasn't meant for Claude Code but we clearly said that this extension has way more potential if it was.
00:00:38And here we are.
00:00:39Now it's finally out as an integrated MCP and it gives Claude Code all the custom tools it needs.
00:00:44Now right out of the box, it has some huge problems that we should fix.
00:00:48But before we dive into those, let's take a quick break to talk about Automata.
00:00:52After teaching millions of people how to build with AI, we started implementing these workflows ourselves.
00:00:57We discovered we could build better products faster than ever before.
00:01:01We helped bring your ideas to life, whether it's apps or websites.
00:01:04Maybe you've watched our videos thinking, "I have a great idea, but I don't have a tech team to build it."
00:01:09That's exactly where we come in.
00:01:10Think of us as your technical co-pilot.
00:01:13We apply the same workflows we've taught millions directly to your project,
00:01:17turning concepts into real, working solutions without the headaches of hiring or managing a dev team.
00:01:23Ready to accelerate your idea into reality?
00:01:25Reach out at hello@automata.dev
00:01:28Coming back to the problems.
00:01:29The biggest one I faced was that it took too many sequential steps to just test something really simple.
00:01:34You might have noticed that when you ask Claude to visually test a website's landing page,
00:01:38it performs a scroll operation for each section and captures a screenshot at every step.
00:01:43It then stitches all the screenshots together to analyze the UI section by section.
00:01:47You might think this is a good approach, but it's not.
00:01:49Instead of this, we can make it take full page screenshot and save all those tokens.
00:01:53To solve this, I used a script that leverages different web tools to take the full shots.
00:01:57I also added instructions to use that script in a custom slash command in my project.
00:02:02Now, when I use that command to test the landing page,
00:02:04it recognizes that this is a full page test based on the instructions I've included
00:02:09and uses the script directly instead of the usual section by section method.
00:02:13Because of this, the test happens significantly faster and it has the same accuracy.
00:02:17The second problem I encountered was when these MCP tools tried to load a huge amount of content
00:02:22all at once for a simple task.
00:02:24Instead of loading specific divs, it often loads all the HTML within the main tag,
00:02:28which contains a huge amount of tokens even when it's not necessary.
00:02:32This ends up consuming a large chunk of the context window,
00:02:35and even your simplest tasks can bloat it significantly.
00:02:37To solve this, I added instructions in the Claude.md file
00:02:41on how to properly manage context when using the Claude Chrome extension.
00:02:44This way, any extraction is precisely limited
00:02:47and it doesn't bloat the context with unnecessary information.
00:02:50Another problem is that Claude wastes a lot of time when it encounters websites
00:02:54that contain unwanted pop-ups such as cookie notices and similar prompts.
00:02:58To get rid of them, it uses the same screenshot and scroll sequences.
00:03:01But this is wrong.
00:03:02Instead of letting Claude consume unnecessary tokens and time,
00:03:05we can use other workarounds to handle these pop-ups.
00:03:08As an alternative, I created a script that includes the most common "except" button selectors
00:03:12and patterns for dismissing cookie banners.
00:03:15It finds those selectors in the code and executes functions to dismiss the pop-ups automatically.
00:03:19I also added instructions in the Claude.md file
00:03:22so it runs this script first before proceeding with the main content.
00:03:25Now, whenever I ask Claude to go to a website,
00:03:28it first follows the instructions in Claude.md and executes this JavaScript.
00:03:32This automatically dismisses the cookie banners,
00:03:35allowing Claude to continue with the main content
00:03:37without wasting any tokens or performing unnecessary steps.
00:03:40For security reasons, Claude has been limited from performing captures
00:03:44or completing authentication on your behalf.
00:03:46So if you come across a website that contains them,
00:03:49Claude can't complete this process for you.
00:03:51This is something you have to handle on your own.
00:03:53Whenever you work on a website that requires login or CAPTCHA verification,
00:03:57make sure you've already authenticated before giving Claude the task.
00:04:00This way, it won't get blocked and waste any time.
00:04:02So these were the main problems I could solve.
00:04:05But to properly use it for testing,
00:04:06you actually need a proper workflow to test out any application.
00:04:10But before we get to that, I want to talk a little more about
00:04:13why I prefer the Claude Chrome integration over Puppeteer.
00:04:16This is mainly because it's a native tool built by the developers of Claude code themselves,
00:04:20and it offers much better integration with improved control and features.
00:04:23These MCPs are focused on testing in a dedicated separate environment
00:04:27that maintains no sessions.
00:04:29They're often troublesome to install and clutter your project folder with all the screenshots.
00:04:33On the other hand, with this new Chrome integration,
00:04:35Claude has the ability to interact with your signed-in accounts.
00:04:38It can interact with services like Google Docs and Google Sheets.
00:04:42It can even retain all session information and use it to perform tasks even better.
00:04:46Before we get to the workflow, I want to mention that
00:04:48browser integrations do use a lot of context
00:04:51because they're just more compute-intensive than regular tool calls.
00:04:54They've even mentioned it in one of their blogs.
00:04:56So you do need to keep an eye on the auto-compaction while working with Claude code.
00:05:00Also, since this is the Chrome integration, it only works with Chrome.
00:05:03I expected it would work with any Chromium browser, but it doesn't.
00:05:07And we can't really solve that.
00:05:08And for those of us that use multiple Chrome profiles,
00:05:11it'll be a little more frustrating because it continuously opens up the wrong profiles.
00:05:15And I do hope they solve this bug pretty soon.
00:05:17With all the fixes I mentioned earlier and the integration of Claude with Chrome,
00:05:21my development workflow has improved significantly.
00:05:24However, Chrome extensions have a limitation in Manifest V3.
00:05:27They can be blocked if they run for too long.
00:05:29Many people are asking the developers of Claude code to fix this on their repo as well.
00:05:33If you're doing end-to-end testing of your web application from start to finish,
00:05:37this can cause the session to be blocked by Chrome
00:05:39and Claude will stop unexpectedly.
00:05:41You'd then have to re-prompt it to restart execution.
00:05:44This can be particularly troublesome if you assign a long-running task to Claude
00:05:48and step away from your computer,
00:05:50only to return and find the task only partially completed.
00:05:53For this exact reason, instead of end-to-end testing,
00:05:55I created multiple test files covering all different aspects of the application.
00:06:00Each file contains detailed information on priority levels,
00:06:03preconditions, testing steps, and expected results.
00:06:06There's also a testing guide on how to conduct these tests,
00:06:09along with a readme for the test documentation.
00:06:11As you know, Claude has a limited context window,
00:06:13and when that limit is reached, instructions and progress can be lost.
00:06:16For this reason, I added instructions in the Claude.md file
00:06:20that tell Claude to create a comprehensive test report document after testing each file.
00:06:24This way, even if you have to compact because the browser tools consume a lot of context,
00:06:28Claude can retain awareness of what's been tested
00:06:31and what still needs testing by referring to these progress files.
00:06:34Now, before progressing with any test, the best practice is to run a compact
00:06:37because testing your application using Chrome is going to consume a lot of your context window.
00:06:42To streamline my testing process, I created another custom slash command.
00:06:46What this command does is test in a guided manner
00:06:48and create documentation in a proper structure after testing following the Claude.md instructions.
00:06:54I also added instructions to monitor the context before starting any task,
00:06:58so that when testing begins, it doesn't lose context midway and compact while it's working.
00:07:02This way, when you start the testing process, you just use the slash command
00:07:06and provide the file you want to begin testing with
00:07:08and Claude starts testing by following the exact instructions.
00:07:11It identifies issues on its own and uses the browser and all the necessary tools for testing.
00:07:16It interacts with elements automatically and is able to find errors that are not usually visible
00:07:21but can be detected by reading the console output.
00:07:23It also documents the testing at the end as instructed.
00:07:26In this way, the entire testing process is significantly improved
00:07:29because Claude has access to console logs
00:07:31and can perform automated testing in the browser more effectively than ever before.
00:07:35That brings us to the end of this video.
00:07:37If you'd like to support the channel and help us keep making videos like this,
00:07:41you can do so by using the super thanks button below.
00:07:43As always, thank you for watching and I'll see you in the next one.