AI-Powered Test Automation with Playwright MCP, GitHub Copilot & PyCharm IDE (Playwright + Python)
By SDET- QA
Summary
Topics Covered
- Generative AI Generates New Content from Trained Data
- LLMs Think But Cannot Execute Actions
- Agents Execute What LLMs Plan
- MCP Bridges LLMs to Agents with Protocols
- MCP Enables AI-Driven Test Generation and Autohealing
Full Transcript
Okay. So in today's class uh we'll see how we can integrate AI so in playright automation. Okay. Playright along with
automation. Okay. Playright along with Python automation. So before jumping
Python automation. So before jumping into the concept so we need to understand some basic concepts like what is artificial intelligence and uh what is generative AI which is basically
subsection of the overall artificial intelligence and we'll try to understand what is generative AI and after that we need to also understand few terminologies like what is LLM which is
large language model the second thing is agent what is an agent how exactly we can use with agent and the third thing is MCP so model context protocol. So
these are the three important uh things we need to understand before jumping into the automation with AI. So first of all uh AI is basically artificial
intelligence. Everybody know that
intelligence. Everybody know that artificial intelligence.
So artificial intelligence is basically as a big umbrella under this there are so many uh subsections are there like we have a machine learning, neural networks. Okay. And then uh we also have
networks. Okay. And then uh we also have a robotics. So these are all comes under
a robotics. So these are all comes under the artificial intelligence only. Okay.
The main thing which we are interested is generative AI. Okay. So this is the main
generative AI. Okay. So this is the main part generative. This is main thing
part generative. This is main thing which we uh important in software development as well as in testing. So
artificial intelligence is a big umbrella under which there are multiple domains are there like we have a robotics and we have something called neural networks data science all these things comes under the artificial
intelligence only but the generative AI is also one of the part in the artificial intelligence where the developers and testers will focus more on the generative AI. So what is
generative AI basically? So generative A is basically generate the content. So
based upon the knowledge which you already have. So for example generative
already have. So for example generative aim means a system where we will train the data. Okay. We can simply say it is
the data. Okay. We can simply say it is a cisive system or it is a framework kind of thing where we can train with some data and based on the data it will
generate the new content or new set of data. So that is basically taken care by
data. So that is basically taken care by generative AI. So the name itself says
generative AI. So the name itself says generative means it will create some new content based on the existing one. But
we need to train it first. So until
unless we train it, it doesn't know what it has to do. Right? So we need to train the system first and then accordingly it will generate the content for us. So
that is basically generative AI is focusing on. So generative AI is
focusing on. So generative AI is basically a system is a system which has a trained data. Okay. Which
has a trained data. So based on this uh trained data it will work basically.
Okay, train the data.
So if you have some data, so we can work with the generative AI tools. There are
any number of tools are there. So we can just use them. Basically how exactly generative AI tools work based on the data which we have trained with them before. Okay. So in this generative AI,
before. Okay. So in this generative AI, this is a very high level terminology is a generic uh term under which there are multiple things are there again. So the
main thing is LLM which is basically large language model okay and the second thing is agent
agent and the next thing is MCP. So this
is very popular model context protocol model context and protocol. So these are the three
and protocol. So these are the three important things we need to understand before jumping into the automation. So
generative is a system which has a trained data. So based on this
trained data. So based on this based on the data it will generate the new content. So the
content can be a text or images whatever it is depends on the data which we already trained based on that it will create a new content. So which is basically focusing on generative AI. Now
there are three important things large language model agent and then MCP. So
let us see what is exactly LLM means. So
LLM is basically a system. This is also a system. As I said, generative AI is
a system. As I said, generative AI is basically system which has a train data.
Right? So LLM is also same thing. LLMs
are examples for generative AI.
Generative AI is a theory concept. But
there are certain tools which are implemented based on generative AI principle. So those tools basically
principle. So those tools basically called as LLMs, large language models.
So we already know there are many LLMs are there in the market. So we have something called chart GPT. You have a Google Gemini cloud deepseek. So these
are all comes under different type of LLMs which are already currently available in the market. So what exactly these LLMs will do? We can do we can ask
the questions and we can get explanation for those uh questions and also we can generate the code also. Sometimes we can generate the scripts automation script and sometimes we can also use them for general purpose for writing email,
creating the blogs, creating the documentation. So we can do many things
documentation. So we can do many things by using these LLMs right and we can use these LMS with the general general language. So we don't need to learn any
language. So we don't need to learn any programming nothing just basic English knowledge is enough to work with these LLMs. The most important thing is prompting this is very important. So
even though if you know the language if you're not providing proper prompt you will you will not get the proper output or proper response from the LLM. So you
should also know how to write a proper prompt in English language. So the
prompting is also very important. So
what is a prompting? Prompting is a a mechanism to provide the instructions to the LLM. So prompting is basically what
the LLM. So prompting is basically what providing providing inputs providing inputs or providing
instructions to the LLM. So prompting is basically providing inputs or instructions to the LLM. So we have to clearly provide the proper instructions
to the LLM. So then you will able to get the accurate output from the LLM. Okay.
So the LLMs basically what it will do based on the data which we already trained. So based on the data it will
trained. So based on the data it will able to generate some new content. Okay.
But it cannot act.
It has certain brain because we can instruct some data right. So it it can learn but it cannot act. So there are two things actually learning and acting.
So LLMs can learn the things but it cannot act that cannot execute. Okay. So
LLM can answer your questions. So if you ask something it can explain your topic.
And suppose if you ask LLM to generate some piece of code it can generate the code. It can generate the automation
code. It can generate the automation script but it cannot execute the script.
It can just only the generate the script based upon your instructions but it cannot execute it first of all.
Similarly, it can create an email. It
can generate the email message but it cannot send the email. So there is a two different things learning and acting. So
the main advantage of LLMs are what they can learn and then you can give the response but what is the limitation of
the LLMs? they cannot act or they cannot
the LLMs? they cannot act or they cannot uh do any activity or they cannot perform any action on the real time. So
that is a major limitation for LLMs. So for example, if I use charg and if you ask to write some test case, it is able to create the test case based upon your requirement. If I just provide simple
requirement. If I just provide simple requirement in the for in the form of prompting and it can generate the test case but it cannot execute the test case on the real browser. If I ask charg to
execute the test case, it cannot right.
So it can have it it has a brain. It can
learn things. It can generate the content new content but it cannot act.
It cannot execute. It cannot perform any action on the runtime. So that is the main limitation of this LLMs. So there exactly the agent come into picture. So
because of this limitations agent come into picture. So now what is an agent?
into picture. So now what is an agent?
So what is the limitation of LLMs? LLMs
can think, can learn, can provide the response, they can generate the output but they cannot execute. They cannot run anything. They cannot run your test
anything. They cannot run your test cases in the real browsers. They are all limitation from LLMs. And then agent come into picture. So what is the agent will do? Agent will actually perform the
will do? Agent will actually perform the actions. Agent can actually perform the
actions. Agent can actually perform the actions. agent can actually execute our
actions. agent can actually execute our automation test scripts on the real browser. It can interact with your
browser. It can interact with your browser. It can interact with your
browser. It can interact with your databases. It can interact with the
databases. It can interact with the backend APIs. It can access all the
backend APIs. It can access all the resources which are you have used at the back end even though they are remotely available or they are available in your local system also. So for example if you
are using charg don't have knowledge of about your files your computer files charg don't have any knowledge about the softwares which you have installed on your local system
right so but agent will know that so agent can execute so agent will able to access all the resources local resources or reot resources accordingly whatever
instructions you provided accordingly the agent will able to execute them on the real browser or real data databases or APS wherever you want. So we can say
a a uh agent is a basically an assistant.
A uh we can say it is an assistant that actually does what the LLM says. Okay.
So it is an assistant. Agent is an assistant that actually does what the LLM says. It can perform the actions.
LLM says. It can perform the actions.
It can perform actions or we can perform execution at the real time. So agent
alone cannot do any action. So we have to again provide some instructions from where we have to provide the instructions from the LLM only. Okay. We
will integrate LLM one of these LLM along with the agent. So LLM if I use only LLMs we cannot perform any action or execution on the real time. We can
simply generate the data or we can generate the automation scripts but we cannot execute them on the real browsers on the databases. So LLMs cannot access them all the resources whereas agent
will able to access everything all the resources browser databases APIs. So
wherever you have given the access to the agent agent will able to access everything but to perform action we have to again provide the prompt through LLM
only. So whatever LLM is provided based
only. So whatever LLM is provided based on the instructions the agent will act agent will perform the action on the real time. Okay. So based on the
real time. Okay. So based on the limitation of this LLM agents are developed.
But now agent and LLM how we can integrate these two. So agent is having LLM is having the brain. Okay that's
fine. agent can do the action but there should be something which should provide the instructions or protocol right so
there exactly MCP come into picture model context to protocol model context protocol so let's try to
understand this llm can generate the content it can just think and provide the response it cannot act agent can act
based on the instructions we provided through LLM. But even though if you want
through LLM. But even though if you want to if you want agent to be acted so we need to provide a proper pro protocols like for example agent can access the
agent can access the database and it can do something on the database. Agent can
access the browser, it can perform certain things on the browser. But what
it should do that we have to provide instruction like okay agent can open the browser but after opening the browser what we should do what agent should do we need to open the URL we need to interact with elements right we need to
provide all those instructions who will do the those all these things MCP will do that so agent will perform the actions based on a protocol right that
is provided by the MCP so MCP provided a protocol based on this model context protocol Agent will actor. Agent will
actor. So now what is the relation between these things? So what MCP can do? What else MC MCP can do? MCP can do
do? What else MC MCP can do? MCP can do browser automation. It can open the
browser automation. It can open the website. It can fill the forms. It can
website. It can fill the forms. It can click on the buttons also. Okay. So all
these things we can do through agent.
But to perform those things through agent again we have to provide the protocol through MCP. Okay. Through MCP
only it is possible. Only with agent we cannot do. So all three is interrelated.
cannot do. So all three is interrelated.
So in the first layer LLM come into picture. So what we can do with LLM? We
picture. So what we can do with LLM? We
can provide the prompt. So once it is provided the prompt then agent will perform the action. Agent will perform the action. On what basis agent perform
the action. On what basis agent perform perform the action? It can act on everything. It can access the resources,
everything. It can access the resources, databases, browsers and everything. But
we need to provide proper protocols to this through MCP. So here MCP come into picture. LLM agent and MCP. Okay. So
picture. LLM agent and MCP. Okay. So
basically LLM that understand the content and generates the new content. So what agent will do? Agent
content. So what agent will do? Agent
will assist to the LLM to perform the action. And
MCP works like a bridge between LLM and agent. MCP works between a like a bridge
agent. MCP works between a like a bridge between LLM and agent. So without MCP agent alone cannot do anything because even though agent is able to access all the resources
local or internal resources or external resources but it cannot perform any action until we provided a protocol or until provide certain instructions
through MCP. Okay. So this is the
through MCP. Okay. So this is the relation between the LLM agent and MCP.
Okay. So MCP is a protocol actually. So
which is provided to the agent and then agent will interact with everything.
So this is how the relation between LLM agent and MCP. So all LLMs comes under the generative AI. On top of that based on the limitations of LLMs agents have
been designed or developed and uh only with the agents we cannot achieve anything. So we should implement
achieve anything. So we should implement MCP. So there are multiple n number of
MCP. So there are multiple n number of MC MCPS are available in the market like we have a play rate MCP through which we can generate the playright automation code or automation script. We have a
selenium MCPS. We have a database
selenium MCPS. We have a database related MCPS. We have a ABA related
related MCPS. We have a ABA related MCPS. Different technologies are having
MCPS. Different technologies are having different kind of MCPS. So if you have such type of MCP we can work with that particular kind of technologies. For
example, if you want to work with the play rate automation, we need a playright MCP. Similar if you want to
playright MCP. Similar if you want to work with the selenium automation then we need a selenium MCP and suppose if you have a database designer or a database developer you want to access the database then you want to do certain
transactions or if you want to implement some database scripts then we need a database related MCPS. So in every area the different type of MCPS are developed which are currently available in the
market but it is ongoing process still there are so many MCPS coming into market. So this is the main thing. Okay.
market. So this is the main thing. Okay.
So LLMs are already available in the market. There are n number of LLMs are
market. There are n number of LLMs are there. We can we already know about
there. We can we already know about charges.
These are the popular LLMs. There are n number of LLM still there in the market and they are coming into market and agent and MCP. Okay. So this is relation
LLM, agent and MCP. So just understand LLM is basically can think and generate the new content. It cannot perform any action. Agent can perform the action. It
action. Agent can perform the action. It
can do the actual execution through browsers or database APIs everything will able to access but to perform such actions we again should provide certain
protocols or instructions through MCP until unless we have an MCP agent cannot work okay so that is all about so for example simple example I'll tell you so
agent and MCP suppose there is a person and if if you ask the person should go somewhere right that That is instruction actually but
until unless you set where he should go right if you if you don't tell the destination actual destination he won't go anywhere so that is the reason agent can do that agent can perform the
activity but MCP should provide the protocol to the agent and then only it will perform the action or execution on the real browsers or databases or APIs
or any other resources and LLMs cannot access our local resources like our databases our automation script Nothing will be accessed by LLM but agent will
able to access and MCP will able to provide the protocols to the agent and according it will perform the actions on the browsers. Okay. So this is a
the browsers. Okay. So this is a relation between LLM agent and MCP.
Okay. So everybody's clear so far. So
these are the three things we need to first understand then I'll show you practically how we can use LLM agent and then MCP.
Okay.
Now, so the next thing is I'll try to introduce. So we are not going to
introduce. So we are not going to directly work with this LLMs chart GBT Google because everybody knows about LLMs how we can use right simply every
day almost everyone uh using these LLMs on day-to-day basis for a different purposes. We already know about it. But
purposes. We already know about it. But
here the thing is how we can utilize them for our automation. Okay, how we can make our tasks faster through your automation. So let us see how we can do
automation. So let us see how we can do this. So before that we have something
this. So before that we have something called GitHub copilot. This is a very beautiful tool GitHub copilot.
So this is actually uh kind of LLM. This is also comes under the LLM GitHub copilot but especially designed for coders. So whoever is developing the code or whoever is
writing the automation test scripts right especially for those type of people the GitHub coal is GitHub copilot is got designed this is also a kind of a
framework okay so GitHub copilot is especially designed by GitHub itself and what exactly the GitHub copilot will do so whenever you start writing some
automation code right so before writing the entire code you can get the suggestions autom automatic suggestions by the GitHub copilot. So GitHub copilot
will provide you automatic suggestions when you're writing your code or when you're implementing some piece of code.
But from where this GitHub copilot will get the code automatic suggestions from the existing GitHub repositories. So in
the GitHub remote repository there are millions of repositories are created by millions of people. Right? So there are n number of repositories are there in our GitHub repositories. So what GitHub
copilot will do when I integrate this GitHub copilot in your automation or in your IDE whenever you start writing the code it will automatically suggest everything sometimes it will also
complete your code without writing the entire thing GitHub Collab will automatically give the suggestions and also it will automatically complete the code and sometimes if the code is having
some issues or some errors GitHub copilot will automatically rectify those errors. So that is also can be done by
errors. So that is also can be done by the GitHub copilot and also if I ask any query GitHub copilot will give the response because this is also part of
generative way. It is also an LLM. So
generative way. It is also an LLM. So
there are many uses are there. So is
this is especially designed for coders and again GitHub copilot is also internal use either charg so multiple LLMs sometimes we can use we
can choose actually in the GitHub co pilot it is supported multiple LLMs and we can use one of these LLM so GitHub copilot is a kind of a framework which
is implemented by taking help of LLM along with the GitHub repositories and especially designed for what designed for coders
means what? Developers or automation
means what? Developers or automation testers. Okay, designed for coders or
testers. Okay, designed for coders or automation testers. GitHub copilot is
automation testers. GitHub copilot is available. Okay, so now we'll see how we
available. Okay, so now we'll see how we can install GitHub copilot. And this
GitHub copilot supported almost in every IDE. We can install it with Visual
IDE. We can install it with Visual Studio Code. You can install with
Studio Code. You can install with PyCharm and uh all almost every kind of language, every technology supported nowadays. So, GitHub copilot is
nowadays. So, GitHub copilot is available for all kinds of ids, all kinds of languages.
Okay. So, everything is free. So, GitHub
copilot is totally open source. Okay.
So, we'll see how we can use this GitHub copilot along with our PyCharm. Okay.
There are multiple usages are there. So,
I will show you one by one. So, how we can use this GitHub copilot and how we can use it. So first of all let us see the installation part. How we can install GitHub copilot in your Pycharm
IDE. Okay. So let's go to PyCharm. This
IDE. Okay. So let's go to PyCharm. This
is our PyCharm. So to install GitHub copilot the first important thing is you need to have GitHub account. I hope
everybody is having GitHub account.
GitHub login. That is the first thing we need to have. And the second thing is uh yeah that is the only thing we need to have first. Okay. GitHub account is
have first. Okay. GitHub account is needed. So how we can install GitHub
needed. So how we can install GitHub copilot from IDE? Okay, simple. You need
to go to settings here. Go to file and go to settings and inside the settings you can see something called uh plugins available. Right here is a plugins.
available. Right here is a plugins.
Inside the plugins you can see marketplace. You need to go to
marketplace. You need to go to marketplace. So here you need to search
marketplace. So here you need to search for GitHub copilot. Simply say GitHub and you can say copilot.
So once you've searched for GitHub copilot here it will show you GitHub copilot option. So you just look at the
copilot option. So you just look at the icon. Okay. So there are many things you
icon. Okay. So there are many things you can see but this is the main icon you can see. You need to select this and or
can see. You need to select this and or you can see the install button like this because I already installed this copilot earlier. I'm not able to see the install
earlier. I'm not able to see the install button. But in your case first time when
button. But in your case first time when you installing this GitHub copilot you will see install button here. Okay. Just
click on install button. This plug-in
will be installed. And once the plug-in is got installed, it will ask you to restart your IDE. Then you have to restart your PyCharm. You need to restart your PyCharm. So that's the
first thing. So once you restart your uh
first thing. So once you restart your uh PyCharm, then your GitHub copilot is ready to use in your PyCharm. This is
one simple installation. Okay. And not
only installation, you have to enable this. You have to enable this. I'll show
this. You have to enable this. I'll show
you. So once you have installed this GitHub copilot, it will restart your PyCharm ID. So once your PyCharm ID is
PyCharm ID. So once your PyCharm ID is re uh restarted then again one more time go to settings and here under the tools
under the tools uh you can see copilot option here GitHub copilot option here.
So inside this GitHub copilot option there are multiple options you can see here. Okay. So if you are able to see
here. Okay. So if you are able to see this go GitHub copilot that means you have already installed this GitHub copilot plug-in. Okay. This is the step
copilot plug-in. Okay. This is the step number one. So once you have installed
number one. So once you have installed GitHub copilot then the next thing is what we need to connect. So you will able to see one icon in the uh right
side in the bottom section. You can see currently this is not signed. So if I click on here you will see these options.
Okay. First time. So when you open the GitHub copilot in PyCharm IDE you will see these options. So now what we need to do next step once we have installed
plug-in we need to log into the GitHub with your account. So whatever GitHub account you already have with that account we should log into the GitHub because GitHub copilot works based on
the GitHub repositories. So even though it is getting the code from any number of repositories but you need to authenticate with your GitHub repository account. Okay. So once you install this
account. Okay. So once you install this GitHub copilot plugin then you'll get this small icon here and then you need to just click on log to GitHub. So once
you click on this login to GitHub it will show you the device code. Okay. So
once you copy this just copy this device code. Once you copy this click on copy
code. Once you copy this click on copy and open and then it will automatically open your GitHub account. So, GitHub URL. It will
GitHub account. So, GitHub URL. It will
navigate to the GitHub URL. So, whatever
account you already have, you need to sign in with this account. Sign in. And
this is account I'm using. And if you have another GitHub account, you need to use a different account. So, simply
click on continue. And then whatever code you copied in the previous step, just you need to copy this code. Click
on continue. So, once you have done it, now it will show you something. Full
control of private repositories. Update
GitHub action workflows. By default,
both the options will be selected and just click on authorize GitHub.
It will show you something. This
authorization were requested from so and so place and so and so date. Make sure
you trust this device as it will get access to your account. So once you get this, you simply say authorize GitHub.
So once you click on authorize GitHub, then it will be authorized. So let me share a small document because I already done this multiple times. You can see this. This is the screen just now have
this. This is the screen just now have seen. Okay. So just click on continue
seen. Okay. So just click on continue and then it will show you the code and then once you authorized right. So you
will see this one authorize GitHub copilot ID plug-in. So simply click on authorize GitHub. So once you have done
authorize GitHub. So once you have done it will ask you the password and simply simply say confirm. So once you have confirmed then you'll get a congratulations message. So this is how
congratulations message. So this is how we can simply log into your GitHub repository. So after that you will able
repository. So after that you will able to see all the other options in this icon. So I'll show you quickly now.
icon. So I'll show you quickly now.
Yeah. So it is enabled my button. So I'm
just clicking authorize GitHub. So once
you click on this button, it will ask you uh about my GitHub password. So let
me provide my password.
Okay. So I'm just providing my GitHub password.
So once you provide it, click on continue or confirm. Now congratulations
you have set. So once you come back to the your IDE and it is giving some the login to GitHub failed reason. Okay, it
is giving some error. Let me just close it and because it is open lately. So that's
the reason it's giving some error unknown error. So let's try one more
unknown error. So let's try one more time. And I'm just closing once again.
time. And I'm just closing once again.
And if you're facing some issues at the time of login, just retry once again.
Okay. So I'm just again trying to login.
So log to GitHub and again copy this code and copy and open.
Okay. So just simply say continue.
Copy this code. Again click on continue and click on authorize GitHub.
Congratulations. So once it is done again you need to go back and it is taking few seconds. Now you can see successfully logged into GitHub for GitHub copilot. So you should see this
GitHub copilot. So you should see this message. So once you are able to log
message. So once you are able to log into the GitHub now we can see green color tick mark and if you open this icon you will see some options here. You
can see open chart edit settings. There
are many settings view kota usage there are many settings are there. Okay. So
this is the second step. First we have to install GitHub copilot plug-in through uh settings and this plug-in option and the second thing is once you get an icon
you need to log into the GitHub with your own account. Okay, these are the two things we need to do. So once you successfully log in now your GitHub
account is ready. Your copilot is ready to use. Your copilot is ready to use. So
to use. Your copilot is ready to use. So
if you want to check the settings once again you can just go to the file and go to the settings and you can see the GitHub copilot this option you can see
right so these are all the options you are able to see here so now once we have installed GitHub copilot now let us see how we can use in our automation so what
we can achieve with this GitHub copilot so I will provide the documentation also so step-by-step documentation so you will able to install this very simply
So once we install GitHub copilot, so the next thing is how we can use GitHub copilot. So there are multiple uses we
copilot. So there are multiple uses we have. So we can use it for code
have. So we can use it for code completion. We can ask question and
completion. We can ask question and answers in the form of comments. And
suppose if you already have some piece of code, so you have not understood that part code. So then you can ask copilot
part code. So then you can ask copilot to explain that part code and sometimes you want to simplify the code or you want to refactor the code. So we can also simplify the code and also it is
provided the chart window whatever you want you can ask and we can generate the documentation and we can put the window chart window wherever you want. So
currently this chart window is provided here right suppose if I open the chat box here currently the chat box is based here it is displayed but if you want to move this chart box wherever you want you can move it. So I can just click on
this option three dots and you can see this view mode and uh here you can see something called window. I click on this window. Now the chart box you can put
window. Now the chart box you can put wherever you want. Okay. And again if you want to pin it you can just go with view window view mode and then simply
say doc pinned can use this option. So
this is how we can open the chart box from this GitHub. So now let us see how we can use this uh GitHub copilot in the different ways. So we can use code
different ways. So we can use code completion question answers in the form of comments we can provide. we can ask to explain the code. We can simplify this and many more things we can do.
I'll show you one by one. I'll
demonstrate. Look at this carefully.
Okay. So the first thing code completion. So what is code completion
completion. So what is code completion feature?
So I will also write here. Okay. So the
features of GitHub copilot.
So, GitHub copilot.
So, the first feature is code completion.
Okay, GitHub code pilot you can use for code completion. So, what is code
code completion. So, what is code completion? I'll show you. So, let me
completion? I'll show you. So, let me just create a new directory for grace class. I say a testing. Okay. So, we
class. I say a testing. Okay. So, we
already enabled GitHub copilot and we already connected to GitHub repository through copilot which is available. Now
what we can do simply create a new Python file. I call it something test
Python file. I call it something test copilot demo. Okay. I'm just simple
demo. Okay. I'm just simple giving a simple file copilot demo. Okay.
So what is code completion? So whenever
you start writing the code, it will automatically provide the code automatically. So for example, let's say
automatically. So for example, let's say I just want to write a playright test. I
want to write a playright test. So what
you will do initially we will import required package right? So see how the code completion works. So I'm just trying to import something you can say from
from playrite dot the sync API from that I'm trying to import
something called playright and something so let it be there. Okay now I'm starting simple writing a code. Now we
can see this as soon as you start writing simple keyword it is automatically suggesting I'm writing simple play rate code play rate test so def let's say test
login see this this is the beauty as soon as I just type test login it is automatically identify what I'm going to write and it is pull entire code from some gith
repositories and it is giving some auto suggestions look at this all this code is automatically provided by copilot But sometimes it is relevant or
sometimes it may not be relevant. If it
is relevant, you can simply put tab and the code is automatically available. And
if it is not relevant, you can just continue typing something. But for now, I don't I I don't have any relevant for this. Suppose let me remove this. I'm
this. Suppose let me remove this. I'm
not this content is not relevant for me.
So what I'm going to do is I'm just continue to do some piece of code. Let's
say test login. Here I'm going to create a page picture for example page should come from the page.
Now we need to import this. Now you can see as soon as you enter it is started giving all the examples. Now I'll import this page.
See as soon as you type enter here it is automatically giving a code suggestions. This is
called code completion. Okay. Simply you
can if you want to have this piece of code you can simply put tab or if you don't want you can just continue to this for example I don't want this code still continue to type so I'm saying page dot
go to and here whatever URL you want you can just simply provide the URL here simply I can say https
https from each and every step it will be very very helpful ww google.com so I just type one statement Now after that
enter. So again it is giving assertion
enter. So again it is giving assertion suggestion also. Suppose I want to have
suggestion also. Suppose I want to have this statement. Simply say tab. Now
this statement. Simply say tab. Now
another step is suggesting. What is
suggesting? It is searching for some search box and it is typing some playright. Okay. Now I want to have this
playright. Okay. Now I want to have this step. Again click on the tab. Simply
step. Again click on the tab. Simply
entering another one page. Press. It is
pressing an enter key. Now again I want to have this. Press enter. So if you want to have that piece of code, you can have it by pressing enter. And if you do not if you do not want to have it, you
can simply continue to type.
Okay. So this is how it will automatically suggest it will automatically identify what you are going to type based upon the previous knowledge. So
because in the repository there is millions of millions of code is already available. So based on that content it
available. So based on that content it is guessing what exactly you're going to write and accordingly it will start giving the suggestions. So this is
basically called code completion. The
feature of code completion from g uh github copilot.
So if it is giving you different suggestions then you can reask again. So
you can also provide the comment. I will
show you that. Okay. So this is code completion future. So code completion
completion future. So code completion feature means what? You can simply start typing accordingly. It will give the
typing accordingly. It will give the suggestions. If you want to have the
suggestions. If you want to have the suggestion, press tab key. And if you do not want to have the suggestion, you can just continue with that. Type continue
this. Okay. So this is simply where we can use copilot for code completion.
Okay. So similarly suppose you have written something here, right? Suppose I have written some piece
right? Suppose I have written some piece of code just two lines of code I have written.
Suppose I want to ask like suppose what exactly this code is doing right suppose if I not understood something okay let me just copy some piece of code from our
previous examples okay so let me yeah so get this piece of code I'm just for sample I'm just taking this
code okay and let me import this okay so this is a piece of code I have written in my code. So now I want to understand this code because I don't
know about this code. I just want to ask what exactly it is. So then what we can do is we can just select this code or suppose if you not understood a specific
line from this code. Okay. Then what you can do whichever line you have not understood you can select that line or if you not understood the entire code you can select the entire code and
simply right click here and you can just go here GitHub copilot. Here there are multiple options. You can see explain
multiple options. You can see explain this. You can see this option here and
this. You can see this option here and also you can see this option in the icon also. You can just open this icon and
also. You can just open this icon and open the chart and here you should able to see the options.
Okay. So it is not visible here and you can just directly right click on this code and right click and you can go here GitHub copilot and explain this. So once
you select this option it will explain the entire code whatever you have written. See each and every step it is
written. See each and every step it is clearly explained in this. So what
exactly we're doing in this step and what we are doing in this what we are doing in this. So each step is clearly explained here.
Okay. And this is one feature explaining this. Another feature suppose uh if
this. Another feature suppose uh if there is any uh issue or error in this particular code, we can easily fix it.
Suppose here uh I'm getting my URL equal to page URL. Page dot URL. I put bracket here. I put bracket here. And uh let us
here. I put bracket here. And uh let us see whether it is working or not. Let me
just run it first.
I just ran my code. So by default it is running on headed headers mode. So now
it is got failed because I put this uh bracket. Okay. So because of that the
bracket. Okay. So because of that the string object. So because of this the
string object. So because of this the test is got failed. So now I want to fix this through GitHub copilot. So how we can fix this? You can simply select the code or if you select the specific line
also if you already aware of where exactly the error comes you can select the particular line or you can select the entire code and again right click go to GitHub copilot and simply say fix
this. So once you fix this it is trying
this. So once you fix this it is trying to identify where exactly the errors are there and it is trying to fix it. Now
you can see it is it found the error here and it is rectified here and this is the final code which is given. So if
you want to have this code here or you can manually modify this by seeing this rectification or you can directly have this code copied into your main window.
You can do that. So for example here this is enter code newly generated right. So you can see one option here
right. So you can see one option here copy code block or the second option is also the insert code block at cursor. So
one is for copying this enter code. Once
you copy we need to paste it over here.
Other option is we have something called insert code block at cursor. So wherever
you put cursor, this entire code will be inserted. So for example, I want to
inserted. So for example, I want to insert this code here. Wherever my
cursor is waiting. Simply click on this insert code block at cursor. This code
will be automatically inserted. So the
other code can simply remove this.
Okay. So we can do like this. So this is how we can also fix the code. Wherever
the issue is there, we can simply fix the code. So for example, let's say I'm
the code. So for example, let's say I'm just removing the bracket here. I remove
the bracket here. Copilot itself is suggesting here. When you just say my
suggesting here. When you just say my URL, the bracket is suggesting by copilot. Suppose if you forgot to put
copilot. Suppose if you forgot to put somewhere and then again one more time you can ask to fix it. You can just select the code, right click GitHub copilot
and simply say fix this.
Okay. Now you can see it is successfully fixed. And again you want this code
fixed. And again you want this code simply click on this insert code block at cursor and the new code is got inserted here and remove this existing one.
Okay.
So this is how we can see. So control
alt and everything will be properly aligned. So these are the few uh
aligned. So these are the few uh important features which we have for copilot. And I'll show you few more
copilot. And I'll show you few more features and let me just minimize it now.
So what is another feature? Suppose you
can also ask anything through comments.
Okay. So for example, let's say I have not uh written this. Okay. Now I have just opened my page but I don't know how to capture the URL of the page. Let us say
I don't know how to capture the URL of the page. So then you can ask copilot.
the page. So then you can ask copilot.
How we can ask? Put comment.
Okay. And here you can ask how you can ask you can put Q or question because it will understand better. Okay. So here
you can ask see it is automatically giving the session get the URL of the application. So you can simply write get
application. So you can simply write get the URL of the application.
This is also auto completion. So as soon as you put the comment and enter see this it is giving the statement. So as
soon as you put enter it is giving. And
if you want to have that statement, you can simply put tab and keep with the statement. So sometimes when you're
statement. So sometimes when you're writing the code also if you forgot or if you don't know how we can extract the URL or anything it can be anything if you if you're not able to proceed
further struck somewhere then accordingly you can provide a proper prompt in the form of comment and it will suggest you okay then if you want to have the
session keep it in your code by pressing tab key and if you do not want again you can ask suppose if you do not like this again one more time you can ask. So
that's how we can use copilot.
Okay. So it will fix the logical errors also. It will fix the syntax errors as
also. It will fix the syntax errors as well as logical errors. But the only main thing is you need to provide the proper prompt. So you can also provide
proper prompt. So you can also provide the prompt. So for example let's say you
the prompt. So for example let's say you select the code. Okay. And I can just open the copilot here. There is a open chat window. And in this window also you
chat window. And in this window also you can provide the prompt. So whatever you want to get the details or information if you want to fix it or if you want to refactor it simplify this anything you
can ask by providing the prompt in this chat box. So we no need to go to
chat box. So we no need to go to external tool like charg or gemini we no need to go and login there. So directly
with which is a built-in tool copilot is built-in tool which is available for every ID. So without going to the
every ID. So without going to the another window without going for chargit or any external LLMs we can directly use this copilot inside the ID itself. So
whatever you want to have you whatever you want to know about this code so you can simply provide the prompt here and it will give the details about this. It
can also fix all issues errors, syntax errors, logical errors, anything it will automatically fix. Okay, this is about
automatically fix. Okay, this is about copilot.
Okay, and one more thing so you need to understand one limitation of this. So
what is this copilot is able to do here.
It is giving the code autocomp completion means it is generating it and it is trying to fix the issues. It is
trying to simplify this. Suppose I just want to make more simplify this code.
Then simply select it, right click GitHub copilot and simply say simplify this and it will give you more simplified code just three lines of code which is given. Instead of writing four
lines, three lines you can simply insert. Now I can change within three
insert. Now I can change within three lines everything is done. So instead of writing a separate line for page URL it is put inside one single line. So
anything any code like you have a thousand lines of code 100 lines of code doesn't matter just select the code you can fix it the whatever errors you have it can be syntax errors or logical
errors or if you want to simplify this you can simplify this by using copilot.
So this is how we can use it. So you
need to understand the limitation of this. We are able to generate something
this. We are able to generate something new. We are able to fix the existing
new. We are able to fix the existing issues but we are not able to execute.
So our c-ilot cannot execute this code.
Our c-ilot will able to generate the code. Our c-ilot will able to fix the
code. Our c-ilot will able to fix the code. It can give the auto suggestions
code. It can give the auto suggestions completion everything but it cannot run this code at the real browsers. Why?
Because the co-pilot is not aware of our browsers. Copilot is not aware of our
browsers. Copilot is not aware of our databases or any resources. So that is a limitation of this LLMs or c-ilot. Even
copilot also internally using LLMs. If I look at here, these are the different LLMs configured along with the copilot itself.
Okay, copilot is just a wrapper or a tool which is developed by on top of LLM. So these are current LLMs which is
LLM. So these are current LLMs which is supported in this copilot. So what is the limitation of this LLM or copilot is it cannot execute it can just generate
the new content. It can fix whatever issues we have in the code or it can refactor your code. It can simplify your code and it can ask whatever you want by
just putting some comment here. Okay,
that's it. So that will automatically do. So even debugging you don't need to
do. So even debugging you don't need to do anything manually. So it will automatically go through everything and it will debug. Again the debugging is part of execution, right? That is also
limitation in copilot. So that we will able to achieve with MCP that I will come to that. Okay. So debugging and execution this is part of execution action. So that we cannot do through
action. So that we cannot do through copilot but c-allet will try to fix the issues with the existing code whatever we have written here and copilot will refactor the code. Copilot will simplify
the code but copilot cannot debug it.
Debugging is different. Fixing the
issues is different. Okay. If you have a syntax error logical error which will able to fix it. So debugging in the sense we need to interact with multiple files. Okay. Maybe here this is a file
files. Okay. Maybe here this is a file doesn't have any dependency on any other file but sometimes this is depending on some other file right so there is a
dependency so debugging and execution these are all part of action execution so that is taken care by MCP okay so I
hope everybody's understood about GitHub copilot so GitHub copilot once you have enabled once you connected to GitHub repository you will able to use all the feature from GitHub copilot And if you
do not want to use GitHub copilot, simply log out from here. If you log out from GitHub copilot, it won't give any suggestions.
Okay, it will still chart window is enabled. But you won't use it for your
enabled. But you won't use it for your coding purpose.
Okay, so simply uh you can use like this.
So just by writing comment also it will able to understand and it will show you everything.
So that's how we can use GitHub copilot.
So now we will go to next step. So so
far we have seen how to use GitHub copilot. The next thing is what is the
copilot. The next thing is what is the limitation of LLM? We are not able to execute. We are not able to run. We are
execute. We are not able to run. We are
not able to debug. Right? So now MCP come into picture. So we need to additionally integrate MCP along with
this ID. MCP along with this ID model
this ID. MCP along with this ID model context protocol.
As I said what is MCP? MCP is a kind of a framework which will provide the protocols to the agent which will provide the protocols to the agent. So
if I look at the copilot here and open the chat box here they already provided one option called agent. So whenever we are working with MCP instead of ask we
have to select agent here. Agent should
be there LLM should be selected then only MCP will start working. Okay. Now
we will go to next step. So how we can integrate PyCharm IDE copilot plus MCP. So all
three things should be there in one place. So then we will able to achieve
place. So then we will able to achieve we can do magic. Let me show you how we can install MCP server especially playright MCP server. So as I said there are multiple MC MCPS are available in
the market for different kind of technology. Suppose if you want to work
technology. Suppose if you want to work with the purely databases then you have to install the different type of MCPS.
Then if you want to work with selenium there is another type of MCP. For play
rate there is another type of MCPS available.
Okay. Anybody can develop their own MCPS nowadays. So Microsoft playrate is
nowadays. So Microsoft playrate is provided their own MCP for accessing playrate. But nowadays people are
playrate. But nowadays people are developing their own MCPS according to their requirement. But they are not more
their requirement. But they are not more secure. They are not authenticated. But
secure. They are not authenticated. But
the play rate MCP is more authenticated because it is provided from play rate itself Microsoft as a back end. So we
can 100% there is an assurance we can still use it for our automation. Okay.
Now let us go to the next level how we can use Pycharm IDE GitHub copilot along with playrite MCP. So first we need to
go with a few installation and I'll show you step-by-step process.
Okay. So now we'll see how we can integrate MCP along with the GitHub copilot and PyCharm. And with this combination we will try to generate our
test cases along with execution. So by
using copilad we are able to generate the test cases but we are not able to execute. But now we are integrating MCP
execute. But now we are integrating MCP also. So once we have installed or
also. So once we have installed or integrated with MCP we can generate web test cases or UI test cases even API test cases also we can generate automatically
and just we need to provide the manual test case. So the steps simple in
test case. So the steps simple in English language and our MCP will automatically generate the test cases by taking help from LLM and agent and not only generating the test cases it will
automatically execute the test cases and at the time of execution if there are any issues it will automatically fix those issues also.
Okay. So that is called as autohealing mechanism. So autohealing mechanism is
mechanism. So autohealing mechanism is in the sense what it will automatically heal the automation code. So there
exactly debugging come into picture. We
don't need to debug anything manually.
So automatically our MCP will automatically debug by applying autofilling mechanisms. And this process is basically called wipe coding. So by taking help of MCP we
wipe coding. So by taking help of MCP we are able to generate the automation scripts which is called as wipe coding and we are able to run the tests and automatically fix the issues which is
called autohealing feature. So these are all part of MCPS.
Okay. So let us see it will automatically identify all the elements on the web page everything because MCP will able to interact with the browser interact with the elements it will
access the DOM also all types of locators it will able to capture it okay I will show you the magic now so let us see how we can enhance this so what are the prerequisite we already have Python
so we need to install Python if you don't have and PyCharm ID we already have it and gith GitHub account also we have it and if you already installed copilate we need to log into the GitHub
and additionally we need NodeJS guys because playrate MCP we can install only through NodeJS okay so playright MCP we can install only through NodeJS so
NodeJS is basically a software which we need to install which we need to install otherwise we cannot use playright MCP okay so to install NodeJS that's a
prerequisite I'll guide you step by step you need to just download the software go to this location download this software playrate uh MSI file and if you are working on Mac you will see DMG
file. So once you downloaded just go to
file. So once you downloaded just go to the steps installation next next and your NodeJS will be executed. So once
the NodeJS will be uh installed the finally you need to just configure the path in Windows like you need to go to system properties go to path and here just you need to add NodeJS location
like program files NodeJS this is a default location and after that you can verify the version which is NodeJS properly installed or not. So you can just go to command prompt and this is a
prerequisite to work with the play rate MCP especially. So go to the command
MCP especially. So go to the command prompt and then you need to execute this command. I already installed let me show
command. I already installed let me show you node - version. So once you execute it now you
version. So once you execute it now you can see the version. Similarly npm node package manager will automatically comes along with the NodeJS because that is needed actually to install all other
packages on top of NodeJS like we have a Python and pip right. So once you install Python you will get a pip using pip you can install all other plugins.
Similarly, if you install node, you will get npm. Through this npm, we can
get npm. Through this npm, we can install other plugins. So, this is a prerequisite to work with the playright MCP especially because playright MCP is
developed based on NodeJS itself. So,
these are the prerequisites. Okay. So,
yeah, Python, NodeJS should be installed. ID we already have and GitHub
installed. ID we already have and GitHub account with a copilot. So, copilot we have to install. So, install and configure GitHub copilot in PyCharm. So
we already given this document just now we already completed this step. So we
need to go to file and settings and then we need to install GitHub copilot. So we
already done this step earlier and we need to log into the GitHub copilot through ID. So we already done all these
through ID. So we already done all these steps. Okay, you don't need to repeat
steps. Okay, you don't need to repeat again. So once you have done this GitHub
again. So once you have done this GitHub copilot PyCharm then this is the new step. We need to additionally add MCP
step. We need to additionally add MCP server and we need to enable it. So to
install this MCP server what you need to do is we need to just minimizing this copilot. Copilot should be there still.
copilot. Copilot should be there still.
Okay. And what we need to do we need to go to file settings again and go to the same plug-in section here.
So to install copilot also we have done in the same place. Now go to the marketplace and search for MCP
and you can see MCP server. So this is a plug-in. You can look at the icon. Okay,
plug-in. You can look at the icon. Okay,
there are multiple things are there. You
need to correctly install MCP server.
You need to install this because I already installed. So it is just giving
already installed. So it is just giving a check box here. So you can see the button like this install. You just click on install. Once you install this MCP
on install. Once you install this MCP server, it will ask you to restart your PyCharm IDE. So once it is restarted,
PyCharm IDE. So once it is restarted, then your GitHub copilot is ready along with GitHub account login and MCP server is also ready. So once you have
installed MCP server once you restart your PyCharm ID every both of them you can see here. So you can just go to the tools menu. So here you can see MCP
tools menu. So here you can see MCP server. So you can see this copilot we
server. So you can see this copilot we already installed. Second thing is MCP
already installed. Second thing is MCP server. So just now we have installed.
server. So just now we have installed.
So these are the two components you should able to see under the tools and both the components we have to install only through plugins only. Here you can see the plugins plugins and the
marketplace. Okay. So the first thing is
marketplace. Okay. So the first thing is we need to install this MCP server. So
copilot is ready. MCP is ready. Now we
need to combine them because copilot is a different component. MCP server is a different component. So now we need to
different component. So now we need to interact with this. Right? Our copilot
should interact with the MCP server. So
both are two independent plugins. So now
we need to integrate them. So to
integrate them so we need to first go to file settings tools MPC MC MCP server.
We need to enable MCP server. So how we can do this? Again go to same go to the file and again go to the settings and
here go to MCP server under the tools.
Go to the tools and here you can see MCP server. Here
you can see small check box enable MCP server. You just select this box and it will give you some kind of warning enable MCP server. Simply click
on enable. As soon as you enable it, it will show you few things here. You can
just ignore all these things. You don't
need to do anything with this. Simply
enable this. That's it. I say apply.
Okay, this is the one thing you need to do. And uh once MCP server is done and
do. And uh once MCP server is done and the next thing what we need to do is once it is enabled now again we need to go back to the model context protocol.
Go back to the model context protocol where it is sorry GitHub protocol. Uh
this is MCP server we already configured.
[clears throat] So there is something called there is one more thing I think in this GitHub copilot. Yeah
here you can see under GitHub copilot there is model context protocol. There
is one more MCP can see because we have just enabled here. So once you enable this MCP server then under GitHub copilot you can see this option model context protocol. So here what we need
context protocol. So here what we need to do is here we need to just click on this configure right. So in this by default you will
right. So in this by default you will see some piece of code automated code you should remove that part and place this one. So this is a code which is
this one. So this is a code which is provided by playright MCP itself. So
because if I just go to search for playright MCP okay just type playrite MCP and they provided their official document how to install this playright
MCP. We scroll down they have given this
MCP. We scroll down they have given this piece of code. This is the configuration code which we have to paste in the JSON file. So you need to just copy this code
file. So you need to just copy this code inside this MCP.json. So when you will get this file when you go to the file settings and when you go to the GitHub
copilot and model context protocol once you click on this configure here automatically MCP.json JSON file will be
automatically MCP.json JSON file will be open and in this file by default some piece of code will be displayed. You
have to remove that code and paste this is new code. Okay. So this partular code will be actually install the MCP client
MCP client to run the playright. Okay.
And this will actually having all playrate commands internally because how MCP will interact with the browsers? MCP
should know all the commands all the playright commands. So to know those
playright commands. So to know those commands we have to install this MCP client through this JSON so that MCP is aware of all play rate commands. So once
we have done it done so all our setup is done. So we can just simply close it. So
done. So we can just simply close it. So
now we have done installation. We have
done installation for copilot and we have installation for MCP. So everything
is done. So I put all the nodes here.
You can do step by step very carefully.
So first we have to install GitHub copilot and then we have to install MCP server from the marketplace and then we have to
enable this MCP server. After enabling
MCP server like this and then again we need to integrate MCP server with the copilot. So for that again we need to go
copilot. So for that again we need to go to tools and GitHub copilot model contest protocol. Click on this
contest protocol. Click on this configure and here there is one more option called allowed models that is optional actually. If I just go back to
optional actually. If I just go back to settings here, we already configured this piece of code, right? So apart from this, if you go to uh model config here
and here, allowed models. So currently
these are the models. Whatever models
LLM models you have selected, same models will be displayed in the copilot.
And if you do not want any other model, you can simply uncheck it. All models,
whichever model you want, you can use it. This is one more thing that is
it. This is one more thing that is optional actually. So here we can
optional actually. So here we can integrate MCP server with the copilot and once you configure the done. So once
you click on okay and this is the MCP.json file where you need to copy
MCP.json file where you need to copy this code and after doing all the things we need to restart our PyCharm ID once otherwise all these changes we won't be
affected. Okay. So let me restart my
affected. Okay. So let me restart my PyCharm ID. So let me close this exit
PyCharm ID. So let me close this exit and I'm just trying to restart.
Just wait for a few seconds. This is a play rate MCP documentation official documentation they have provided. So
play uh play rate MCP is know all the commands because as soon as you have installed with this JSON uh it is known all the commands all play rate commands.
So as of now this play rate MCP supported all these LLMs like cloud cursor goose and uh VS code all this the some of them are editor some of them are
LLMs current it is supported okay so it is still yeah now I have just launched my Pycharm MCP after installation of everything
okay so now we are ready to use MCP so now you will see real logic how MCP is able to generate our test cases based upon our prompt and how it is able to
execute our test cases how it is able to fix the issues everything I will show you practically now so now what we need to do is I will show you first how to generate the web UI test case okay I'll
also show you API test case now here I have designed one prompt see this this is a exact prompt you can modify according to your test case so but you can look at this what is the prompt I'm
giving generate and execute a playright test using pi test and playrate MCP.
So what I'm asking here generate and execute generate and execute both I have mentioned here and play rate test using
pi test and play rate mcp and this is my test scenario or test steps. So what I'm doing here just launch this URL search for t-shirts in the search box. I'm not
providing any locators nothing. It will
automatically find everything and then I'm verifying that butler t-shirts have been selected. This part title should be
been selected. This part title should be displayed in the search eraser. Simply
I'm giving three steps. You can try with multiple steps. And also I'm providing
multiple steps. And also I'm providing implementation requirements. What are
implementation requirements. What are those requirements? use pyest style
those requirements? use pyest style structure because pyest is having a separate kind of a structure to write the test cases like every test should start with the test underscore the function should start with the test
underscore so that's the reason I'm saying functions starting with the test underscore you have to clearly provide the prompt otherwise it won't be
generated properly then what I'm asking execute each step interactively through playright MCP tools at the time of generating the steps
It will ask you to interact. Okay. Do
you want to continue with this or not?
Then once all steps are succeeded, generate and save the file uh final test under scripts final test script as AI/
search product py. What I'm asking here once the test case is got generated once it is successfully executed then save the test case with this name under
AI folder. So here I already created one
AI folder. So here I already created one folder called AI testing or you can change it AI testing or AI folder wherever. So I'm trying to change it for
wherever. So I'm trying to change it for example let's say AI testing folder. So
whatever the tests have created, generated and executed, stored that part test inside this AA testing folder which I already created here. And what else?
Run the saved test automatically in headed mode.
That is up to you. Okay, if you don't want to use headed mode, you can also run headless mode. So I'm just specifically want to show you this.
That's the reason I'm specifically providing this instructions. Run the
saved test automatically in headed mode.
Browser should be visible. Okay. In any
step, if any step or assertion got failed, for example, at the runtime, identify and fix the issue, then rerun until the test passes. So, rerun also
should automatically taken care by MCP server. So, this part step will
server. So, this part step will automatically taking care of debugging, fixing the issues and rerun the tests.
So, we don't need any manual intervention here. So we need to
intervention here. So we need to properly provide the requirements and what expected output you want. A fully
working playright pyest test script and the test script should automate the complete flow described above and successfully validate the product name
in the results. This is a complete prompt. So accordingly you need to
prompt. So accordingly you need to design this and test case to test case little bit different but only steps will be changed but according to play rate python you no need to change the rest of
the structure because these step steps are almost same for all the test cases and later I will also show you how we can generate a test by using page object class page object model okay that is
also there so for now let's create test case let's try to generate the test case let us let it execute it and also After execution, it will also save the test
case inside the AA testing folder.
That's what I'm asking to MCP. Now, what
you need to do, simply copy this prompt.
Now, you see the magic here. Just copy
this prompt. Go back to your PyCharm IDE and open your GitHub. Open your G copilot. GitHub copilot. Open the chart.
copilot. GitHub copilot. Open the chart.
And here in this chart box, you have to select the agent. Okay? You have to select the agent and here whichever LLM you want you can select. So I'm trying
to use this GPT 4.1 which is latest and then whatever the prompt you have simply copy this prompt here.
Just a moment.
So I'm not able to copy directly from here. So I will put this inside the
here. So I will put this inside the notepad.
Okay. So now let us copy this paste it over here. So everything should be in the text format. Suppose if you have any file right this entire thing this entire prompt is saved in some text
file or some other you can attach that file directly. In that case you don't
file directly. In that case you don't need to write anything here. So whatever
is there in the attached file that will be executed by MCP. Now see the beauty you have to focus very carefully how it is going to do it. So I just providing
the prompt and simply say send just I have sent a prompt. Now see the beauty it is trying to understand.
It is trying to do everything and capturing everything. So you can see rand create file tool something is getting some warning. Let it be there.
It will automatically fix. Now you can see the beauty. It is automatically generating the code and also you can see we need to accept. Sometimes it will give you some notification. We need to accept then it will proceed.
Okay. Now it is asking to run your command. Test is got generated but it is
command. Test is got generated but it is asking us to run this. Simply say
continue.
Now it is started executing our test.
Collected one item. Now you can see it is opening the browser running the test.
So within seconds of time the test is got generated and execution is also completed successfully passed. And what
we have asked after successful completion save the file in aa testing folder you can see that search product.
So this is the file name which we have given in the prompt. So it is got generated file name. So this is a test which is got created. So again if you want to do some modifications in this
test we can simply do it. Okay. Now let
us try to use some other llm and see how it is going to generate. So what I will do it I can simply close this. I delete
this for now. I'm deleting the file.
Okay. Now let us give the same prompt one more time. So generate and execute play rate test using pi test and play mcp. Okay. Ex everything is same. Now
mcp. Okay. Ex everything is same. Now
I'm just copying the same thing. One
more time I'm providing but this time I'm trying to take another llm. So
whichever you want you can take. So
let's say GPT5 mini I'm taking. Let's
see now. and simply send. I think the previous one is still running actually.
So run the command in terminal edited mode. So we have still not completed
mode. So we have still not completed actually. Let me cancel this. Okay. Now
actually. Let me cancel this. Okay. Now
again everything we are starting from new.
Okay. So done.
Yeah. Now I'm giving the prompt one more time. Run it.
time. Run it.
If there is an error, it will automatically fix it and rerun it also.
So let it complete first.
Okay, it is working.
So, it is doing all the activities and in between it will ask you your permission also. Do you want to continue
permission also. Do you want to continue or not? Because that is also we provided
or not? Because that is also we provided in the prompt. So, it is generating the test. See depending on the network speed
test. See depending on the network speed it depends okay how faster it is.
Sometimes it will go very fast. Now you
can see how much time we will take to write this entire piece of code.
Lot of time right. So it is simply generated. So just accept and still it
generated. So just accept and still it is not completed. So it is asking run command internals. So what is this
command internals. So what is this command headed mode it is basically running the test. So simply click on continue. So it is started running the
continue. So it is started running the test.
See again it is open the browser.
past. Suppose if it is a failed, what will happen? We already provided the
will happen? We already provided the prompt here, right? So if any step or assertion fails, identify fix the issue, then rerun until the test passes because we already provided this instruction. If
anything is got failed at the time of generating the test. Sometimes there
will be some duplicate locators at the time test will fail first time. Even
though that is generated by MCP, test will fail. In that case, what it will
will fail. In that case, what it will do? It will automatically identify the
do? It will automatically identify the fix and then fix that issue and then it automatically rerun it. So we no need to rerun the test. So till the test passes
it will keep rerunning and keep doing some changes till the test is passes because of this prompt it will automatically take care of it. So once
it is done the new file is got automatically generated here and after that if you want to do some slight modification suppose if you want to convert this in
our own pyest style little bit this is also pyest format but it is giving a function format. So normally what you
function format. So normally what you will do you will pass a play playright fixture right here say playright fixture you will pass like this right. So we need to import this
this right. So we need to import this playright import this from sync API playright. So
like this and then you can just remove this part and this particular playright you can use install P. Now if you want to align this you can again simply right click
select this and right click and anyway we have a GitHub copilot everything right. So we can simply simplify this.
right. So we can simply simplify this.
Click on simplify this. It will make more simplify this code.
Clean up and refactor the code and simply can say again insert code block.
That's it.
And then close this or else you can simply select Ctrl Alt L. Everything is aligned.
L. Everything is aligned.
So this is how we can simply use GitHub copilot.
So are we doing any coding here? Simple.
We are not doing any coding. We are just frame the prompt properly. We have to just provide the instructions carefully.
Automatically the test is generated.
Execution is also happened. If there are any issues, it will automatically return. But currently we don't have any
return. But currently we don't have any issues in the code. But sometimes even MCPS also generate this code uh by mistake some taking incorrect kind of locators at the time test will fail and
automatically fix it one more time. Keep
on running until it passes. So this is the beauty of using MCP.
Okay. Now I'll show you one more example. This time we will generate the
example. This time we will generate the test case using page object class. But
as of now we are not using any page object class here. Right? So we will try to create a page object class and then create the test. Even page object class also created by MCP itself. So let me do
that. So let me give another prompt. So
that. So let me give another prompt. So
we already done this. Next one I'll show you.
same uh this time I will give you a different prompt okay uh with using page object classes we want to generate the test
okay so this is another prompt so what I'm doing here generate and execute play rate test using piest and play rate MCP same test scenarios got
changed so this time I'm opening another URL click on the login link in the top navigation bar enter in the username field. enter tested 1 23 in the password
field. enter tested 1 23 in the password field because we already aware of this application right so this is the one actually let me show you this so this is
the application so I'm trying to automate this so click on the login here provide our username and password click on the login and this is the flow I want
to automate and after that what you want to do verify that logout link is visible and also verify that welcome o appears at the top right of the page then click on the logout link verify that log login
login link is visible after logging out.
So these are all the steps I want to generate then implementation requirements are same and this time you want to generate page object class. So
apply the page object model design pattern for page structure and element management and save all page object files inside the project's AI directory.
So here we are using aa testing right a test same directory page object class also I want to store and follow the pi test style convention function starting with test execute each step
interactively using playright MCP tools to validate flow and elements once all steps are validated successfully then generate and save the file test script
as a testing and test login and log out this is the name of the test file and automatically execute the save test in headed mode and if any step or assertion
fails, analyze, fix and rerun the test until it passes. So this is complete prompt. Everything is mentioned. Now see
prompt. Everything is mentioned. Now see
the beauty how it is going to generate the page object class within seconds everything will be done. See same
procedure. So let me go to p copilot open the chat box and just provide the prompt as usual. Select the agent and whichever pilot you want to select.
Simply select whichever you want and simply send it. Now observe.
So it is taking all the steps prompt everything it is started doing. See
within page object classes got generated. Now test cases also got
generated. Now test cases also got generated within few seconds page object class test case everything is ready. If you
have a multiple page object classes even multiple page object classes also automatically create. I think you see
automatically create. I think you see multiple page object classes have been created.
Okay. Okay, now it will ask it is asking for execution. See login out page object
for execution. See login out page object class is created. Test case is also created. Now it is asking for execution.
created. Now it is asking for execution.
Simply say continue. Now it is started execution. Now you can see it is got
execution. Now you can see it is got failed somewhere. No module named AA
failed somewhere. No module named AA testing. Inside the AA testing
testing. Inside the AA testing everything is there but somehow it is giving an error. So what we should do now? It is giving some error. Right? So
now? It is giving some error. Right? So
again rerun continue because if there are any issues we are asked to rerun one more time right so that is the prompt is executing so again it is failed here that's the reason it is asking to rerun
run the command in terminal one more time so simply say continue we are asked to fix that issue and rerun again right so now it is started execution see this
so first time we got an issue and again it is automatically fixed and it is successfully executed so this time definitely it should class.
See it is still validating the log out link and the name which is displayed in the navigation bar.
So suppose again if it is failed again it will rerun one more time.
Yeah, now it is done. So somehow it is got failed once again. Uh okay again if it is failed again it will ask you to rerun one more time. So two times it is got failed. So again it is working on
got failed. So again it is working on it. It is working on fix.
it. It is working on fix.
So once it is working on fix it will give you the command again. Do you want to read? Now we can see it is identify
to read? Now we can see it is identify all the fixes right. So you can see
right. So you can see accept all and now again it is giving the same command to run. So now it is got fixed again. So again continue this. So until
again. So again continue this. So until
it fixes it keeps running the automation test. So now again it is open login log
test. So now again it is open login log out.
So I think now it will pass. So
successfully login.
It will take multiple reruns. So now it is almost successfully login. Somehow it
is g failed because of some time out page wait for selector. Right. So this
is 15,000 exceeded. Somehow it has got failed somewhere. Okay. So it is again
failed somewhere. Okay. So it is again still trying to fix it. Let it fix.
We'll wait for a few seconds.
Okay. So now it is trying to do some keep changes. Uh you can see it is
keep changes. Uh you can see it is actually this is the error. Uh it is giving actually uh the fix and if you want to accept this fix we need to click
on the tick mark actually. Okay. So we
need to just click on this tick mark and say accept right again continue this is asking changes. So once you accepted
those changes then it is trying to fix and rerun it. So this is the beauty of using MCP. So within fraction of seconds
using MCP. So within fraction of seconds everything is doing it. So if you want to do it manually creating page object classes creating the test case takes a lot of time.
Okay. So it takes multiple reruns or multiple times. So but this is the
multiple times. So but this is the procedure guys. I hope you understood.
procedure guys. I hope you understood.
So this is the procedure we need to uh generate the test cases and run the test cases. If there are any failures are
cases. If there are any failures are happening the test cases and in between if you want to do manual changes and still you can do those manual changes okay
according to the test but before doing all these things at least you have to aware of automation right so until unless you know the coding and implementation you cannot use this MCP
some play rate anything right so that's the reason first you have to learn everything you have to know how to write the automation code you have to learn how to create a page object class and then if you can start using MCP models.
So if I start using if even though if you face any issues or any issues you can easily fix them. So that is the main advantage of using MCP server. Okay. So
similarly different tools are having different type of MCP servers. Even Celm
is also having their own MCP server.
Celerium TypeScript if you're using Celium sorry if I using playright typescript combination again same playright server. So this is supported
playright server. So this is supported all three languages. So this playright MCP is implemented for playright javascript playright typescript playright java playright python all four
languages are supported with single playright MCP okay but selenium java selenium python is having a different kinds of mcps again they have implemented by some third party people
not by playr not by Microsoft so we cannot give guarantee on those mcps and security aspect okay so this is how we
can use MCPS uh to automatically generate the code automatically create the files automatically the execution will also automatically happens right so this will
saves a lot of time and this is a nowadays trend okay so this is a upgoing ongoing technologies in the current market so
this is a future so there are n number of MCPS are already came in the market still coming so you need to learn this and you need to upgrade This copilot
will support almost all type of ids and uh Eclipse I'm not sure but support VS code editor Pycharm it support intellig ID is also support and if you're working
with selium java try to use intellig ID which is having good number of features copilot supports right so MCP is also available for all kinds of technologies so there are different technologies
different MCPS are available if you want to work with the database side then database MCP is needed right So I'll show you quickly API also how we can generate API test case. So far we have
seen volley web test. So we can also generate API test. So what I can do is I will also give a new prompt
for API test.
So let's see how exactly API test will generate. So I'm just changing the
generate. So I'm just changing the prompt.
So generate and execute an API test using pyest and playright mcp. So what
is my test scenario? I want to set API endpoint. This is the API endpoint. So
endpoint. This is the API endpoint. So
if I run this API endpoint actually what will happen is it will return some JSON response. So this is our response. In
response. So this is our response. In
the response we have an ID title and some price description so many other things. So let us test this. So send the
things. So let us test this. So send the get request to the endpoint. Verify the
response status code 200. validate that
response. JSON contains the keys. So
these are the keys should be there in the JSON response and the data also verify the JSON response includes the following expected values and after that what I should do log the complete
response body to the console. I just
want to print in my console window and what are the implementation details?
Follow the Pyest structure. Execute each
step interactively using player MCP tools for validation. After successful
validation, save the generated script as again in AI testing folder with this name test API test MCP. If any step or assertion fails, again identify, fix the issues, then rerun until the test
passes. What is an expected output? A
passes. What is an expected output? A
complete and functional play rate plus pi test API test script that verifies the product details from the fake store API and logs the response body. This is
complete prompt. Let's see how it is going to generate API test case and it will run also automatically. Go back and go to copilot. Open the chat window.
Agent GDP 4.1 I'm selecting. Put the
prompt. Simply send it. So this time it is going to generate API test case within few seconds.
See this done.
Accept. And now it is giving the command to run it. We need to give the permission to run the test. So click on continue. Now it is started running my
continue. Now it is started running my test.
Done. You can see one test is got passed. So as soon as it get passed, it
passed. So as soon as it get passed, it is also saved the test case inside my AA testing folder. You can look at
testing folder. You can look at somewhere you can see this test API test_mcp.
So this is test which is got generated.
This is the API test case.
Okay. So you can use this MCP for API testing also.
So that again you need to include in the prompt. Okay. So how you have designed
prompt. Okay. So how you have designed the prompt depends on that it will behave. If you want to capture the
behave. If you want to capture the screenshot that should be also included in the prompt properly right if there are any failure just you need to capture the screenshot you need to add that point currently I have not added
anything in this prompt I just given plain prompt okay but that is anyway we are uh handling through framework right capturing the screenshot and everything so that is not needed to put in the prompt separately but if you are
creating individual test case without using any framework then you can add that in the prompter but anyway we don't do individual test case like this Right, we are going to follow the framework concept. In the framework, we already
concept. In the framework, we already have pyest.ini, conf test. py. So all
have pyest.ini, conf test. py. So all
the configuration files we have already handled how to capture screenshot, videos, trays and everything. So better
to don't include them inside the prompt.
So just write a clean prompt and keeping everything in the proper prompt and then it will do it. So it did not log in the console window. It should log actually.
console window. It should log actually.
It did not log or else we need to rerun once again.
Okay. So complete functional what we expecting if any so where we provided the prompt. So
verify the JSON response we have okay log the complete response body in the actually this is the console what we are calling here. This is yeah console or we
calling here. This is yeah console or we can just try to change the prompt log or print the complete response
body to the console as an output. Okay. So just need to change the prompt properly or if you're not satisfied with the output then you
can rerun it. No problem at all. Okay.
So you can just remove the code whatever you have created. Simply provide the prompt one more time.
and see this this time we'll see whether it is printing the output or not.
So everything is depends on prompt only guys. Okay. If you properly give the
guys. Okay. If you properly give the prompt accordingly it will do it. Now it
is asking to execute. Say continue.
So if I look at the test it is not added any step to print the response. See
here. Yeah, actually here it is printing response dot in the text format it is printing actually but it is not text right so it should be
JSON right it should be JSON this actually return the response so again you can rerun it so
and you can just provide only specific prompt run the test again.
So the same test again it is asking for command. Click on continue. We just do
command. Click on continue. We just do some modification right.
Okay. So my plan is you have reached the monthly chart messages. Go to upgrade to copel. So 30 days uh free available
copel. So 30 days uh free available guys. After that it will be we need to
guys. After that it will be we need to upgrade this or else we need to uh wait for another 24 hours something like this then you can use this copilot chart box clearly
giving you have reached the monthly chart messages let us try to use another GBT and see okay let me
rerun the test one Okay, I'm just trying to change the LLM and we'll see. No, this is coming from
we'll see. No, this is coming from actually copilot. Okay, so we need to
actually copilot. Okay, so we need to upgrade the plan. So this is a free version is provided but once the free trial is over, we need to again upgrade with this copilot or else you need to
create another GitHub account. So you
can create multiple GitHub accounts so that we can use another 30 days like that. But in the real time actually they
that. But in the real time actually they will uh upgrade it by paying something.
It is not totally free actually but the free trial is available 30 days we can use it. So that's it. My limit is over
use it. So that's it. My limit is over here. So I I hope everybody's understood
here. So I I hope everybody's understood so far right how we can use and how we can generate the test cases using MCP along with the play rate. So I'll share this document keep it with you. I
provided all the steps one by one how to install copilot and MCP server then integrate copilot with MCP server in PyCharm ID provided this command in
MCP.json JSON and this prompt is for web
MCP.json JSON and this prompt is for web and UA test case. This is for page object model and this is for API test.
Okay.
So that's it about MCPS copilot how we can use AI concepts in ID. Pycharm ID
especially supported. So earlier almost one two months back ID is not supported this actually but nowadays it is started supporting PyCharm ID. So it has
supported other ids like uh intellig IDE, visual studio code ID but recently they have given support to PyCharm IDE also. So you can just play with them and
also. So you can just play with them and you can understand better. Okay. So
that's it for MCP AI in automation.
We'll continue in the next class.
Loading video analysis...