Transcript

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.

Key Takeaway

Claude Code's Chrome extension significantly improves AI-powered testing workflows when optimized with context management strategies, full-page screenshots, automated pop-up dismissal, and modular test documentation to overcome browser integration limitations.

Highlights

Claude Code's new Chrome extension solves major problems with previous testing tools like Playwright and Puppeteer MCPs, which had bloated context windows, messy project folders, and poor action completion rates

Full page screenshots instead of section-by-section captures significantly reduce token consumption and improve testing speed while maintaining accuracy

Custom scripts and Claude.md instructions can automatically dismiss cookie banners and pop-ups, preventing Claude from wasting tokens on unnecessary interactions

Context management is critical when using browser integration tools, requiring precise HTML extraction instructions to avoid consuming excessive tokens on unnecessary content

Chrome extension limitations in Manifest V3 can cause sessions to be blocked during long-running tasks, necessitating shorter, modular test files with comprehensive documentation instead of end-to-end testing

Custom slash commands combined with test documentation files enable Claude to retain awareness of testing progress across context window compactions

The Claude Chrome integration offers superior capabilities over MCPs including session retention, ability to interact with signed-in accounts, and native integration with Claude Code

Timeline

Introduction and Overview of Claude Code Chrome Extension

The video begins by highlighting how the Claude Code team's development process has been significantly improved with the recent launch of the Claude Code Chrome extension. The speaker explains that while Playwright and Puppeteer MCPs existed previously, they suffered from critical problems including unnecessarily bloated context windows, messy project folders filled with random screenshots, and frequent inability to complete actions on applications. The speaker emphasizes that these limitations were the reason they were never strong advocates for automated AI testing until this new native Chrome extension was released as an integrated MCP, finally providing Claude Code with the custom tools it needs for effective testing.

Sponsor Message: Automata Services

The speaker takes a break to introduce Automata, a service founded after teaching millions about building with AI. Automata helps individuals with ideas but without technical teams by acting as a technical co-pilot, applying proven AI workflows to turn concepts into real working solutions. The speaker positions Automata as an alternative to the traditional hiring and management headaches of building a dev team, offering to accelerate ideas into reality through their experience implementing the same workflows they've taught. Interested parties are directed to reach out at hello@automata.dev to discuss their projects.

Problem 1: Inefficient Sequential Testing Steps and Screenshot Approach

The first major problem the speaker encountered is that Claude performs inefficient sequential steps when visually testing a website, such as scrolling through each section individually and capturing a screenshot at every step before stitching them together for analysis. The speaker explains this approach consumes unnecessary tokens and wastes time despite appearing logical at first glance. To solve this, the speaker created a script leveraging web tools to take full-page screenshots instead, then added instructions via a custom slash command in the project that tells Claude to recognize full page tests and use the script directly rather than the section-by-section method. This optimization results in significantly faster tests while maintaining the same accuracy level.

Problem 2: Excessive Content Loading and Context Window Bloat

The second problem identified is that MCP tools often load massive amounts of content unnecessarily, loading entire HTML sections from the main tag instead of extracting only specific divs needed for a task. This excessive loading consumes a large portion of the context window with unnecessary information, causing even simple tasks to significantly bloat the available context. The speaker addresses this by adding detailed instructions in the Claude.md file on how to properly manage context when using the Claude Chrome extension, ensuring that any HTML extraction is precisely limited and doesn't consume the context window with superfluous data. This proactive approach prevents context waste and maintains efficiency throughout the testing process.

Problem 3: Wasted Time on Pop-ups and Cookie Banners

The third problem is that Claude wastes considerable time and tokens when encountering unwanted pop-ups like cookie notices and similar prompts, using the same inefficient screenshot and scroll sequences to dismiss them. Instead of letting Claude consume unnecessary resources, the speaker created a script containing the most common accept button selectors and patterns for dismissing cookie banners, which finds and executes functions to automatically dismiss these pop-ups. Instructions were added to the Claude.md file to run this script first before proceeding with main content tasks. Now when Claude accesses a website, it automatically dismisses cookie banners following the Claude.md instructions, allowing it to proceed with the main content without wasting tokens or performing unnecessary steps.

