How to check if element exists in Playwright?

by scrapecrow Apr 18, 2023

To check whether an HTML element is present on the page in Playwright and Python we can use the page.locator() or page.is_visible() functions:

with sync_playwright() as pw:
    browser = pw.chromium.launch(headless=False)
    context = browser.new_context(viewport={"width": 1920, "height": 1080})
    page = context.new_page()

    # go to url
    page.goto("https://scrapfly.io/")

    # use .locator() with CSS or XPath selectors:
    elements = page.locator("div.post-content")
    if elements.count() > 0:  
        print(f"found {elements.count()} elements")
        visible = sum([handle.is_visible() for handle in elements.element_handles()])
        print(f"out of which {visible} are visible")

Above, we use the .locator method to allow Playwright check if element exists. Based on the DOM element locating state, we decide how to proceed with the web scraping process.

The above code snippet is inteted to use with the Python playwright client. Here's how to check if an element exists on the page in the JavaScript Playwright client:

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch({ headless: false });
    const context = await browser.newContext({
        viewport: { width: 1920, height: 1080 }
    });
    const page = await context.newPage();

    // go to url
    await page.goto('https://scrapfly.io/');

    // use .locator() with CSS selectors:
    const elements = await page.locator('div.post-content');
    const count = await elements.count();
    if (count > 0) {
        console.log(`found ${count} elements`);
        let visible = 0;
        for (let i = 0; i < count; i++) {
            const handle = await elements.nth(i);
            if (await handle.isVisible()) {
                visible++;
            }
        }
        console.log(`out of which ${visible} are visible`);
    }

    await browser.close();
})();