image is not displaying on the report page

[p00j4]

The image link shown on the page is relative to localhost, which shows 404 http://localhost:63342/screenshots/my_screenshot.png

To Reproduce keep a png file named my_screenshot.png in the root of project contents of conftest.py

import os

@pytest.mark.hookwrapper
def pytest_runtest_makereport(item, call):
    outcome = yield
    report = outcome.get_result()
    pytest_html = item.config.pluginmanager.getplugin('html')
    extra = getattr(report, 'extra', [])

    main_script_dir = os.path.dirname(__file__)
    rel_path = "screenshots/my_screenshot.png" #hardcoded image file temporarily #TODO to get from driver
    image = pytest_html.extras.image(os.path.join(main_script_dir, rel_path))
    extra.append(image)
    report.extra = extra

Run with pytest --html=report.html Also have tried with --self-contained-html

[BeyondEvil]

What's the use-case? Why are you trying to add a screenshot manually?

[BeyondEvil]

FWIW, it works for me. Both with and without --self-contained-html

What versions are you using of python, pytest and plugins? What OS?

[p00j4]

@BeyondEvil thanks for quick response. Use-case: Not having UI tests right now, and wanted to test the screenshot capture in the framework design phase. Is it not supposed to work this way, does it need to be converted to base64 (tried that too but ran in other code errors on adding to extra, so chucked)

Version info my bad missed last time

Python 3.7.3
pytest               5.3.2     
pytest-check         0.3.6     
pytest-custom-report 1.0.1     
pytest-forked        1.1.3     
pytest-html          2.0.1     
pytest-metadata      1.8.0     
pytest-runner        5.2       
pytest-xdist         1.31.0    

[BeyondEvil]

@p00j4 No worries.

Like I said, I can't repro, so not sure what's going on. I'll try again with your exact environment.

But yes, assets needs to be B64 (see here), but that should be handled by pytest_html.extras.image

[ice7mayu]

Try inserting extra HTML with your image relative path embed, like this:

extra.append(pytest_html.extras.html(
     f'<div class="image"><img src="img/{rel_path}"/></div>')
)

[christiansandberg]

I can’t find any documentation on what “content” you can add. I had to look at the code to figure out it should be Base64 encoded. Also if you use relative path then the report file must be in the current working directory as the href is not adjusted based on the path to the report.

[BeyondEvil]

I can’t find any documentation on what “content” you can add. I had to look at the code to figure out it should be Base64 encoded. Also if you use relative path then the report file must be in the current working directory as the href is not adjusted based on the path to the report.

Good catch @christiansandberg !

Mind opening a separate issue for improving the docs? 🙏

[dhalperi]

Hey, I think this is a bug introduced in 2.1.0 and results from a refactoring change: https://github.com/pytest-dev/pytest-html/commit/588c41b33f2ca8884c65d3de6ccb4ade55a44bd2

