Dusk: How to test background image rendered correcly in an element?

I had an input form which allows user to upload picture.

When an image is attached, its content will be put on a preview div element using inline css of background-image for user to be able to review it.

But how can I test it with Dusk?

I don't see any helpers or assert that make this happen.

tisuchi

3 years ago

Level 70

@quyle You can use the style method on the assertSeeIn or assertMissing in Dusk to test the background-image of an element. You can use the CSS selector of the element to target it and then use the style method to check if the background-image property has the expected value.

For example:

$browser->assertSeeIn('#preview-image', 'url("path/to/image.jpg")', ['style' => 'background-image']);

You can also use the assertSourceHas method to check if the image is present in the HTML source code:

$browser->assertSourceHas('path/to/image.jpg');

1 like

quyle

3 years ago

Level 1

Thanks for your reply. I've tried both and the assertSourceHas worked but assertSeeIn did not as it only received 2 params while in your example there are 3.

Please or to participate in this conversation.