How Playwright Works Behind the Scenes? | Playwright Architecture Deep Dive

追加: 2026-05-24

[00:00:03]Hi guys, welcome to my channel. So good morning if you are watching this video in the morning and good evening if you are watching this video in the evening.

[00:00:11]So it's been a long that I have uploaded a video in my YouTube channel. So the last video I have explained you about the selenium architecture. Now I'm going to in this video I'm going to explain you about the uh player architecture how it is going to communicate with the browsers. So before going to the real topic so I need to thank you everyone that for the support that you have given for my two videos itself. So it's been a it's been a great uh response from you guys. so that uh I will get more motivation uh to explain the videos and uh to to to give more videos and to explain you about the more topics in the coming sessions. So now without getting late let's uh uh deep dive into the topic of uh planet architecture. So now let me share my screen so that uh I can able to tell you the visually how it will be going to communicate how the things are going to be done in uh play architecture.

[00:01:26]See yeah so are you able to see my screen right let's uh as I already told you about uh the today's topic is player rate architecture play architecture so before going to this play architecture so I'm going to tell you something about play rate then what is play So play is an automation testing testing tool guys which is similar to the selenium. So we are having so many automation testing tools like uh selenium QTP play rate like that. So play rate is also a automation testing tool which was developed by the Microsoft people.

[00:02:19]So which was developed by the Microsoft people. So for reliable automation uh for reliable web application automations right so in this play rate in our lecture what does architecture means I already told you about this play rate play it's an automation testing tool which was developed by the people of Microsoft then what is architecture so let's say we are having test scripts right as a part of uh our as a as a part of our uh test engineer journey we will write some so many test cases right so we are going to sorry yes so we are going to convert those test cases into automation test scripts by using different types of tools and by using different types of languages that you already know so a test scripts is called. So we are having we are going to have the manual test cases manual test cases. If you want to introduce the automation testing by using some tools with programming languages you need to convert these manual test cases into test scripts. The test scripts are nothing but it's the test cases is the test cases only but it are the these will be written in a in a code format like by using different types of programming languages like JavaScript and some different types of tools like playerate right so this is uh about uh test scripts that you already know now if I'm writing a test script and exe executing on it, executing uh it on my uh running it, running the test case. So, it is going to be communicate with my browser, right? How it's going to communicate with my browser? What is really happening internally between my player test script, player test script and the browser that will tells you about this term called architecture that we will call it as architecture. Now without getting late let me start this played architecture session. So we the test engineers are going to write test scripts by using different types of languages by using different types of tools. Let's say I I'm writing some I'm writing my test script right. So this is my test script which is having some 100 lines of code. This is my test script.

[00:05:10]So how I have written this test test script? By using tool called playrite and by using the programming language called JavaScript or TypeScript.

[00:05:27]I can write it in any other languages that doesn't matter for me. I can write it in any other tool also. So it is selenium or cucumber or whatever it may be as it is our play architecture. So I'm taking the play rate and with the play rate I'm going to take the javascript or tcript which is very hotest combination pate with javascript or tcript. Now once after writing the test scripts so here we are going to have for each and every programming languages we are going to have a separate client libraries.

[00:06:03]So we are going to have playright client libraries client libraries for every language.

[00:06:19]So for each and every language let's say for JavaScript for TypeScript for Java for C#. So whatever the languages that are supported by the playright for each and every language there is going to have a separate client library. So in this client library only we are going to write our test cases and manage the things. So these client libraries are used to write our test scripts and used to run our test scripts also. So these are the play client libraries. Now what these play rate client libraries are going to do in the sense these play rate client libraries will convert our test script will convert our test script commands to some protocol type of messages some protocol type of messages example like JSON okay so these These play rate client libraries are going to convert our test script commands into some messages which we can say nothing but JSON format. So in 90% of cases we are the selenium the pate sorry the player client libraries are going to convert those into the JSON protocol messages. in other 10 percentage. So it will be depend on uh the which architecture that that we are using and the how the tools are going to be work. So it will based on that that thing. Now right uh yes now these protocol messages are given to the playright server.

[00:08:11]So we are going to have our play rate server here. Let's say I'm having my play rate server.

[00:08:21]Yes. So this is play rate server which is called node.js.

[00:08:28]NodeJS is my play rate server.

[00:08:32]So this play rate server is going to take all the protocol messages that were given by the play rate client libraries.

[00:08:42]How? How?

[00:08:44]In the sense the play rate client libraries what I'm telling exactly is the play rate client libraries are going to give all these converted protocol messages to play rate server through a channel.

[00:09:05]called through a connection we can say we can say the better word is connection through a connection called web socket connection.

[00:09:15]So this connection is a very powerful connection which is a biirectional connection. So this we will call it also as handshake mechanism.

[00:09:29]handshake connection or handshake mechanism we can say. So I'm going to take one more video about how this websocket connection is going to uh get built and how uh this will work between this play rate client library and the play rate server. So I'm going to tell you in a separate video and before that I have already told you that I have already took a lecture of uh explain you the things about the selenium architecture how it it is going to be internally works. So if you haven't watched that video please go and watch that video. I will provide the same in my description also. So please uh like that video, share that video. It will be very useful for your friends also.

[00:10:16]right now. So let's get get back to the topic. So our play rate server received all the uh commands that were given that that we were given. Now this play rate server is going to communicate with my browser engines directly. So I'm telling browser engines directly.

[00:10:44]How these are going to communicate with the browser engines in the sense through its native browser protocols. Let's say uh browser protocols.

