How to render perfect copy of the DOM tree











up vote
0
down vote

favorite












I have tried with Chrome and Puppter following:




  1. Wait long enough for all images to be loaded (as I had my browser opened it was easy step)

  2. Make a copy of the DOM tree with document.cloneNode(true)

  3. Filter out javascript (as I want static view only)

  4. Finally return copy with XMLSerializer with serializeToString as a string an save as .html file.


The browser viewport was set the same size as the one from which the copy was made. However rendered page isn't acceptable some images are visible below others, rendered view is not the same.



Any idea why this is happening? I thought I had a perfect DOM copy.






javascript google-chrome browser google-chrome-devtools puppeteer







share|improve this question


















  • 1




    Sounds like you didn't embed CSS into the file, in which case they may fail to load if the remote server has CORS restriction (also causes the failure with the images). Either 1) save to MHTML or 2) manually embed all CSS and images e.g. via data URI.
    – wOxxOm
    2 days ago

















up vote
0
down vote

favorite












I have tried with Chrome and Puppter following:




  1. Wait long enough for all images to be loaded (as I had my browser opened it was easy step)

  2. Make a copy of the DOM tree with document.cloneNode(true)

  3. Filter out javascript (as I want static view only)

  4. Finally return copy with XMLSerializer with serializeToString as a string an save as .html file.


The browser viewport was set the same size as the one from which the copy was made. However rendered page isn't acceptable some images are visible below others, rendered view is not the same.



Any idea why this is happening? I thought I had a perfect DOM copy.






javascript google-chrome browser google-chrome-devtools puppeteer







share|improve this question


















  • 1




    Sounds like you didn't embed CSS into the file, in which case they may fail to load if the remote server has CORS restriction (also causes the failure with the images). Either 1) save to MHTML or 2) manually embed all CSS and images e.g. via data URI.
    – wOxxOm
    2 days ago















up vote
0
down vote

favorite









up vote
0
down vote

favorite











I have tried with Chrome and Puppter following:




  1. Wait long enough for all images to be loaded (as I had my browser opened it was easy step)

  2. Make a copy of the DOM tree with document.cloneNode(true)

  3. Filter out javascript (as I want static view only)

  4. Finally return copy with XMLSerializer with serializeToString as a string an save as .html file.


The browser viewport was set the same size as the one from which the copy was made. However rendered page isn't acceptable some images are visible below others, rendered view is not the same.



Any idea why this is happening? I thought I had a perfect DOM copy.






javascript google-chrome browser google-chrome-devtools puppeteer







share|improve this question













I have tried with Chrome and Puppter following:




  1. Wait long enough for all images to be loaded (as I had my browser opened it was easy step)

  2. Make a copy of the DOM tree with document.cloneNode(true)

  3. Filter out javascript (as I want static view only)

  4. Finally return copy with XMLSerializer with serializeToString as a string an save as .html file.


The browser viewport was set the same size as the one from which the copy was made. However rendered page isn't acceptable some images are visible below others, rendered view is not the same.



Any idea why this is happening? I thought I had a perfect DOM copy.






javascript google-chrome browser google-chrome-devtools puppeteer




javascript google-chrome browser google-chrome-devtools puppeteer






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked 2 days ago









user3918502

1




1








  • 1




    Sounds like you didn't embed CSS into the file, in which case they may fail to load if the remote server has CORS restriction (also causes the failure with the images). Either 1) save to MHTML or 2) manually embed all CSS and images e.g. via data URI.
    – wOxxOm
    2 days ago
















  • 1




    Sounds like you didn't embed CSS into the file, in which case they may fail to load if the remote server has CORS restriction (also causes the failure with the images). Either 1) save to MHTML or 2) manually embed all CSS and images e.g. via data URI.
    – wOxxOm
    2 days ago










1




1




Sounds like you didn't embed CSS into the file, in which case they may fail to load if the remote server has CORS restriction (also causes the failure with the images). Either 1) save to MHTML or 2) manually embed all CSS and images e.g. via data URI.
– wOxxOm
2 days ago






Sounds like you didn't embed CSS into the file, in which case they may fail to load if the remote server has CORS restriction (also causes the failure with the images). Either 1) save to MHTML or 2) manually embed all CSS and images e.g. via data URI.
– wOxxOm
2 days ago



















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














 

draft saved


draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372943%2fhow-to-render-perfect-copy-of-the-dom-tree%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes
















 

draft saved


draft discarded



















































 


draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372943%2fhow-to-render-perfect-copy-of-the-dom-tree%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Volksrepublik China

Image
Dieser Artikel befasst sich mit der Volksrepublik China und ist nicht zu verwechseln mit der Republik China (Taiwan). Siehe auch China (Begriffsklärung). Dieser Artikel wurde aufgrund von inhaltlichen Mängeln auf der Qualitätssicherungsseite der Redaktion Ostasien eingetragen. Dies geschieht, um die Qualität der Artikel aus dem Themengebiet Ostasien auf ein akzeptables Niveau zu bringen. Dabei werden Artikel gelöscht, die nicht signifikant verbessert werden können. Bitte hilf mit, die inhaltlichen Mängel dieses Artikels zu beseitigen, und beteilige dich bitte an der Diskussion ! 中华人民共和国 Zhōnghuá Rénmín Gònghéguó Volksrepublik China Flagge Emblem Amtssprache Chinesisch (Hochchinesisch) und anerkannte Regionalsprachen 1 Hauptstadt Peking Staatsform Republik Regierungssystem Sozialistisches Einparteiensystem Staatsoberhaupt Staatspräsident Xi Jinping Regierungschef Ministerpräsident Li Keqiang Fläc...
Read more

How to test boost logger output in unit testing?

Image
up vote 1 down vote favorite My application uses BOOST_LOG_TRIVIAL to log messages. I thought it's good to check in test (gtest) that correct messages are written there in given scenarios. Is there a way to somehow access what was written there after code was called? Or does it first have to be mocked in some way? I have googled a lot for this and haven't found any instructions, so either I am asking wrong questions or no one thinks it should be done. c++ logging boost googletest boost-log share | improve this question edited yesterday ...
Read more

Write to the output between two pipeline

Image
up vote 1 down vote favorite I'm trying to write to the output (echo) within two pipe to have a trace of what I'm doing but I have an error. Get-ChildItem $path -Recurse | Where-Object { $_.Name -match '.+?.log.(d{4})-(d{2})-(d{2})$' -and $_.LastWriteTime -lt $deleteDate } | Write-Output "deleting file" -PassThru | Remove-Item but I have this error : Write-Output : The input object cannot be bound to any parameters for the command either because the command does not take pipeline input or the input and its properties do not match any of the parameters that take pipeline input. I also tested in the Foreach-Object function Get-ChildItem $path -Recurse | Where-Object { $_.Name -match '.+?.log.(d{4})-(d{2})-(d{2})$' -and $_.LastWriteTime -lt $deleteDate } | Foreach-Object...
Read more