azure-pipelines-tasks: Code Coverage view not rendering linked css / js files in artifact

Any updates on this?

Why is the issue closed? It is currently not working.

In the meantime, here is a little script that inlines the external CSS into the HTML pages generated by the coverage reporter. I run it as a post processing step in the build after the coverage has been collected.

https://gist.github.com/kohlikohl/ef77c751cfd3b731923ca74fec9443d5

Direct link to a relevant User Voice item: https://visualstudio.uservoice.com/forums/330519-visual-studio-team-services/suggestions/15926806-code-coverage-report-on-build-should-not-strip-sty

@nigurr any news about bringing styles back?

@nigurr We would also be interested in this feature.

I’ve got a Python 3.6 script that my team successfully uses for embedding CSS in code coverage reports. It depends on beautiful soup library for parsing HTML.

"""
Fixes VSTS coverage reports by inlining CSS files.
see https://github.com/Microsoft/vsts-tasks/issues/3027
Based on https://stackoverflow.com/a/23190429/7417402
"""
import os

import bs4

COVERAGE_REPORT_DIR = 'build/coverage/htmlcov/'
COVERAGE_REPORT = os.path.join(COVERAGE_REPORT_DIR, 'index.html')


def embed_css_in_html_file(html_file, css_dir):
    with open(html_file, 'r') as f:
        soup = bs4.BeautifulSoup(f.read(), "html.parser")

    stylesheets = soup.findAll("link", {"rel": "stylesheet"})
    for s in stylesheets:
        t = soup.new_tag('style')
        css_file = s["href"]
        print(f"found link to {css_file}")
        with open(os.path.join(css_dir, css_file), 'r') as f:
            c = bs4.element.NavigableString(f.read())
        t.insert(0, c)
        t['type'] = 'text/css'
        s.replaceWith(t)

    with open(html_file, 'w') as f:
        f.write(str(soup))


for file in os.listdir(COVERAGE_REPORT_DIR):
    if file.endswith(".html"):
        print(f"Embedding CSS in {file}")
        embed_css_in_html_file(os.path.join(COVERAGE_REPORT_DIR, file), COVERAGE_REPORT_DIR)

@brownbl1, I’ve just managed to use @kohlikohl’s gist successfully. It’s currently my workaround to this issue. I’ve told the file to execute after my Jest unit tests, which produces the Istanbul code coverage HTML reports.

The results after uploading via the Publish Code Coverage Results task in VSTS. I suppose it might be behaving differently for you if you’re on TFS or On Prem using an older version…

I’m also watching this. Without the CSS working, the viewer doesn’t make much sense to us.

We’re also seeing this still. Would love to have scripts and css working.

I’ve got a Python 3.6 script that my team successfully uses for embedding CSS in code coverage reports. It depends on beautiful soup library for parsing HTML.

"""
Fixes VSTS coverage reports by inlining CSS files.
see https://github.com/Microsoft/vsts-tasks/issues/3027
Based on https://stackoverflow.com/a/23190429/7417402
"""
import os

import bs4

COVERAGE_REPORT_DIR = 'build/coverage/htmlcov/'
COVERAGE_REPORT = os.path.join(COVERAGE_REPORT_DIR, 'index.html')


def embed_css_in_html_file(html_file, css_dir):
    with open(html_file, 'r') as f:
        soup = bs4.BeautifulSoup(f.read(), "html.parser")

    stylesheets = soup.findAll("link", {"rel": "stylesheet"})
    for s in stylesheets:
        t = soup.new_tag('style')
        css_file = s["href"]
        print(f"found link to {css_file}")
        with open(os.path.join(css_dir, css_file), 'r') as f:
            c = bs4.element.NavigableString(f.read())
        t.insert(0, c)
        t['type'] = 'text/css'
        s.replaceWith(t)

    with open(html_file, 'w') as f:
        f.write(str(soup))


for file in os.listdir(COVERAGE_REPORT_DIR):
    if file.endswith(".html"):
        print(f"Embedding CSS in {file}")
        embed_css_in_html_file(os.path.join(COVERAGE_REPORT_DIR, file), COVERAGE_REPORT_DIR)

This is great and worked well for me. Except the encoding had to be set on the output otherwise I ended up with encoding issues on the nbsp generated by coverage with open(html_file, 'w', encoding="UTF8") as f:

and just to make it easier for anyone else here is my yaml

- bash: |
    pip install beautifulsoup4
    python emded_css_for_coverage.py
  displayName: 'Embed css'
  workingDirectory: 'Toolbox'

- task: PublishCodeCoverageResults@1
  condition: succeededOrFailed()
  inputs:
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/coverage.xml'
    reportDirectory: '$(System.DefaultWorkingDirectory)/**/htmlcov'

IIRC, this limitation is by design to avoid various security issues. If you want to avoid duplicating the resources, then creating a custom extension may be a better option. However, if it’s a large amount of resources repeatedly copied then it may be an indicator that ADO is being used for something beyond ADO’s intent. I’ve seen much of such misuse at work, and it makes for problems down the road if the approach is not quickly changed to be done in a more measured way.

I followed this and it seemed to work really well 🥇 https://davidsekar.com/aspnetcore/code-coverage-html-reports-are-missing-styles-in-vsts

In Chrome the javascript files are also blocked. Blocked script execution in ‘https://xxxx.visualstudio.com/xxxxx-e44870bd4e9b/_apis/test/CodeCoverage/browse/2095227/Code Coverage Report_114/index.html’ because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set.

Using karma-coverage-istanbul-reporter https://github.com/mattlewis92/karma-coverage-istanbul-reporter