Taking Playwright for a Spin

00:00 Your code for Playwright will live in a file named utils.py. Create the file and open it in your editor.

00:08 In the utils.py file, you first need to import the sync_playwright() function from the sync_api module of the Playwright package.

00:19 Once you’ve imported the sync_playwright() function, create a new function in the utils.py file named take_screenshot().

00:27 This function should take one argument, so define a parameter named url because that will be the URL of which Playwright should take a screenshot from.

00:37 Inside the take_screenshot() function, create a context manager with the sync_playwright() function and use playwright as its variable name.

00:46 As usual, the context manager starts with a with, and it’s important that you write sync_playwright() with the parentheses at the end in order to call the function as playwright.

01:00 Inside the context manager, create a browser engine first. In my case, I will use webkit. Then you need to create a browser with this engine and launch it.

01:12 Once you have the browser launched, you need to create a new browser context. You can think of the browser context as kind of like a browser window,

01:22 and you create this new context with the new_context() method of the browser object.

01:29 Then inside this context, you create a new page. You can think of it like opening a tab in your browser.

01:37 Once you’ve defined the page, you need to navigate to this page. You can do so by calling the goto() method, and here you’ll use the url parameter for it.

01:48 So later you will call the take_screenshot() function with a URL, and then Playwright will create a headless browser that visits this URL. So far in this code, the browser is basically on the page, and now you can interact with this page.

02:02 For example, locating an element of the page. You can locate elements on a page with the locator() method of page. And there you need to pass in an identifier, for example, an HTML tag.

02:15 And since you use an h1 tag for the Flask app, you can try locating the h1. So pass in a string that just says h1, no brackets around it, just a string h1.

02:29 To later get feedback if this location worked, let’s print the text content of this element. And finally, you need to close the browser.

02:39 So one nice thing about Playwright is that actually the code looks like the activities that you would do as a user, and there is a reason for that. Basically, for this project, we are using Playwright to make screen shots later, but you can do much, much more with Playwright.

02:56 So actually you can test if your website is working by simulating the behavior that users would perform on your page. For now, we’re just locating the h1 element and printing out the text content of it.

03:09 Let’s give it a spin. Save the file, open the terminal,

03:13 and now there is an important detail. In one terminal, you need to have the Flask development server running with python -m flask run. And then you need to open a new terminal, and in this terminal, first make sure that you are also in the virtual environment, and then enter the Python REPL by just typing python.

03:35 And once you are in the Python REPL, you can import the utils file.

03:40 Once the utils file is imported, you can call the take_screenshot function. Of course, the function doesn’t take a screenshot yet, but it should print the text content of h1.

03:51 If you look at the code above, remember that our take_screenshot() function has one parameter url and there, paste in the URL as a string.

04:01 So the take_screenshot() function has this one argument, which is the address of the server. And once you run the function, there is a bunch of stuff happening in the background.

04:11 Now, Playwright visits the website and tries to grab the h1 element, and then you should see the text of your h1 element, in this case, the Hello! string.

04:21 And if you had both terminals side by side, you also saw that there was actually a request on the left side in the terminal. That’s the Flask server responding with the code function and the HTML code of it to the headless browser of Playwright.

04:37 That’s nice. We know that this works. So next is to actually take a screenshot.