Playwright >> Basic Usage

Table of Contents

Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

In this article, we will go through basic usage of Playwright.

Install Playwright for Python

Now according to the official documentation of Playwright, there are four language versions of Playwright. (Python, Node.js, Java, .NET) Here we will install the Python version of Playwright.

# Install Playwright using pip
pip install Playwright

# Install browsers
Playwright install

Record code like Excel VBA

When we begin learning playwright, we were not familiar with the usage of playwright and often had no idea how to start. But don’t worry, playwright provides developers with a convenient command of recording code. It can generate complete and clear code through simple browser operation. Beginners can learn a lot from it.

# Generate code when browser wikipedia.org
playwright codegen wikipedia.org

# If we want to record authentication infomation and reuse it later, we can run codegen with --save-storage to save cookies and localStorage at the end of code. 
playwright codegen --save-storage=auth.json

# Next time we can use recorded authentication information to operate website.
playwright open --load-storage=auth.json somewebsite.com

Now we run code generation command in command line. For example, we open wikipedia.org site and input Playwright in search bar and press Enter key.

Below is recording screen capture. Left side is chromium browser, and right side is recording window.

Below is generated code.

from playwright.sync_api import Playwright, sync_playwright


def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()

    # Open new page
    page = context.new_page()

    # Go to https://www.wikipedia.org/
    page.goto("https://www.wikipedia.org/")

    # Click input[name="search"]
    page.click("input[name=\"search\"]")

    # Fill input[name="search"]
    page.fill("input[name=\"search\"]", "playwright")

    # Press Enter
    page.press("input[name=\"search\"]", "Enter")
    # assert page.url == "https://ja.wikipedia.org/w/index.php?title=%E7%89%B9%E5%88%A5:%E6%A4%9C%E7%B4%A2&search=playwright&go=Go&ns0=1"

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright)

Let’s explain main part of generated code in detail.

playwright.chromium.launch means launching a chromium browser, headless=False means chromium browser will display and be visible. if headless=True is set browser will not display.

browser = playwright.chromium.launch(headless=False)

A BrowserContext is an isolated incognito-alike session within a browser instance. Browser contexts are fast and cheap to create. We recommend running each test scenario in its own new Browser context, so that the browser state is isolated between the tests.

context = browser.new_context()

new_page will open a new page in browser. If we want to download something from a website, we need to specify accept_downloads=True. The default page window size is 1280x720, if we want to change viewport size we can use set_viewport_size method of page.

# Open new page
page = context.new_page()
# download something from a website
page = context.new_page(accept_downloads=True)
# change viewport size
page.set_viewport_size({"width": 1920, "height": 1080})

We can use goto method of page to open a website. The default timeout is 30 seconds. We can use timeout option of goto to change timeout value. The unit of timeout option is milliseconds.

# Timeout error occurs when more than one minute has elapsed
page.goto("https://www.wikipedia.org/", timeout=60000)

If we want to click some element in page, we can use click method of page. Similarly we can change timeout value by specifying the timeout option.

# Click search input field
page.click("input[name=\"search\"]")

When we need to input something in input field, we can use fill method of page.

# Input something in input field
page.fill("input[name=\"search\"]", "playwright")

When finish input, we can use press method and key is Enter.

# Press Enter
page.press("input[name=\"search\"]", "Enter")

when all operaions finish, we need to release resources. context.close() will close all the pages that belong to the browser context. browser.close() will clear all created contexts belonging to this browser and disconnects from the browser server.

# close browser context.
context.close()
# close browser server.
browser.close()

Take a page screenshot

We can use screenshot method of page to take screenshot of the page.

The code below will take screenshot of current page and save it as png image to current directory.

page.screenshot(path="myscreenshot.png")

We can set full_page option to True to takes a screenshot of the full scrollable page, instead of the currently visible viewport.

page.screenshot(path="myscreenshot2.png", full_page=True)

Use Playwright in async way

The code shown in above runs Playwright in a synchronized way by using sync_playwright. Sometimes we need run it in async mode. We can use asyncio and async API of Playwright.

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as ap:
        browser = await ap.chromium.launch()
        page = await browser.new_page()
        await page.goto("https://www.wikipedia.org/")
        # Get the title of page
        print(await page.title())
        await browser.close()

asyncio.run(main())