Brief Summary
This video demonstrates how to use the Playwright Model Context Protocol (MCP) server with the Cloud desktop application to automate web interactions using AI. It covers downloading and installing the Cloud app, configuring it with the MCP server, and using prompts to navigate websites, input data, and generate automation scripts and HTML reports.
- Downloading and installing the Cloud desktop application.
- Configuring the Cloud app with the Playwright MCP server.
- Automating web interactions using prompts.
- Generating automation scripts and HTML reports.
The video introduces the concept of using the Playwright MCP (Model Context Protocol) server with the Cloud application to automate web interactions. The presenter outlines the steps to set up and use this integration for tasks like web navigation and data input.
To begin, users need to download the Cloud desktop application from cloud.ai/download, install it, and then sign up and log in to the application. The presenter mentions that they have already completed this step and will proceed by showing the desktop app.
The presenter shows the Cloud desktop application, already signed in. They attempt to use a prompt to open a browser and navigate to the OrangeHRM demo website.
When the presenter tries to use the Cloud app to navigate to the OrangeHRM demo website without the MCP server configured, the app performs a web search instead of opening a browser and navigating to the specified URL. This demonstrates the need for the MCP server to enable actual browser automation.
The Model Context Protocol (MCP) is introduced as a standardized way to connect AI models to various data sources and tools. It allows tools like the Cloud app to interact with web pages through structured accessibility snapshots, bypassing the need for visual models. Key features include being fast, lightweight, and LM (Language Model) friendly.
The Playwright MCP server, available on GitHub, provides browser automation capabilities using Playwright. It enables language models to interact with web pages through structured accessibility snapshots, offering a lightweight and efficient solution for web automation.
To use the Playwright MCP server, NodeJS version 18 or newer is required. This ensures compatibility and access to the necessary features for running the server.
To configure the Cloud app to use the MCP server, the presenter copies the configuration from the MCP server documentation and adds it to the Cloud app's configuration file. This involves opening the Cloud app, navigating to settings, enabling developer mode, editing the config file, and saving the changes.
After saving the configuration, the Cloud app needs to be exited and restarted for the changes to take effect. This ensures that the app properly connects to the Playwright MCP server.
After restarting the Cloud app, the presenter verifies that the Playwright MCP server connection is active by checking the developer settings. The availability of Playwright tools confirms a successful connection.
The presenter tests the integration by using a prompt to open a browser and navigate to the OrangeHRM demo website. This time, the browser opens and navigates to the correct page, demonstrating the MCP server's functionality. The presenter also shows that the browser-navigate tool from the Playwright server is used.
The Cloud app captures a snapshot of the loaded page, allowing it to recognize elements and perform actions based on prompts. This enables the AI to interact with the web page effectively.
The presenter provides a detailed prompt to input the username and password on the OrangeHRM login page and click the login button. The AI successfully identifies the elements, enters the credentials, and navigates to the dashboard, verifying the login.
The video shows the actual browser performing the actions dictated by the prompt, such as entering the username and password and clicking the login button. The AI verifies the successful login based on the dashboard interface.
The presenter uses a prompt to close the browser, demonstrating the ability to control the browser through AI commands.
Based on the previous actions, the presenter prompts the AI to generate an automation script. The AI provides a comprehensive script, including credentials and base URLs, which can be used as a starting point for further automation efforts.
The presenter instructs the AI to generate a modern HTML report based on the execution. The AI provides the file structure, package.json, and commands needed to execute the test.
The AI generates an HTML report summarizing the test execution, including the total tests, passed tests, failed tests, and time taken. This report provides a comprehensive overview of the automation results.
The generated HTML report includes details such as navigation to the website, verification of login form elements, entering username and password, clicking login, and verifying successful login to the dashboard. The report offers a clear view of the test results and steps executed.
The video concludes by highlighting how the Playwright MCP server and Cloud desktop can be used to test web applications, generate scripts, and create test reports, ultimately minimizing work and improving automation efficiency.
Summarize any YouTube video in seconds
Get summaries like this one for any video, in your language, with the free Summ app.
Transcript
Full transcript of “Playwright MCP Demo with Claude - Step-by-Step Tutorial”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:08 Hello everyone and welcome to this video. In this video, we will learn about the pay MCP server using the cloud. So let's begin. The first thing which you need to do is that you need to go to the browser and you need to go to this particular website which is cloud.ai/d download. And from here you need to download the desktop version of the clot. And once you have downloaded it, you need to install this one. You need to sign up and login into this particular desktop app. And I've already done this. So let me show you the desktop app. So simply I have open this desktop app over here. Already sign in. And for example, if I go here and ask this one, open browser and navigate to
0:54 orange HRM demo website. If I press enter, let's see what happens over here. So basically it will say that I can help you to access or demo website. Let me search. Now this search is being done through the internet right and here this is not what we want. So basically we want to interact we need to actually open the browser and we actually need to navigate to that particular website right now because the cloud does not have a access to this one. Okay. So in order to do this we have the MCP servers. So let me go to the browser here and let me go to this model contextprotocol.io website
1:42 and here you see that MCP is basically a model contest protocol which provides a standardized way to connect EI models to a different data sources and tools and we have playright mcp server. So this is basically official one and this is basically github.com/microsoft/play-m over here a model contest protocol server that provides browser automation capabilities using playright. This server enables endless lens like the cloud we have to interact with the web pages through the structured accessibility snapshot and it will bypass the need for the screenshots or the visual tune models. Now the key
2:28 feature is fast lightweight LM friendly and deterministic tool application and in order to use this one you should have a NodeJS 18 at least or the newer version. Okay. And this is how you can start with this one. So simply we are using cloud which is the client. So simply we need to copy this configuration from here. Go to the cloud desktop application. And here simply we need to go to the file. Go to the settings. Go to the developer mode addit config. And this is a configuration file. We need to open. We need to provide the configuration file over here. Save this one. And once it's got saved, close this one. And now
3:16 we need to exit this one first in order to affect these changes. So simply go to the file, click on exit and you will see that you will some changes over here. And once it is done, open your cloud app again. And here what we need to do is that give a same prompt. But before giving the prompt simply go again here click on file go to the settings go to the developer and you see that we have a playright over here and this is up and running. Now we are good to go. We have indicated successfully we are connected to this uh playright MCB server and here you click on this one. So now it's not
4:03 only searching from the web but it has these 25 play write tools available. So if I click on this one so it can close the browser resize the browser handed direct box file upload press key navigate back forward browser network. So these all are enabled for this LM now. Okay. So it will be using these tools as well besides web search. Okay. So I'll say open browser and navigate to orange HRM demo website and press enter.
4:48 And now you will see that it will actually opening the browser right the actual browser and it navigated to HRM demo website and on the back end you will see that it uses browser- navigate tool from the play server. If I click on this one this was a request and this was a response. So in the response basically we can see that it is actually executing a playr write command over here which is basically await page go to and through this you can navigate to a particular web page and if you go here it says that perfect I have opened the browser and navigated to HRM demo website the page has loaded successfully and I can see it's showing the login page and here we
5:34 have a browser snapshot so it will capture a snapshot of this complete lead page. So now if we provide any kind of information, if we want to perform any kind of action, it will actually recognize those things and perform those. So for example I'll say provide username as admin and password as admin 1 2 3 and finally press on login button. Once this will be done, ensure that user is
6:20 successfully logged in, logged in and navigated to dashboard. So I'm giving a multiple instructions over here in the simple plain English. So I'll help you log into this one and you see that it's identify the element providing the details right and you see that right password field then login button clicking on the login button once it's click on the login button it will navigate to the particular browser dashboard and here you will see that it has a dashboard so based on the
7:06 dashboard interface the page should now displays the main orange dashboard with this header. Okay. And based on this is actually verify this thing that we have successfully logged in. And if I go to the browser, you will see that actually it performed all those actions and we have successfully logged into the ORM website. Right now I'll say um close browser. So it will close the browser and it will asking for to use this one. Yes to use this one. This is coming from playrite. And now based on the above I'll say provide automation
7:52 script for above. So it will now write the automation script comprehensive script. So you don't need to write everything from the scratch. You see on the right side we have complete test we have a credentials we have base urls everything is being provided by the cloud just by giving the instruction. So it actually doing the actions and from the actions we are actually generating the script and we can utilize that script as per our context or the framework and even because it done the execution. So I'll say based on execution
8:37 generate uh modern HTML report for the for the above test. So once it will complete because right now it not only generating the code but it will showing you the file structure how to run the test and this is the six file you need to create. This is the package.json these command you need to execute. Every single thing is being provided for you based on the prompts we have given. Okay. Now let's execute this particular
9:25 prompt. So based on execution generate a modern HTML report. So it will create another HTML report as well. For the execution we just done using the cloud and prewrite MCP server. So that's how you can utilize the MCP server. test the web applications, assert those, generate the scripts, generate the test reports and it will obviously you know help you to minimize your work. It will make you more operative and you can deliver the automation stuff quicker than we used to do previously. Okay. So it's now generating HTML report for us and just wait for some time because it's
10:13 working. It's writing the HTML for this particular one. And once it will complete this one, we can see the report here as well. We can download that report and we can share and email that one. So it's working on this one right now. And finally you see that the report uh is here and orange automation test report compressive test execution results total test three pass three fail zero time taken this. Let me scroll this here. Navigate to website. Verify login form elements are visible. Enter username this. Enter password this. Click on login. Verify successful login
10:58 to the dashboard. So these were the instructions we provided on based on that it actually executed and based on that we actually generated the test script as well. So this is the view port this was the browser this was the time and we have a very beautiful report generated from one single prompt. So that's how you can work with playride MCP server and cloud desktop. [Music]
