Optimizing Your Screenshots

00:00 Currently, the take_screenshot() function makes a screenshot of the h1 element of our website from the Flask Development Server.

00:09 The website at this moment serves an h1 headline with an emoji. Let’s type some text there, Hello!, because we want to investigate something.

00:18 When we take a screenshot by running python utils

00:24 and then you are having a look at your screenshot,

00:28 you might notice that it is not super crisp. I mean, sure, I zoomed in quite a bit, but it can be a bit more sharp. So let’s fix that. Head over to your utils.py file again and go into the take_screenshot() function. In line seven, where you create a browser context, you can actually pass in an argument.

00:50 It’s a keyword argument named device_scale_factor. That’s three words separated by an underscore, and the default value is one, but you want to set this device_scale_factor to two.

01:05 Once you save the file and run again, Playwright again makes a screenshot of the h1 element. And if you have a look at the screenshot now, the screenshot is way bigger.

01:16 And this will be super important when you create screenshots with the code image generator later because you want your code to be readable from the inside and the outside.