[Feature] Add Support for Image Existence Verification in Expect Statements

[chri11g6]

Feature Request

I would like to propose the addition of a new capability in Playwright that allows users to use "expect" statements to verify the existence of an image on a webpage.

Use Case

As a user, I often need to verify the presence of specific images on a webpage as part of my testing scenarios. Currently, Playwright provides robust support for text-based assertions, but lacks a dedicated mechanism for image existence verification.

Example

// Example of the proposed syntax
expect(image_element).toExist();

Additional Information

This feature would enhance the versatility of Playwright, enabling users to conduct more comprehensive testing, especially when dealing with dynamic content or complex user interfaces.

Benefits

1. Improved test coverage by allowing image existence verification.
2. Streamlined and consistent syntax for asserting the presence of elements, including images.
3. Greater flexibility in handling diverse testing scenarios.

[yury-s]

What is image_element in your example? If it's just a locator then it'd be very similar to expect(locator).toBeVisible. If you want to pass a bitmap as one of the parameters but no locator, does it mean you don't know where in the DOM the image could be? If so, is there an actual testing scenario like that?

[chri11g6]

Yes, I use locator for image_element.
I have tried using toBeVisible() to test if there is an image on the page, but the test is passed even though an image is missing. as you can see here:

But I have a draft of my code here:

test('Test image', async ({ page }) => {
  await page.goto('http://127.0.0.1:5500/test_web/index.html');
  
  const imgs = await page.locator("img").all();

  imgs.forEach(img => {
    expect(img).toBeVisible();
  });
});

[yury-s]

You can wait for the image to load first with complete property, something like this:

  await page.locator('img').evaluate(async (img: HTMLImageElement) => {
    if (img.complete)
      return;
    await new Promise((resolve, reject) => {
      img.onload = resolve;
      img.onerror = reject;
    });
  });

Will that solve your problem?

[yury-s]

See also #6046

[chri11g6]

It's not because the image is large or takes a long time to load, but rather that the browser can't find the image due to an incorrect URL or the image has been deleted from the server, in short, HTTP-ERROR: 404 NOT FOUND. And that's what I'm trying to test.

[yury-s]

You can use toHaveScreenshot on the image element to check that expected image was actually loaded.

Also, if the load fails, onerror event will be fired on the image element, so you'll get an exception.

[yury-s]

Closing per the response above, feel free to open a new issue if it doesn't work.