[00:10:58]Let's say I'm communicating with the chromium engine. So it will take chrome devo protocols CDP. Let's say I'm uh communicating with my Firefox, it will do with Firefox remote protocol. If say I'm communicating with the uh WebKit uh engine, so it will say WebKit remote protocol. I will tell you uh deeply about how these browser engines are also going to be done in our next lectures in our next lecture. So probably I will do it in the in our next video itself. So two things uh I have given uh pending for you. The one thing is how the websocket connection is going to be built and how why it is very important and uh the second thing is about the browsers and what are these browsers and what is the CDP FRP and WRP. So I'm going to discuss those things. Now these browser engines are going to give all the commands to the browsers where we can execute where our test scripts will get executed. This much this much drama is getting uh getting done whenever we are writing a test script and convert and running it on our ID and we can see only the browser actions. So we can the only two steps are we can see here this is the one and this is the one.

[00:12:26]So in middle this much this much drama is going to be there. So this is how probably how the play rate architecture will works. Let me tell you briefly. So the we are going to write the test scripts. So I'm having a real uh diagram. So very simple diagram where I where I will explain for one more time.

[00:12:49]Have you understood this? Great. So if you are having any doubts please uh comment those things. So I will give I I will I will try to reply it as early as possible. Now to explain the things more clearly. So for one more time I will I'm having a I have prepared a very good real image that will helps for you. So let me go to that actually. Yeah. So you can see here right you can able to see right. So as I already told you that we the test engineers so we the test engineers write the automation scripts using programming languages such as JavaScript, TypeScript, Java, Python and C#. So the same thing. So we are going to write the uh test scripts the step that I have told here. Right. Next for each and every programming language play provide dedicated client libraries which helps us to write and execute the automation code. So where we are writing the code we are writing the code in play libraries itself play client libraries itself and where where we are executing the code we are executing the code with play client libraries itself. Now, so we once we have executed the uh a code in our play rate client libraries, what the play rate client libraries are going to do? What it is going to be do in the sense the play rate client libraries? These play rate client libraries internally converts our automation commands into protocol based messages format. So not exactly JSON file. So it is so I will I have told you that 90% of the protocols are in JSON formats the physical files are not going to generate it that's that's what it is telling here. So JSON file stored physically not accept the JSON file stored physically but it will be converted into the JSON format as you can see here. So it is a JSON format thing. The play rate client libraries will convert all our commands to the JSON file.

[00:15:05]uh formatted things now. So how this uh JSON file what what going to be next and how these are communicating to the browser in a sense.

[00:15:16]So sorry yeah the play rate client libraries communicates with the play rate server here. So this point I have already explained parries for each and every language parent is going to have their own client library and this own client libraries will convert all our commands the protocol messages which are JSONs. And now these playrate client libraries will communicate with the playrate server and give all the protocol messages through a channel called websocket connection through a common connection called as websocket connection. So that what we are telling here the playrate client communicates with the playrate driver or server using an efficient communication channel.

[00:16:11]In most cases this communication happen through the interprocessor communication or websocket connections. So this is what guys the connection will be happened between client and the server as websocket connection and all the JSON formatted all the protocol messages will be converted from client to server.

[00:16:34]Right. Next.

[00:16:38]So the next thing is so now the so once after all the connections reach the pay server the pay server directly communicates with the engine such as chromium, firefox and webkit using their native browser protocols. So every browser is going to have their own protocols. Let's say Chrome will have this Chrome dev protocols as I already told you. Firefox is going to have Firefox remote protocols and WebKit is having WebKit remote protocols. So using this uh native browser protocols using the browser protocols the play rate is going to communicate with its uh with the browsers browser engines we can say right. So the engine the browser performs the requested actions such as click scroll and navigation and whatever the things that we have given in our commands or the code and and the next step.

[00:17:40]So once after the execution so here so I already told you so that thing browser browser engines the all the protocols will be given to the browser engines by through some uh protocols like chromedriver protocol firing uh firefox remote protocol and vect remote protocol this browser engine will execute all the actions on the browser. So once after the once after execution got completed so the same flow will get back here and the test scripts will get will get appear here. So that's what here we are taking after the execution the browser sends the response or the status back to the play server and then the result is written to the automation script.

[00:18:28]So we can see the results. Now what we can do with the results we can do anything with the results what that we are so what we that basically will do based on the results they are going to raise the bugs they are going to add some conditions they are going to report the bugs and they're going to close the bugs whatever they can whatever they want so for what purpose they have written the test scripts so that they can do so once after getting the results see after the execution the browser sends the response or status back to the parent server Now the results is written to the automation scripts and can be used for the assistance, assertions, validations, logs and reporting.

[00:19:11]So we can use uh the results for this kind of things.

[00:19:16]So this is guys this is about how the play how the play rate is going to communicate with the browser synchronally with the uh written code.

[00:19:27]Now, so this is pretty much simple about our lecture today's lecture. So it was paid architecture. So I hope you will understand uh entire topic clearly.

[00:19:43]So if you don't understand, please rewatch it again. You will get the better understanding about this. And if you are thinking uh it was very slow you can watch this video by putting in uh speed by increasing the speed also in 1.25x or 1.5x it will be very beneficial for you and it will be uh timesaving for you also. So you can watch the video in little uh time with more understandable way. So thank you guys. Thank you for watching this video. So please like, share to your friends whoever needs this so that they will be beneficial uh with this video and subscribe to my channel so you will get all the lectures that are coming in SD. So you can become an SD with my lectures with easily so that in that deep way I'm telling you guys. Yeah. Fine. Thank you.