Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

image is not displaying on the report page #265

Open
p00j4 opened this issue Feb 10, 2020 · 19 comments
Open

image is not displaying on the report page #265

p00j4 opened this issue Feb 10, 2020 · 19 comments
Labels
bug This issue/PR relates to a bug. next-gen Candidate for the next-gen project

Comments

@p00j4
Copy link

p00j4 commented Feb 10, 2020

image
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

@p00j4 p00j4 changed the title image upload is not displaying on the report page image is not displaying on the report page Feb 10, 2020
@BeyondEvil
Copy link
Contributor

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

@BeyondEvil
Copy link
Contributor

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
Copy link
Author

p00j4 commented Feb 11, 2020

@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
Copy link
Contributor

BeyondEvil commented Feb 11, 2020

@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
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Contributor

dhalperi commented May 12, 2020

Hey, I think this is a bug introduced in 2.1.0 and results from a refactoring change: 588c41b

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 pytest-dev/pytest-selenium#237

@cdubwisdom
Copy link

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

@dhalperi
Copy link
Contributor

dhalperi commented Jan 14, 2022 via email

@BeyondEvil
Copy link
Contributor

Closing this for now.

@fbrandao
Copy link

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
Copy link
Contributor

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.

@BeyondEvil BeyondEvil reopened this Jan 20, 2022
@BeyondEvil BeyondEvil added the next-gen Candidate for the next-gen project label Jan 20, 2022
@fbrandao
Copy link

@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
Copy link
Contributor

BeyondEvil commented Jan 20, 2022

@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
Copy link

nileshpandey3 commented Mar 10, 2022

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

Screen Shot 2022-03-10 at 1 37 37 PM

@diaozheng1226
Copy link

diaozheng1226 commented Jul 16, 2023

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
Copy link

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This issue/PR relates to a bug. next-gen Candidate for the next-gen project
Projects
None yet
Development

No branches or pull requests

10 participants