Practicing Playwright: How to Detect Broken Images On Your Site

Butch Mayhew's LinkedIn Learning Course Playwright Essential Training: Abstractions, Fixtures, and Complex Scenarios has been a wonderful resource learning more about Playwright.

With this blog post, I will be walking through how Butch injects JavaScript into a test, in order to check if any elements in a shopping cart have any broken images.

• Playwright / Evaluating JavaScript: https://playwright.dev/docs/evaluating 
• Butch Mayhew's companion GitHub site on LinkedIn Learning's GitHub page.
• Butch's Resources File: RESOURCES.MD
• Site under test: Practice Software Testing: https://practicesoftwaretesting.com
• Practice Software Testing Website, With Bugs: https://with-bugs.practicesoftwaretesting.com

Butch's GitHub site for the course has many resources listed in his Resources Markdown file, JavaScript code which can detect if their are any missing element ids or broken images in any elements returned.

Find Broken Images with JavaScript 

RESOURCES.md / Injecting JavaScript in Playwright

Array.from(document.querySelectorAll("img"))
  .filter((img) => img.naturalWidth === 0 || img.naturalHeight === 0)
  .map((img) => img.src);

Let's examine this code found on Butch Mayhew's RESOURCES.MD file: 

document.querySelectorAll("img"): The JavaScript Document interface, "represents any web page loaded in the browser, and serves as an entry point into the web page's content" according to the Mozilla Developer Network. 

The Document interface also includes a method called .querySelectorAll() [ See Mozilla API ] which returns a list of the HTML document's elements that match the designated selector which, in this case is an "img" tag. This returns a static NodeList, a snapshot collection of nodes it sees at that time. 

Array.from will convert the NodeList into a JavaScript array, so we can then use array methods such as filter, which creates a new array from the results without changing the original array. 

We are filtering to see if there are images which do not have a width or ( || ) height, meaning they are broken images. img.naturalWidth is a read-only HTMLImageElement that returns the original width of an image in pixels.  [ See MDN entry ]  

The code will loop through the filtered array, find the list of broken images, then extract a list of URLs from the source code, pointing to the broken images, if any. 

Playwright Evaluating JavaScript

"Playwright scripts run in your Playwright environment. Your page scripts run in the browser page environment. Those environments don't intersect, they are running in different virtual machines in different processes and even potentially on different computers.

"The page.evaluate() API can run a JavaScript function in the context of the web page and bring results back to the Playwright environment". - Playwright Docs / Evaluating JavaScript

This JavaScript code Butch came up with to detect broken images can be injected into his test with JavaScript evaluations. 

test("check for broken images", async ({ page }) => {
    // await page.goto("https://with-bugs.practicesoftwaretesting.com/");

    const brokenImages = await page.evaluate(() => {
      return Array.from(document.querySelectorAll("img"))
        .filter((img) => img.naturalWidth === 0 || img.naturalHeight === 0)
        .map((img) => img.src);
    });
    expect(
      brokenImages.length,
      `Broken Images: ${brokenImages.toString()}`
    ).toBe(0);
  });

Although practicesoftwaretesting.com does not have broken images, this test site does offer a version which does: https://with-bugs.practicesoftwaretesting.com/. 

Ideally, we want the number of broken images to be zero. If we wanted to catch the broken images on the purposely broken test site, following Butch's code:

• Uncomment out the With Bugs version of the site, so we can go to that page for this test.
• Declare a new constant, brokenImages, which will list the broken images it detects.
• The JavaScript injection to actually find the broken images will be evaluated with a result returned. 
• We will expect the number of brokenImages to be zero. If not, we are going to return the web addresses of broken images that it found. 

So, that's how you create a Playwright test that detects broken images!

Happy Testing!

-T.J. Maher
Software Engineer in Test

BlueSky | YouTube | LinkedIn | Articles