Can we add Html tag with add context

[vijaybernad]

Hi ,

Please tell me if we can add HTML tag with add context. I am also trying to add few colour code if the script passed .So can i add color code with add context.

Ex..addContext(this,'\u33[91m' + 'Pass');

What i am trying to do if the test is passed i want to add a color code and add into the report.

Please suggest if there is any way to add color or HTML tag in Mochawsome report.

[adamgruber]

Hi @vijaybernad! Unfortunately HTML is not currently supported in addContext and there are no plans to add support.

[vijaybernad]

Thanks for the update.

But if we can add that support it will make the report more powerful.can we request for this feature to be added in mochawesome.

[adamgruber]

@vijaybernad Are you just looking to modify the styles of the report? There are already indicators for passing/failing tests so I don't see what your example addContext(this,'\u33[91m' + 'Pass'); is adding. You could modify the report after it has been created and add your own styles.

Aside from that there is no way to define custom styles.

[vijaybernad]

@adamgruber what is trying is i am trying to add verification /assert. So when the assert passes i want to log that to report with a "tick" symbol .How can i achieve that.

[adamgruber]

The report already has a check next to passing tests:

[vijaybernad]

@adamgruber

Ok let me Explain what i am trying to achieve.

As show in the Diagram That is the code shown when we enable the "code" parameter.i Dont want the code to be enable to show every code in script .

What i am looking is when we do some verification like

addContext(this,(res.body._status.code).should.equal(200);) what i put i get is { "obj": 200, "anyOne": false, "negate": false, "params": { "operator": "to be", "expected": 200, "showDiff": true } }

But what i am looking

√ **** Verification : Check for Status Code of Get Funds**** : Expected = 200 Actual = 200 Assertion : PASS

To get like this that is why i am passing \u33[91m to get the tick symbol.If i can get the green background it will be really nice .

Please let me know how to modify the report after it is created or provide the copy as you have replied.

[adamgruber]

Hmm. I'm a bit confused on how you are using addContext. You are passing your assert directly into the method so that is why you are seeing the assert object. Typically the assert is done separately and addContext is used to display additional information.

[vijaybernad]

Hi @adamgruber ,

Yes addContext is used to add additional information but my concern is that can we add come Italic Font or some images like "passed" this will make to easily identify the information logged for verification.This is what is missing in the report i feel.

Kindly let me know how to add some Fonts to the or "Passed failed images" in the context.

[vijaybernad]

if we can add Color Style will be a great enhancement

[adamgruber]

Sorry, I don't currently have any plans to add extra styling options.

[vijaybernad]

Hi Adam,

It would be really good enhancement if the styling is supported . Do i need to log a ticket for this update.

i wont be using the assert object directly that was just an example i showed.(apologies to confuse)

what actually i need is to add a color background for the addcontext .If i am logging a successful message i want a green background,if the Message is failure i need red background.i will create a wrapper class for this color background,just need support from addcontext.

example: sucessfull(messageToDisplay){

addcontext (this, messageToDisplay ,'color-green') }

Already you have the background color in the report but the user is not having the capability to add color in addcontext. If we can have an option like this is will make the report even more beautiful and easy to differentiate between meaasges because in my methos i use lot addcontext to verify . .

Mochawesome is an awesome report to use .

Thank you Vijay

On Fri, Mar 23, 2018 at 5:40 AM, Adam Gruber [email protected] wrote:

Sorry, I don't currently have any plans to add extra styling options.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/adamgruber/mochawesome/issues/222#issuecomment-375498123, or mute the thread https://github.com/notifications/unsubscribe-auth/AaaDyztqRyZvWFw5AOzYnaSblZ4e2UCXks5thD2BgaJpZM4RRoA5 .

-- Kool Vj

[bharathmadishetti]

I agree with vijaybernad comments. This is kind of must have feature. For any automation report, we need a logging mechanism to show a particular step is passed or failed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dmstern]

There are already different types of context information that have their own representation in the html report:

• string: just display the string
• array: display the array as a js array
• url: render a link
• video: render a video player
• image: display the image

This is great. But how about either giving the user the possibility to define own context types with corresponding render function or, an other aproach, adding an additional context type function, where the user can render custom markup?

For example:

const tags = [
  "hello",
  "foo"
];

addContext(this, { title: "Tags", value: (tags) => tags.map(tag => `<span style="background-color: gray; text-transform: uppercase;  border-radius: 1em; height: 2em; padding: 4px 9px; display: inline-block; margin-right: .5em;">${tag}</span>`)});

Possible Result:

[saymowan]

This feature will be a great implementation. The HTML tag for details will provide a clean report, e.g. for integration testing so many request calls and information can be filled and an easy mode to check one by one.

🥇