Name: Playwright Library for Browser Automation
Uploaded: 2022-03-10T13:03:09-06:00
Description: Playwright provides a simple library that you can install via npm for automating various browser engines. That is what we demo in this lesson.

Playwright Tests API Basics

Setting up Microsoft Playwright

Adding Playwright to your Web App

Playwright VSCode Extension

Visual Regression Testing with Playwright

Generate Playwright Snapshots on your CI Server

Debugging Playwright Tests with Inspector

Quickly Generate Playwright Tests with Codegen

Postmortem Debugging Failed Tests with the Playwright Trace Viewer

Capture Failed Test Videos and Screenshots with Playwright

Playwright Selectors

Page Object Model Pattern with Playwright

Playwright Test Fixtures, Browser Context and Page

Playwright Library for Browser Automation

Use Playwright to Test and Automate Web Applications

Playwright provides a simple library that you can install via npm for automating various browser engines. That is what we demo in this lesson.

https://app.egghead.io/api/v1/lessons/playwright-playwright-library-for-browser-automation/subtitles

[0:00] In addition, to providing a great testing Library. Playwright also provides a core npm package that you can use for simple browser automation to demo that we have a basic node js script, where we have, an async function mean, which we invoke immediately. And we will be writing code, within this main function, we can get the playwright core Library by running npm install. Playwright, this not only installs, the playwright library, but also brings in the binaries for the different browsers for your operating system. Once you select Listen is complete. Let's jump into our code and demo some of its features you bring in the library with the simple import statement player. It comes with a few browser engines that you can launch. These are chromium web kit and Firefox. And here we are launching just a Chromium browser. We are running it in headed mode by setting headless faults because we want to see the browser window because right now, we just Deming some of his features. Once you are done with your automation code. You can remove this option and it will run and headless by default. Now will mention this tree before. open looking at the rightist, Ripley, right works on top of a browser, which is a brows, the engine followed by a context, which you can think of, as a browser session followed by a page, which you can think of, as a tab within a particular browser window, when you're working with beta test, you can get direct access to a page, but when you're working with the core API at low level, you have to manage all of these things yourself, once you get access to the page, you can use it to interact with various elements in the Dom, but right now, let's just create a pause for two seconds, so that we can see See the browser window Flash before our eyes. And finally, when you are done with your interactions. With the browser, you can exit it by using browser to close. And now, if you were to run this script, of course, you see the browser launch. Create a new context, create new page. We will see this page for two seconds. And finally, the browser will close. Now. Let's look at a few simple interactions that we can carry out by using the page object. One method that we've already seen with Pari test, is Page, dot go to, and let's just navigate to Home and at the method is Page dot screenshot, which we can use to save the screenshot of the current page to a particular file path. And we're just saving it into the screenshots folder as page dot PNG. Now, when we run the script again, it will navigate to google.com and save the screenshot to page dot PNG. And maybe open that up. You can see that we have a screenshot of the Google homepage. Now, let's debug this. Node.js script and look at some other interactions that we can carry out with the Google homepage. We set up a breakpoint right after page dot CO2. So now when we run the script, we are currently on google.com. And let's observe, this particular input that is used for searching something on Google looking at the Dom as it stands right now. One decent way that we can use to select. This input is to find something with the attribute title equals search. We will use this input to fill in some text and press the enter key. This will take us into the results page and to make sure that the results are actually displayed before. Take the screenshot. One thing that we can do is to make sure that the results stats are visible. If we inspect the element, you can see, there is pretty easy to select with the simple ID selector of results stats armed with this knowledge. Let's jump back to our node.js script and modify it to take a screenshot of a particular results page. After navigating to google.com., We use the title equals to search attribute. To find the search input, fill in the text, Microsoft way, right? Then press the enter key. And then to ensure that We are on the results page. We wait for the results stats to become visible and the existing code will, then save the screenshot to page, 2 p and g. And now, if you run this particular script, it will navigate to google.com, perform a simple search wait for the search results to show up and then save the screenshot. And we can verify that the screenshot is correct by opening up the page dot, PNG, file, that we saw before. For final closing, thoughts using the period core API for simple. Browser automation is pretty easy if you've used by writers. Just because at its core, it's the same page object with the same API across both libraries.

Playwright Library for Browser Automation

Share this video with your friends

Course

Use Playwright to Test and Automate Web Applications