I am trying to send the html content of the file (report.html in the pic below) and this file opens up in browser perfectly as the reference of css works fine when opening it from the folder. But when I am trying to send this file as html body using nodemailer it just loses all its styling and in email I am just receiving a plain text email just like below.
Can someone tell me how to tell nodemailer that all the css are present of this file is present in the html-reports folder and it should appear in the email body same as it opens up in the browser.
If anyone using WDIO and sharing any such information over email then please share this info with me.
I am using latest version of the WDIO btw viz. V7.7 (cucumber framework)
Basically I want to achieve below use case -
After running the test html report comes of all the cucumber scenario pass/fail/skipped along with error trace
I want to share this info in email body and not as attachment and my email body should be properly styled
Thanks much in advance !
To achieve the results that you mentioned you have to use internal CSS, this is placed in the head section of your report.html, within a style element.
So where you have the link to your external CSS you want to replace that with the actual CSS that is in the report-styles.css and place it in a style element.
report-styles.css:
h1 {
color: blue;
}
p {
color: red;
}
report.html before:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="report-styles.css">
</head>
<body>
<div>Your report</div>
</body>
</html>
Replace the CSS link with the actual CSS in the file
report.html after:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>
<body>
<div>Your report</div>
</body>
</html>
Then you can add the report.html to your email and all the styles will be there without having to reference that external file.
This will require some additional coding on your end after your report is completed and before you send your email.
You can use something like gulp to do the replacement for you or write your own code for the replacement.
gulp.js example:
var gulp = require('gulp');
var replace = require('gulp-replace');
var fs = require('fs');
function getCSSFilename(linkTag) {
var hrefValue = /href\=\"([A-Za-z0-9/._]*)\"/g;
var cssFilename = linkTag.match(hrefValue);
cssFilename = cssFilename[0].replace("href=\"", "").replace("\"", "");
return cssFilename;
}
gulp.task('inject-styles', function () {
return gulp.src("./report/report.html")
.pipe(replace(/<link rel="stylesheet" href="[^"]*"*>/g, function(linkTag) {
var style = fs.readFileSync(`.${getCSSFilename(linkTag)}`, 'utf8');
return '<style>\n' + style + '\t</style>';
}))
.pipe(gulp.dest('./report'));
});
Hope this is helpful enough to let you know how you achieve what you described.
I have a document I create with html
const doc1 = new docusign.Document();
doc1.documentBase64 = Buffer.from(htmlPage(args.htmlArgs)).toString('base64');
doc1.name = args.documentName;
doc1.fileExtension = 'html';
The htmlPage method just returns a html string.
I want to specify font type and size for the document.
I have been looking through docusign documentation.
How would I set the font type and size?
You should be able to set the font size and type inside the HTML page itself. The buffer that you just create, includes the payload for your HTML page - any configuration you want on that page, including font, should be set in that page.
You can refere to this example where the CSS is included in the header of the HTML doc.
https://github.com/docusign/code-examples-node/blob/master/lib/eSignature/eg002SigningViaEmail.js#L257
<h1 style="font-family: 'Trebuchet MS', Helvetica, sans-serif;
color: darkblue;margin-bottom: 0;">World Wide Corp</h1>
<h2 style="font-family: 'Trebuchet MS', Helvetica, sans-serif;
I have this code currently, :
doctype html
html
head
title= title
style.
body {
font-family: Verdana;
font-size: 13px;
background: #42f495
}
body
h1 Welcome!
h2 Please Wait
p= sq
I want to align paragraph to center but not getting how to do it using Pug.
First, you need to indent all of the tags to be further in than the body tag to make this all work properly.
To assign a style to a paragraph do this:
p(style="text-align:center;")
Here are two different ways to assign a css class to a paragraph (they will produce the exact same results):
style.
.cssClassExample { text-align:center; }
p.cssClassExample
p(class="cssClassExample")
If you want to assign a class based on a pug variable do this:
- var cssClassVariable = "myClass"
p(class= cssClassVariable)
I have developed a chrome extension which is supposed to have a scroll bar if the content in the popup is more than the specified height to the body of popup .
I am adding the contents of my popup.html
<!DOCTYPE html>
<head>
<title>Compare Hatke</title>
<script type='text/javascript' src='popup.js'>
</script>
<style>
body {
min-width:357px;
min-height: 500px;
overflow-x:hidden;
overflow-y:auto;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
</style>
</head>
<body>
Extension developed by Prashant Singh
</body>
</html>
Also the JS which is injecting data to the popup file
var len = currentArray.length;
var string = "";
for(i=0;i<len;i++){
if(tab.id==currentArray[i].tabID){
string += "<img src='" + currentArray[i].image + "' height='20px' max-width='100px'> " + currentArray[i].prod +"<br>";
}
}
document.write(string);
What could be the possible issue ? I am not getting scroll bar even if the data to be shown is much much greater that can be shown in one view.
Any explanation would be appreciated. Thanks !
Added a div in the popup.html page
<body>
<div id='showData'>
Extension developed by Prashant Singh
</div>
</body>
And replaced document.write by document.getElementById('showData').innerHTML and it worked in a flash. Any explanation. Why previous one was not working ?
Is it possible to write a program that masks the set of fonts installed on the computer, so the font list would appear "plain vanilla" and would not be of much value in creating a ~unique fingerprint? https://panopticlick.eff.org/
There is probably some support for that in some browsers, but with any browser you could intercept the winapi calls for enumerating the font list.
Basically you write a dll that will be loaded into the browser process, and then it will intercept the calls the browser will make to the OS when it will enumerate fonts. Just lookup which functions in windows are used for enumerating fonts, and fake them in your dll. (that could be some work though, because you will have to rewrite the font enumerating logic).
Also, some of the browsers may very well just read the registry to enumerate fonts, and not use the specialized fontfunctions, in that case you will have to intercept the registry-winapi functions, and make sure they report the font list that you want.
For loading your dll into the target process you could use Windows hooks, or use a .exe file editor to add your dll to import table of the browser's exe file. There is also a special place in the registry where if you add a dll there, it will be loaded to every process in the system. (then you'll have to check for browser process, and only intercept api calls then, so that not every program on your system will get the bogus font list).
Also, it is possible that a browser will run some plugin, or activex control, or java, or something like that in another process (chrome runs every tab in different processes for example), so I would check every process' parent, and if you see that it has been started by the browser, intercept the font list in that process also. That way, the target webpage won't be able to get the real font list through flash, plugins, java, or anything.
A good start to intercepting winapi calls can be found here: http://www.codeproject.com/KB/system/InterceptWinAPICalls.aspx
So this is a reliable way to do this, and although it can't be done in an hour, it's not overly complicated either.
Of course, this will not only make your font list bogus, it will also make the browser not see and be able to display the fonts that are not in the list.
And this all is valid for Windows of course, but there are surely similair ways to do this on other OSes.
Also, worth to note, I don't think a webpage can read the font list if you have disabled javascript and plugins(flash).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Font detector</title>
<style type="text/css" media="screen">
#font_detector_box{ visibility: hidden; }
#font_detector_box span.font{ padding: 0px; margin: 0px; border: none; font-size: 10px; letter-spacing: 1px; }
</style>
</head>
<body>
<h1>Font Detection Page</h1>
<p>This page is a sample for font detection tecniques</p>
<h2>List of fonts installed on your machine</h2>
<span id="font_list_display">
</span>
<!-- Invisible div -->
<div id="font_detector_box">
<span class="font family_Arial" style="font-family: Arial, Verdana !important">mmm</span>
<span class="font family_Comics_Sans_MS" style="font-family: Comic Sans MS, Arial !important">mmm</span>
<span class="font family_Georgia" style="font-family: Georgia, Arial !important">mmm</span>
<span class="font family_Helvetica" style="font-family: Helvetica, Verdana !important">mmm</span>
<span class="font family_Verdana" style="font-family: Verdana, Arial !important">mmm</span>
<span class="font family_Times_New_Roman" style="font-family: Times New Roman, Arial !important">mmm</span>
</div>
</body>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
var fontMeasures = new Array( );
//Web safe
fontMeasures["Arial"] = new Array( "30px", "13px" );
fontMeasures["Comics_Sans_MS"] = new Array( "27px" , "14px" );
fontMeasures["Georgia"] = new Array( "33px" , "13px" );
fontMeasures["Helvetica"] = new Array( "30px" , "13px" );
fontMeasures["Verdana"] = new Array( "36px" , "12px" );
fontMeasures["Times_New_Roman"] = new Array( "27px" , "12px" );
var msg = "";
$( ".font" , "#font_detector_box" ).each( function( ){
var fontFamily = $( this ).attr( "class" ).toString( ).replace( "font " , "" ).replace( "family_" , "" );
var width = $( this ).css( "width" );
var height = $( this ).css( "height" );
//alert( width + height );
if( fontMeasures[fontFamily][0] === width && fontMeasures[fontFamily][1] === height ){
var family = fontFamily.replace( /_/g , " " );
msg += '<span class="font-family: '+ family + ';">' + family + '</span> <br/>';
}
});
$( "#font_list_display" ).html( msg );
</script>
</html>