[Question] How to locate ALL elements by font-family

[1mzino]

Hi, I'm fairly new to Playwright.

I have a Playwright script that iterates over a list of URLs. The test is ran in parallel with other tests on different breakpoints and takes a full-page screenshot.

Essentially, the script is being used to identify where a certain font is being used and to highlight that element by changing background color:

    await page.evaluate(() => {
      document.querySelectorAll("*").forEach((el) => {
        if (
          getComputedStyle(el).fontFamily.includes("Telesans Agate") ||
          getComputedStyle(el).fontFamily.includes("Telesans Text") ||
          getComputedStyle(el).fontFamily.includes("Telesans-Text")
        ) {
          el.style.backgroundColor = "red";
        }
      });
    });

I want to learn how to locate and select all elements on the page, and then filter by 'font-family' so I can scrape other properties from these elements such as font-size, font-weight and save this data to a markdown file.

[yury-s]

There is no builtin mechanism to filter by computed style properties but the approach you use should work:

    const styles = await page.evaluate(() => {
      return Array.from(document.querySelectorAll("*")).filter(el =>
          getComputedStyle(el).fontFamily.includes("Telesans Agate") ||
          getComputedStyle(el).fontFamily.includes("Telesans Text") ||
          getComputedStyle(el).fontFamily.includes("Telesans-Text")).map(e => {
             return {
                size: getComputedStyle(e)[font-size],
                weight:  getComputedStyle(e)[font-weight]
             };
          });
    });

Does this work for you?

[yury-s]

Closing as part of the triage process since it seemed stale. Please create a new issue if you still face the issue.