Before, the html.img() function is run on the created asset. After, the analogous raw(base_extra_string.format is not run on the created asset.

For more info, see https://github.com/pytest-dev/pytest-selenium/issues/237

[cdubwisdom]

Is there a workaround or a known fix for this? I am currently experiencing it today.

[dhalperi]

If you have the same issue, it was fully resolved for us once my pytest-selenium bug was fixed.

This one should be closed imo.

On Fri, Jan 14, 2022 at 09:32 Colin Wisdom @.***> wrote:

Is there a workaround or a known fix for this? I am currently experiencing it today.

— Reply to this email directly, view it on GitHub https://github.com/pytest-dev/pytest-html/issues/265#issuecomment-1013319778, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEAQT5VNEB335VDE3SVFSDUWBM2ZANCNFSM4KSORFEA . You are receiving this because you commented.Message ID: @.***>

[BeyondEvil]

Closing this for now.

[fbrandao]

This is still not fixed. It might be fixed when you use pytest-selenium but if you use the general selenium package this problem is still happening to me. I have tried with multiple combination of versions of pytest and pytest-html and this issue still occurs. [packages] pytest-xdist = "*" geckodriver-autoinstaller = "*" chromedriver-autoinstaller = "*" requests = "*" selenium = "*" pytest = "==6.2.1" pytest-html = "==2.1.1" No matter the versions there is never a screenshot being put into the report.

[BeyondEvil]

This is still not fixed. It might be fixed when you use pytest-selenium but if you use the general selenium package this problem is still happening to me. I have tried with multiple combination of versions of pytest and pytest-html and this issue still occurs. [packages] pytest-xdist = "*" geckodriver-autoinstaller = "*" chromedriver-autoinstaller = "*" requests = "*" selenium = "*" pytest = "==6.2.1" pytest-html = "==2.1.1" No matter the versions there is never a screenshot being put into the report.

Yeah, I've since been able to reproduce it myself. It's a bit tricky to fix.

1. For the "regular" report, we either need the absolute path or the path passed to the report needs to be relative to the path where the report is created. Alternatively we need to copy the file there.
2. For the self-contained, we need to read and base64 encode it.

This is definitely going to be solved in next-gen and then back-ported to the current one.

[fbrandao]

@BeyondEvil thanks for reopening this. Do you know if there is any work around for this or any combination of versions that solves this problem?

[BeyondEvil]

@BeyondEvil thanks for reopening this. Do you know if there is any work around for this or any combination of versions that solves this problem?

As far as I can tell, this has never worked/been supported.

For a workaround you have (at least) two options.

1. Give the full path to the file(s), eg. file:///path/to/file.png
2. Copy the file so that the path is relative to where the .html-file ends up.

For example:

If you run with:

pytest --html reports/report.html

and you have

rel_path = "screenshots/my_screenshot.png"

Then the file needs to be copied to reports/screenshots/my_screenshot.png

I think option 1 is the best, cause you can handle that directly in code:

import os
os.path.abspath("screenshots/my_screenshot.png")

For self-contained, the same applies. This is however going to be different in next-gen, where any extra images (on disk) will be base64 encoded.

Hope that helps!

[nileshpandey3]

I am having the same issue [as the OP] where the image in the test report is broken: screenshot folder is in my root Run command: pytest --html report.html pytest version: 7.0.1 pytest-playwright version == 0.2.3 conftest.py file contents

@pytest.hookimpl(hookwrapper=True)
def pytest_runtest_makereport(item):
    pytest_html = item.config.pluginmanager.getplugin("html")
    outcome = yield
    screen_file = ''
    report = outcome.get_result()
    extra = getattr(report, "extra", [])
    if report.when == "call" or report.when == "setup":
        if report.failed and "page" in item.funcargs:
            page = item.funcargs["page"]
            screenshot_dir = "/screenshots"
            screen_file = (screenshot_dir + f"{slugify(item.nodeid)}.png")
            page.screenshot(path=screen_file, full_page=True)
        if report.failed:
            # add the screenshots to the html report
            extra.append(pytest_html.extras.png(screen_file))
        report.extra = extra

[diaozheng1226]

I solved the problem temporarily with a recode

import base64 `

    if (report.skipped and xfail) or (report.failed and not xfail):

        with open(screen_file, "rb") as image_file:
            encoded_string = base64.b64encode(image_file.read()).decode()

        extra.append(pytest_html.extras.png(encoded_string))

`

[cdubwisdom]

For anyone still facing this issue, I figured out how to fix it. Check out this stack overflow post for details

https://stackoverflow.com/questions/70761764/pytest-html-not-displaying-image/70763446#70763446

[BeyondEvil]

For anyone still facing this issue, I figured out how to fix it. Check out this stack overflow post for details

https://stackoverflow.com/questions/70761764/pytest-html-not-displaying-image/70763446#70763446

Someone should add that to the docs.