Limitation: Authentication and CAPTCHA Requirements

The speaker notes that Claude Code has been intentionally limited by security restrictions from performing captures or completing authentication processes on behalf of users. This means that if a website requires login or CAPTCHA verification, Claude cannot complete these processes and will be blocked from proceeding. To work around this limitation, users must pre-authenticate themselves on any website requiring login before assigning testing tasks to Claude. By handling authentication manually beforehand, users prevent Claude from being blocked and wasting time on processes it cannot execute.

Advantages of Claude Chrome Integration Over Puppeteer MCPs

The speaker explains why they prefer the Claude Chrome integration over alternatives like Puppeteer, primarily because it's a native tool built by Claude Code's developers offering superior integration, control, and features. Traditional MCPs are focused on testing in a separate dedicated environment with no session retention, are often troublesome to install, and clutter project folders with screenshots. In contrast, the Claude Chrome integration allows Claude to interact with signed-in accounts and services like Google Docs and Google Sheets while retaining session information for better task performance. The speaker notes that browser integrations do consume significant context since they're more compute-intensive than regular tool calls, requiring users to monitor auto-compaction when working with Claude Code.

Technical Limitations of Chrome Extension

The speaker addresses technical limitations of the Chrome extension implementation, noting that it only works with Chrome and does not work with other Chromium browsers as might be expected. Additionally, for users with multiple Chrome profiles, the extension can be frustrating because it continuously opens the wrong profiles, a bug the speaker hopes will be fixed soon. These limitations represent current constraints that users should be aware of when planning to use the Chrome integration for testing workflows.

Problem 4: Manifest V3 Session Blocking During Long Tasks

A significant problem arises from Chrome extension limitations in Manifest V3, where extensions can be blocked if they run for too long. When users assign long-running end-to-end testing tasks to Claude and step away, the Chrome extension session may be unexpectedly blocked, causing Claude to stop executing the task mid-process, requiring users to re-prompt it to restart execution. Many users are requesting that Claude Code developers address this limitation in their repository. This issue is particularly problematic for comprehensive testing workflows, forcing a change in testing strategy to accommodate the session blocking behavior.

Solution: Modular Testing Files with Documentation

To overcome the session blocking limitation, the speaker replaced end-to-end testing with multiple modular test files, each covering different aspects of the application with detailed information including priority levels, preconditions, testing steps, and expected results. A comprehensive testing guide and readme for test documentation accompany these files. The speaker emphasizes that since Claude has a limited context window, instructions and progress can be lost when the limit is reached, necessitating a system where Claude creates comprehensive test report documents after testing each file. This approach ensures Claude can retain awareness of what has been tested and what still requires testing by referring to progress files, even if context compaction occurs.

Best Practices: Context Management and Custom Testing Command

The speaker recommends running a context compaction before beginning any testing since browser tools consume substantial context window space. To streamline the testing process, the speaker created a custom slash command that guides testing in a structured manner and creates documentation following Claude.md instructions, while also monitoring context before starting tasks to prevent mid-process compaction. When users invoke this command and provide the test file to begin with, Claude starts testing by following exact instructions, identifying issues independently, and using browser tools to detect errors not usually visible but detectable through console output. The custom command approach ensures systematic testing with proper documentation at the end, significantly improving the overall testing efficiency.

Advanced Testing Capabilities and Console Access

With all the optimizations and fixes applied, Claude's testing capabilities are significantly enhanced because it now has access to console logs and can perform automated testing in the browser more effectively than previously possible. Claude can interact with page elements automatically and identify errors that are not visible in the UI but can be detected by analyzing console output, providing more comprehensive testing coverage. The combination of custom slash commands, optimized scripts, context management, and proper documentation creates a powerful testing workflow that leverages Claude's full potential when integrated with the Chrome extension.

Conclusion and Call to Action

The video concludes with a summary of the improvements discussed and a call to action for viewers to support the channel by using the super thanks feature. The speaker thanks the audience for watching and indicates they will continue producing similar content in future videos.

Community Posts

View all posts