Introduction:

In the ever-evolving landscape of web development, testing and automating web applications has become increasingly important. Whether you're building a user-facing web application or a complex API-driven site, ensuring that your website behaves as expected is crucial. This is where Playwright, a modern web automation framework, steps in. In this blog post, we will walk you through the process of getting started with Playwright Python—a powerful tool that allows developers and testers to automate browser interactions across multiple browsers like Chromium, Firefox, and WebKit. You'll learn how to set up Playwright, write your first automation script efficiently.

Note: This blog provides a step-by-step guide on how to get started with Playwright Python for web automation. Learn how to install Playwright, configure browser environments, and write your first Python script for browser automation, all while covering the basics you need to start testing web applications effectively.

Prerequisites:

Python 3.8 or above

Steps:

Step 1: Installing Playwright

First, we need to install playwright python package and install the necessary drivers.

Open your terminal and navigate to the preferred directory.

Create a virtual environment for your project.

python3 -m venv .venv
source .venv/bin/activate

3. Install Playwright using pip.

pip install playwright

4. After installation, download the browser binaries by running the following command.

playwright install

This command will install the drivers for Chromium, Firefox, and WebKit.

Step 2: Setting Up Playwright

Now that Playwright is installed, let's write a simple Python script to automate a basic web interaction.

For this tutorial, we are going to use the site https://webopt.ai and generate a basic SEO report and save the screenshot of that report.

Create a new Python script file (e.g., webopt_seo_report.py) and open it in your code editor.

Add the following code to launch a browser, navigate to a webpage, and take a screenshot:

from playwright.sync_api import sync_playwright


with sync_playwright() as playwright:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()

    # Navigate to the page
    page.goto("https://webopt.ai/")

sync_playwright(): This function initializes the Playwright session.

chromium.launch(headless=False): This launches the Chromium browser in a non-headless mode (meaning the browser window will be visible).

page.goto(): This navigates to the specified URL (https://webopt.ai/).

Save the script and run the file in your terminal.

python webopt_seo_report.py

You can see the webopt site is loaded as in the below screenshot.

Step 3: Filling Out the Search Field

Next, we want to fill out the search field in the page, so that we can generate the report of the website.

We use the locator get_by_placeholder() to locate the input field by its placeholder text. here our placeholder text is e.g. https://example.com

Then we fill it with the URL we want to analyze.

    search = page.get_by_placeholder("e.g. https://example.com")
    search.fill("https://episyche.com")
    page.wait_for_timeout(3000) # pauses execution for 3 seconds

While running the code, you can see the URL is inserted to the search field as below:

Step 4: Clicking the Button in search field

Now that we've entered the URL, the next step is to click the "search" button. We'll locate it using a CSS selector and ensure it's visible before clicking.

    search_button = page.locator(".min-w-\\[50px\\]")
    expect(search_button).to_be_visible()

    search_button.click()
    print("Search button clicked")

locator(): This method finds the button using a CSS selector.

expect().to_be_visible(): Ensures the button is visible before clicking, which is important to avoid errors in cases where the page hasn't fully loaded yet.

click(): Clicks the button to initiate the search.

Step 5: Waiting for an Image to Load

After clicking the button, we'll wait for an image to appear on the page as a sign that the page has fully loaded. We use the wait_for() method to wait for the image's visibility.

    image_locator = page.locator("img.shadow-md.border.mx-auto.rounded-xl")
    image_locator.wait_for(state="visible", timeout=60000)

wait_for(): Waits for the specified element (in this case, an image) to become visible. The timeout is set to 60 seconds.

Step 6: Taking the Screenshot

Finally, the SEO report of our site is loaded and then we capture a full-page screenshot.

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

screenshot(): Takes a screenshot of the entire page and saves it as "webopt_screenshot.png."

path specifies the path of the screenshot to be stored.

full_page=True specified to take screenshot of the entire page, rather than the visible screen.

The below is the screenshot saved.

Conclusion:

In this tutorial, you learned how to use Playwright Python to automate a web task. We explored launching the browser, filling out forms, interacting with elements, waiting for content to load, and capturing screenshots. With Playwright, these tasks can be easily expanded to more complex workflows, including handling multiple tabs, pop-ups, and dynamic content. Playwright is a versatile tool that can assist both in testing and in web scraping or automating routine web interactions.

Getting Started with Playwright Python