Skip to content

Make reportNG work both standalone and embedded #242

Open
@Zsar

Description

@Zsar

Is your feature request related to a problem? Please describe.
Currently generated ReportNG reports work as expected when embedded e.g. into TeamCity. They cannot be opened locally (by opening index.html directly in a browser).

It would be nice, if they could be.

Describe the solution you'd like
The current issue is that the protobuf model has to be fetched. When opening index.html without a server, this tries to fetch from local disk via file protocol, which (obviously) does not support CORS. Because the report may be embedded into e.g. TeamCity we do not want to disable that.

We can embed the model directly into the html file using script. If we used JSON instead of protobuf, we could then directly access the model as a JavaScript object as per the MDN documentation:

<!-- Generated by the server -->
<script id="data" type="application/json">{"userId":1234,"userName":"John Doe","memberSince":"2000-01-01T00:00:00.000Z"}</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

Presumably we could do the same with protobuf, but that invites trouble, because it's a binary file in a textual context, that is, we'll have to Base64 encode it back and forth, whereas we can use JSON as-is.

Describe alternatives you've considered

    • The most straightforward way to get this running is to enable the ReportNG report to be npm started. @martingrossmann has voiced disinclination (and I must admit, the straightforwardness mainly consists in "I'll hit it with my hammer").
      If we did this, we could include a file-loader in webpack to serve the protobuf model.
    • We might be able to disable the disagreeing checks. This would not meaningfully compromise the security - any client-served code is insecure by design - but it would be a both piece of arcana and a bad precedent. I'd rather avoid either.
    • Here is a list of alternatives to 1) from Stack Overflow.

Additional context

Firefox:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf file:///C:/Users/smby/Projekte/testerra/integration-tests/test-report/report-ng/model/execution. (Grund: CORS-Anfrage war nicht http).
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
    fetch file:///C:/Users/smby/Projekte/testerra/integration-tests/test-report/report-ng/953.e683909efc772369e8e2.bundle.js:2
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
    fetch file:///C:/Users/smby/Projekte/testerra/integration-tests/test-report/report-ng/953.e683909efc772369e8e2.bundle.js:2
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
    fetch file:///C:/Users/smby/Projekte/testerra/integration-tests/test-report/report-ng/953.e683909efc772369e8e2.bundle.js:2

Chrome:

Access to fetch at 'file:///C:/Users/smby/Projekte/testerra/integration-tests/test-report/report-ng/model/execution' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
GET file:///C:/Users/smby/Projekte/testerra/integration-tests/test-report/report-ng/model/execution net::ERR_FAILED
Uncaught (in promise) TypeError: Failed to fetch
    at 953.e683909efc772369e8e2.bundle.js:2:496684
Uncaught (in promise) TypeError: Failed to fetch
    at 953.e683909efc772369e8e2.bundle.js:2:496684

Metadata

Metadata

Assignees

No one assigned

    Labels

    ReportNGBugs and enhancements concerning Testerra ReportNGenhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions