Taking a Screenshot

00:00 Currently, you are only getting the content of the h1 element as text, but later you actually want to have an image of code, so the next step is to actually get an image of an element with Playwright. Inside the take_screenshot() function, replace the line where you’re currently calling the print() function and passing in the text content of the element with actually taking a screenshot.

00:25 You do so by calling the .screenshot() method.

00:30 The .screenshot() method returns an image as bytes, so you need to save the bytes somewhere, ideally in a file, but for now, let’s save it in a variable first.

00:46 So at this point, you are visiting the website, you are locating the h1 element, and then you are taking a screenshot that you save in a screenshot_bytes variable.

00:55 After that, you close the browser, and that’s okay for now. But after closing the browser, you actually want to save screenshot_bytes content in an image file.

01:05 For this, you’re using a context manager again, and for now you name the screenshot screenshot.png. Open it in the write binary mode using a variable name, for example, img for image, and then inside the context manager, you are writing the screenshot_bytes variable into the image file.

01:25 After saving the utils.py file, you need to run the take_screenshot() function again to save an image file.

01:33 Now, you could open a Python REPL again, but you can also use the if __name__ == "__main__" idiom in order to run the take_screenshot() function with our URL when you run the utils.py file directly.

01:47 So let’s do that. Underneath the function, you can write the if condition—if __name__ == "__main__":,

02:00 run take_screenshot() with the URL of our Flask app. So now you can run the utils.py file directly and see if it takes a screenshot, python utils.py.

02:13 And once you hit Enter, you see that it works a little bit because it takes a moment until you see your prompt again. And on the left side, you see that there is a screenshot .png file that Playwright created.

02:26 If everything really worked as expected, the screenshot should contain basically the same content that we would see when we visit the page. So for that, let’s first go to the browser again

02:40 and check how our website looks right now, and then let’s open the screenshot. And there you can see basically the content of the h1 element, which is our Hello! string now as an image, isn’t this cool?

02:55 Well, I think it is cool, but let’s play around with it a little bit if you are not convinced yet. Go to the app.py file, and change Hello! to, for example, an emoji.

03:12 Save the file, and visit the browser again to verify that emoji is showing. And as you can see, we’re still seeing the Hello! page, so that’s good that we checked it because currently, our Flask server isn’t restarting when we adjust something with the code.

03:29 So we could stop the server and rerun it like before, and now when you reload the page, you see the emoji, or you can run the server in debug mode, which then automatically restarts the server when you change the code.

03:43 So let’s do that. Stop the server again,

03:47 and then add --debug at the end of your python -m flask run command,

03:54 and then you see that debug mode is on. And now if you change something in your app.py file,

04:03 you see that the service automatically restarting. And when you go to the browser and reload it, then the updates are already there. And also to be very clear here, you don’t have to have the browser open in order to make the screenshot.

04:19 So if I close the browser and I’m in the app.py file, I can still run the Python utils.py script and it will still take a screenshot of the browser because you’re using Playwright in the background, and I just had a browser open to verify that everything is looking like I want it to look.

04:36 Once you run the utils.py file, it takes a moment, it takes a screenshot. Let’s see what’s the content now. And there you have it, a waving smiley. Nice.

04:46 If you zoom in, you might recognize that for me the emoji is a bit blurry. This could also be the case for you. Also, currently we’re overriding the screenshot every time we’re running the script. It would be nicer to actually create a collection of screenshots.

05:01 So the blurriness and overriding the screenshot is something that we should tackle in the next lesson.