All right, so now, just in case, if you are using a apple in one Chip Mac at the moment, if you
are using version one, dot six, dot one, you may be getting some sort of issues basically even ironed
out of some issue.
But I mean, while installing it was working fine because I have already installed a playwright in this
machine before I was trying out and showing you because some of the files like Chromium and Firefox
were already sitting in my cash file and it was working fine.
But if you don't really have like you are using everything fresh on an Apple MacBook and one pro, you
probably get an error.
So I'll quickly show what I really mean.
So if I tried to do and npm install at the moment using this particular version, you can see that I
get this error.
So basically I have removed those cache information directly from my cache and that's why I'm getting
this error right now.
It says that this error is outdated by throwing inside an arcing function without a catch block.
And it also says that error playwrite does not support chromium on Mac dot one.
Basically, it says that it is not going to support this particular version of Apple M1.
So this is one of the issue that the player actually has got.
So if you tried to use version 1.0 seven to zero, this issue will be resolved.
Basically, this is the very, very simple, straightforward bug which the team has created.
But now it's been fixed.
So if you just try to move or delete these files from here and now, if you try to do an NPM install,
you could see that the installation is going to happen and the chromium is going to be downloading for
you and it's going to install the browsers for you.
Yes.
So I didn't show you on the earlier video because I already had those in the cache.
But I realized that if you use this particular version, you may be encountering this kind of error.
I mean, the time when I'm recording this video, these issues are actually happening.
But by the time while you use this or maybe watching this after like six months or seven months, this
version will be already very, very obsolete and these issues would have already been resolved.
Yes.
So this is the one of the issue that I wanted to show you before I could actually really move forward
with this particular course.
Well, that's it, guy.
This is what is going to happen.
So once you do the installation, you can see that that is going to be like three browser is going to
be downloaded for you on the cache file.
So if I just go over here, you can see that in the most playwrite I actually has got I've got the chrome
for the Mac, like the chromium browser and similar for the Firefox.
So you can see that the Firefox likely browser is sitting similarly for the Web kit.
You can see that the Apple Safari has got the Web browser sitting over here as well.
So everything is actually downloaded for you and then you can start using these browsers for the testing,
which is pretty, pretty cool.
So this is a brilliant idea because the team has already got well, as I said, the installation is
already done with no the video itself.
You're going to start writing a simple code and we'll see how the test actually works and how the code
actually works.
So for doing that, I'm going to create a new file I want to call as simple test dart JS.
So basically I'm going to write everything in the JavaScript language as of now and I'm going to start
writing the code over here.
So the first thing I'm gonna do is I'm going to create a constant of maybe, let's say chromium.
So see a small letter and I will show you what I really mean here.
And then I'm just going to do a required of playwrite.
That's it.
So what is this chromium and why should I create a constant of chromium in here?
So basically, this is one of the concerns which has been exposed as a browser type from the playwright
library itself.
So if you go to the playwright, if I just hit the control and click in Windows and in Mac, it is the
command and click, you can go, you can see that it just highlights and it shows you Intellisense of
all the different concerns, has being exported.
So if I just click this guy, so basically it's going to take you to the index started out as something
but the type definition file and it's going to tell you that it's going to be a constant of chromium,
which is being exposed for any of the JS find that you're going to be importing.
It tells the exact types of the browser type of the browser, which is something about the chromium
browser.
So if you click the chromium browser, you can see that this particular interface extends the browser
interface itself.
So this is what is basically happening.
So you can do all sorts of things, which is available within this particular browser is nothing but
the chromium browser.
Right.
I'm just going to close this.
So basically, you can see that these are the different constants that you can use at the moment.
As of today, when I'm recording this video, like three different modern browsers.
So I'm just going to use the chromium browser over here in the playwright and then I need to actually
start running the code.
So in order to run the code in C Sharp, we use the.
Main method in a class file, similar in Java, we use a main method.
Similarly in JavaScript, because everything is going to be an asynchronous programming language, we
need to somehow create an asynchronous block so that the code can be really executed because this is
an interpreted language.
It's not the compiler language.
We should tell the code that, hey, this is an asynchronous code that I need to be executing.
So I'm just going to create a block of code, something like I think that this block is responsible
for running the code, which is sitting inside this block.
So this block, which I'm talking about, is where the code is going to be executed.
So this is the place where we're going to do all sort of codings of our browser launch or running the
test like opening a page or something like that.
All operations are going to sit inside here.
So I'm just going to create a const, let's say, a browser where I'm going to say chromium, which
is anything but this constant chromium dot.
If I just do that, you can see that automatically the intelligence comes in from this studio, which
is nothing, but it is coming from the type definition file that we just saw.
And it tells you all the method like connect, executable part launch, launch, persistent context,
launch server name and things.
So I'm just going to use the launch method that I'm going to launch the browser so you can specify different
options in here.
Something like you can set some launch options so you can see that it automatically tells you that launch
options so you can set the launch options if you want or you can just leave this guy as it is.
If you want to set the launch options, you can put like two braises there.
If I just do a controlled space, you can see different properties comes in something like argument's
sandbox, chromium sandbox dev tools, download pod environment and then ignore our headless and things
of that nature.
So we'll talk about these things later in this course.
But as of now, yes, this is going to be the default thing that you can do just for the launch and
going to save this.
And then I'm just going to do a page launch there.
I'm just going to be performing are opening a page within that particular browser.
So basically I will talk about the browser browser context and then frames and stuff in the next section
of this picture, of course.
But as of now, just be aware that once you create a browser, you also need to create something called
as a page where you're going to open the actual page itself.
So this is like a Chrome browser that you have opened and then you need to open a page, which is nothing
but your extradimensional automation page, our Google page, something like that.
So I'm just going to create a concept of page where I'm going to Maeterlinck that browser.
Can you just open me a new page or something like that?
You can also create new content or new browser, CDPR, CPD sessions.
I mean, we talk about that later, but for now, in this first couple of videos, we can talk about
new page, something like that.
And you can see that once I hit a new page of Enter, it automatically puts on a wait for me over there,
which is pretty nice.
I mean, the intelligence is actually doing it for us because this new page is actually and I think
method.
And you should always, always use an update.
If not, the test is going to fail or it's not going to execute.
So it's telling me automatically.
So those things were not there like long time before, but now everything is there for you within Visual
Studio Code itself.
And you also need to put on a weight or hear if I'm on, forget it.
That's it.
And you can see that there is a three dot coming in.
So if you see that particular bulb symbol, it says remove unnecessary of it if you really want to.
But that's wrong.
I mean, you need to have an operator over there.
And then once the page is created, we then need to do and go to to that particular page, I mean,
to navigate that particular page.
So I'm just going to do a page dot.
You can see all the different method comes in.
And the CO two is the method which I'm interested in, which I'm going to say has is execute automation
dot com, I'm going to save and then I'm just going to maybe close the browser, something like a wait
of the browser dot closed.
So I'm going to open the browser, I'm going to navigate to the page, I'm going to close the browser.
So if I run this test, basically the test is going to run.
I mean, the code is going to run.
But problem is, you don't see anything happening behind the scene because it's going to run by default
and headless mode.
So we should run this in and headful more so that you can see that particular operation.
So don't believe me what I'm saying.
I'm just going to go over here and then I'm just going to type the node of simple test.
Dargis You can see that just like that.
And as a best practice of this code execution, I always prefer to use the word.
Not in this fashion, I just use something like that, which is a correct way of doing as well.
So this makes the code even more civilized, like how the code is defined to be written on a JavaScript.
So I'm just going to do something like that so you can see that everything is looking good right now.
And because we didn't see any browser came in, the easiest thing we were going to do is go to the launch
method and then or here we can just type a property called Hitless by default is true, which I'm going
to change too fast.
So I'm just going to tell that this hurdlers is false, which means it's going to be headful more.
So I'm just going to leave this guy as it is and then run the test.
Oops.
I just forgot this process as well and I'm just going to run that and you can see that now the test
is actually running and you can see that it's opening the extra dimension dot com page and it just closed
it.
So basically because it's a launch operation, which is the hitless are false, it is actually executing
for you without any problem, which is pretty cool.
So this way we can actually see that we could able to run a code which is sitting inside this particular,
I think, arrow function, which is going to run the test for us or the code for us that we have specified.
We can also do some more things like we can take a screenshot and stuff within this particular page,
something like a weight off page dot screenshot of is nothing, but it's going to take a screenshot
for the page that is going to be appearing.
And then over here, we can specify the part of where this particular file is going to be saved.
So I'm just going to see a dart and something like that.
So if I specify that, then it's going to say in this particular file name.
So let's see what's going to happen.
So once I run this, you can see that the page has been sponte.
And let's go over here.
You can see that there is a year PMG file.
It takes a screenshot and it's kind of showing us for us, which is pretty cool.
So this is how we can run or write a simple code with playwrite.