Add test to verify image appears on frontend

[artemiomorales]

What?

This PR adds a test to confirm that the image block actually outputs the expected element in the frontend published post content.

Why?

While we've done a good job of testing to make sure the image behaves as expected in the editor, this adds extra verification so we can catch if the image block ever breaks.

This will be especially important as we look to extend the image functionality with a lightbox #50373

How?

It adds to a test to the image.spec.js

Testing Instructions

Run npm run test:e2e:playwright -- image.spec.js to test the single test file locally.

Testing Instructions for Keyboard

N/A

Screenshots or screencast

[gziolo]

Nice, this is a good start before we start covering other use cases with the lightbox enabled 😀

[artemiomorales]

@gziolo Thanks for the review! I added a check for the child img of the figure element and verified that its src attribute is correct. Note: For some reason, getByRole doesn't work when called on the figure element, so I used the locator instead.

[gziolo]

This looks good to start with.

It’s very likely that you need to set an alt attribute on the image for the licator to be able to find it. The img without the alt is not accessible.

[kevin940726]

LGTM 👍

[kevin940726]

It’s very likely that you need to set an alt attribute on the image for the licator to be able to find it.

I wonder why we don't automatically set an empty alt attribute if the user doesn't specify it?