Playwright Standalone Library

The most common modern use case for playwright is utilizing the playwright test package, which is what we have been doing throughout this course, but it's worth knowing that playwright also comes as a standalone core library that can be used for any browser automation purpose in order to start using playwright independent of any testing framework. All that we need is a playwright package, which we can install from NPM by using NPMI playwright. And in addition to installing the API, this will also bring down the boundaries for the different browsers that playwright supports. In order to start using the playwright API within our

JavaScript project, we bring in the default export from the playwright package. Since a lot of the playwright API works on top of promises, we create a simple async main function, which will contain all of our automation code. The first thing that we need to do is to launch a browser, and here we can make a choice of which particular browser we want to launch. Here we are launching chromium, but you can also launch Firefox or web kit. By default, the browser will launch in headless mode, but here we are passing in option headless falls so that we can visually see the browser that gets launched. As we discussed in our lesson on fixtures, in order

to create a page object, the first thing that we have to do is to create a new browser context, which you can think of as a new browser window followed by a page, which you can think of as a new browser tab. Once we have the page, we can carry out various actions, and right now we are simply going to add a timeout for two seconds so that we can visually see the page that gets launched after we are done with the actions. Since we are the ones that launch the browser, we are the ones that are responsible for closing it as well, which we can do with a simple call to browser close. Finally, we kick everything off

by invoking our main function. Now let's utilize visual studio codes built-in ability to execute any piece of JavaScript or type script to see this particular script in action. From the Run UG panel, we launch our code using no js, and here you can see that a new instance of the browser was created. It hangs around for two seconds and then finally it gets closed. And this is the basic structure of a script if you want to use playwright by itself as a standalone package. And at this point you can start carrying out any other actions that you want using the page APIs that we have discussed throughout this course.

As a demo, let's create a breakpoint before we carry out any actions so that we can play around with the instance of the page that gets created. The code is now paused at the breakpoint and we have the instance of the browser running. Let's play around with the website to see how we can carry out some quick automations. We visit google.com and then inspect the input element. A simple CSS selected that we can use to select this element is to find something such that the title attribute is equal to search. Next, we carry out a simple interaction with this input like typing in a Microsoft playwright. We follow this up with the enter key,

and this takes us to the results page. Now to make sure that the user successfully navigates to the results page. One thing that we can do is to make sure that the stats that are presented at the top of the search results are visible. A simple C CSS selector for this purpose would be to find something such that its ID is equal to results stats. With this simple scenario in mind, let's jump back to our script and carry out these actions using the playwright API. We already know that in order to navigate to a particular URL, we use the page dot Go two method and provide the URL destination. And here we are navigating to google.com.

Then to interact with the various elements on the page, we use the familiar page dot locator, API and provide a CSS selector. And here we are selecting something that has the title attribute with the value search. This is our main search input, and within that, we provide the value Microsoft playwright and then press the enter key. Then in order to make sure that the user is on the results page, we select something that has the ID results, stats, and wait for it to become visible. And this is all you need in order to perform a simple search on google.com. And from here, you can do pretty much anything else that you want.

For example, we can use page dot screenshot method to save a screenshot of the results page to a file called page dot png within the screenshots folder. Now, let's go ahead and execute this code, and no surprise the browser launches it visits google.com performs a search for Microsoft playwright, waits for the results page, takes the screenshot, and then exits. And after this script terminates successfully, we can navigate to the screenshots folder and find the page do png, which is the results page from google.com. As you mentioned at the start of this lesson,

the most common use case for playwright is a web application testing, but as demonstrated, it's good to know that we can use our existing knowledge to create simple web automations. I'll wrap things there, and as always, thank you for joining me.