Are you web scraping or testing a website with Playwright and want to take screenshots?
You're in the right place. In this article, you'll learn the three main methods of capturing screenshots with Playwright in Python:
- Generating a screenshot of the visible part of the screen.
- Capturing a full-page screenshot.
- Creating a screenshot of a specific site element.
Let's go!
How to Take a Screenshot With Playwright
Playwright is an open-source framework built on Node.js. It helps automate web browsing tasks and is known for its headless browser mode, which gives the tool a significant speed advantage. One of Playwright's key functionalities is screenshot-taking. Automated screenshotting has many commercial use cases, most notably in testing.
Depending on the part of the page you need to screenshot while scraping with Playwright, you will use a different method. In this section, you'll learn three ways of screenshotting different parts of a product page using ScrapingCourse.com as a demo web page.
Option 1: Generate a Screenshot of the Visible Part of the Screen
Grabbing the visible part of the screen is the easiest way to take a screenshot in Playwright. It only captures the section above the fold (the part of the page that appears immediately after loading).Â
Below, you can see an example of a screenshot made with this method:
Now, let's learn how to capture this type of screenshot.
First, start a synchronous Playwright chain and launch a new page instance:
# import the required library
from playwright.sync_api import sync_playwright
# initialize Playwright in synchronous mode
with sync_playwright() as p:
# launch the browser
browser = p.chromium.launch()
# create a new page instance
page = browser.new_page()
Visit the target website and initiate the screenshot method from the page instance. Then, close the browser:
# initialize Playwright in synchronous mode
with sync_playwright() as p:
# ...
# navigate to the target web page
page.goto('https://www.scrapingcourse.com/ecommerce/product/abominable-hoodie/')
# take a screenshot
page.screenshot(path='visible-part-of-the-page.png')
# close the browser
browser.close()
Merge everything. Your final code should look like this:
# import the required library
from playwright.sync_api import sync_playwright
# initialize Playwright in synchronous mode
with sync_playwright() as p:
# launch the browser
browser = p.chromium.launch()
# create a new page instance
page = browser.new_page()
# navigate to the target web page
page.goto('https://www.scrapingcourse.com/ecommerce/product/abominable-hoodie/')
# take a screenshot
page.screenshot(path='visible-part-of-the-page.png')
# close the browser
browser.close()
Awesome! The code above will screenshot the visible part of the target page. You'll find the output in your project directory.
Next, let's increase your coverage to a full page.Â
Option 2: Capture a Full-page Screenshot
Playwright lets you capture an entire web page, including the parts that require scrolling. For example, here's a full-page screenshot of the target product page:
To get the same result, you need to add a full_page argument to the screenshot method and set its condition to True:
# import the required library
from playwright.sync_api import sync_playwright
# initialize Playwright in synchronous mode
with sync_playwright() as p:
# launch the browser
browser = p.chromium.launch()
# create a new page instance
page = browser.new_page()
# navigate to the target web page
page.goto('https://www.scrapingcourse.com/ecommerce/product/abominable-hoodie/')
# take a full-page screenshot
page.screenshot(path='scrapingcourse-page-full-screenshot.png', full_page=True)
# close the browser
browser.close()
Yes, it's this easy! Now you know how to screenshot an entire page with Playwright.
Option 3: Create a Screenshot of a Specific Element
If you only want to screenshot a selected part of a page, Playwright also lets you capture its specific element. To do that, you'll have to point your web scraper to the target element.
For demonstration, let's grab a screenshot of the product summary container. It will look like this:
First, start Playwright in synchronous mode and launch a page instance:
# import the required library
from playwright.sync_api import sync_playwright
# initialize Playwright in synchronous mode
with sync_playwright() as p:
# launch the browser
browser = p.chromium.launch()
# create a new page instance
page = browser.new_page()
Next, open the web page and obtain the target element using its class attribute (.entry-summary). Then, screenshot it into the specified path and close the browser:
with sync_playwright() as p:
# ...
# navigate to the target web page
page.goto('https://www.scrapingcourse.com/ecommerce/product/abominable-hoodie/')
# obtain the target element
element = page.query_selector('.entry-summary')
# grab a screenshot of the target element
element.screenshot(path='scrapingcourse-specific_element_screenshot.png')
# close the browser
browser.close()
Here's the complete code:
# import the required library
from playwright.sync_api import sync_playwright
# initialize Playwright in synchronous mode
with sync_playwright() as p:
# launch the browser
browser = p.chromium.launch()
# create a new page instance
page = browser.new_page()
# navigate to the target web page
page.goto('https://www.scrapingcourse.com/ecommerce/product/abominable-hoodie/')
# obtain the target element
element = page.query_selector('.entry-summary')
# grab a screenshot of the target element
element.screenshot(path = 'scrapingcourse-specific_element_screenshot.png')
# close the browser
browser.close()
The code will return the expected screenshot. Congratulations!
Keep in mind that some websites implement anti-bot systems to block scrapers. How can you bypass them and grab the screenshot you want?
Avoid Getting Blocked While Taking Screenshots
Modern websites actively block bot access, including for screenshot attempts. Without proper anti-bot bypassing, your screenshot automation will fail before it begins.
Let's try taking a screenshot from a protected page like the Antibot Challenge page with Playwright:
# import the required library
from playwright.sync_api import sync_playwright
# initialize Playwright in synchronous mode
with sync_playwright() as p:
# launch the browser
browser = p.chromium.launch()
# create a new page instance
page = browser.new_page()
# navigate to the target web page
page.goto('https://www.scrapingcourse.com/antibot-challenge')
# take a full-page screenshot
page.screenshot(path='anti-bot-page-screenshot.png', full_page=True)
# close the browser
browser.close()
Running this code results in getting blocked. So, instead of your desired screenshot, you'll see this:
The best solution to avoid getting blocked is to use a web scraping API like ZenRows. It's an all-in-one web scraping solution that helps you fix your request headers, auto-rotate premium proxies, and bypass any anti-bot system. Also, it comes with all the functionality of a headless browser like Playwright.
Start by signing up for a new account, and you'll get to the Request Builder.
Paste the target URL, enable JS Rendering, and activate Premium Proxies.
Next, select Python and click on the API connection mode. Then, copy the generated code and paste it into your script.
# pip3 install requests
import requests
url = "https://www.scrapingcourse.com/antibot-challenge"
apikey = "<YOUR_ZENROWS_API_KEY>"
params = {
"url": url,
"apikey": apikey,
"js_render": "true",
"premium_proxy": "true",
}
response = requests.get("https://api.zenrows.com/v1/", params=params, print(response.text)
The generated code uses Python's Requests library as the HTTP client. You can install this library using pip:
pip3 install requests
Paste the code into your IDE, and change the response type to stream in order to read the generated image.
# ...
# send the request and set the response type to stream
response = requests.get('https://api.zenrows.com/v1/', params=params, stream=True)
# check if the request was successful
if response.status_code == 200:
# save the response content as a screenshot
with open('anti-bot-page-screenshot.png', 'wb') as f:
f.write(response.content)
print('Screenshot saved successfully.')
else:
print(f'Error: {response.status_code}')
Your complete code should look like this:
# import the required library
import requests
# specify the query parameters with a screenshot option
params = {
'url': 'https://www.scrapingcourse.com/antibot-challenge',
'apikey': '<YOUR_ZENROWS_API_KEY>',
'js_render': 'true',
'premium_proxy': 'true',
'return_screenshot': 'true'
}
# send the rquest and set the response type to stream
response = requests.get('https://api.zenrows.com/v1/', params=params, stream=True)
# check if the request was successful
if response.status_code == 200:
# save the response content as a screenshot
with open('anti-bot-page-screenshot.png', 'wb') as f:
f.write(response.content)
print('Screenshot saved successfully.')
else:
print(f'Error: {response.status_code}')
The code captures a screenshot of the protected page.
Congratulations! You used ZenRows to access a protected page and captured a screenshot.
Refer to our official documentation to learn more.
Conclusion
While Playwright provides basic screenshot capabilities, it's not sufficient for capturing screenshots on many sites at scale. Websites employ various anti-bot measures, such as browser fingerprinting, behavioral analysis, and request pattern monitoring.
ZenRows handles all these challenges automatically. It provides automatic proxy rotation, JavaScript rendering, CAPTCHA bypass, and everything you need to avoid getting blocked, making it the ideal choice for taking screenshots from any website. Try taking screenshots with ZenRows for free.