Answer

Extracting Element Styles with Playwright

You can extract styles from elements using Playwright's ElementHandle class. This class represents an in-page DOM element and provides methods to interact with it.

Using $eval()

The $eval() method finds an element matching the specified selector in the ElementHandle's subtree. Here's how you can use it to get the background color of a div with id "myDiv":

const myDiv = await page.$('#myDiv');
const bgColor = await myDiv.$eval('div', el => el.style.backgroundColor);

Using $$eval()

The $$eval() method finds all elements matching the specified selector in the ElementHandle's subtree. You can use it to find all paragraphs on your webpage with font-size greater than 16px:

const paragraphs = await page.$$('[style*="font-size"]');
const largeParagraphs = await Promise.all(
  paragraphs.map(async (p) => {
    const fontSize = parseInt(await p.getProperty('fontSize'));
    if (fontSize > 16) return p;
  })
);

In this example, we're using $$() to return all paragraph tags on our webpage that have inline styles containing "font-size". We then loop through each paragraph tag, extract their font size property values using getProperty(), and return only those which are greater than 16px.

With Playwright's API, you have multiple ways to obtain styles from webpages depending on what you need to extract. For more tips on efficient Playwright test scripts, check out this blog post.