I want to take a screenshot with chromedp of an element that is in html page. But the result is not the same as the render in a browser
Here is my code. I use httpest to render the page, then chromedp scrap it.
func main() {
ts := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
w.Write([]byte(`<!doctype html>
<html>
<head>
<style>
@font-face {
font-family: Roboto;
src: url('https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5WZLCzYlKw.ttf');
}
body{
background-color:black;
width:178px;
height:29px;
}
.text {
font-family: Roboto;
display: flex;
flex-direction: row;
align-items: center;
background-color: #00000000;
width: 178px;
height: 29px;
font-size: 24px;
text-align: center;
line-height: 1;
}
.inner-text {
color: #ffffffff;
padding: 0px;
}
</style>
</head>
<body>
<div class="text">
<p class="inner-text">je teste pour voir</p>
</div>
</body>
</html>`))
}))
defer ts.Close()
ctx, cancel := chromedp.NewContext(context.Background())
defer cancel()
var raw []byte
err := chromedp.Run(ctx, chromedp.Tasks{
chromedp.Navigate(ts.URL),
//chromedp.WaitReady("div.text"),
chromedp.ActionFunc(func(ctx context.Context) error {
// This is done in an ActionFunc because it is reset at each navigate.
err := emulation.SetDefaultBackgroundColorOverride().WithColor(&cdp.RGBA{R: 0, G: 0, B: 0, A: 0}).Do(ctx)
if err != nil {
panic(err)
}
return nil
}),
//chromedp.EmulateViewport(178, 29),
chromedp.Screenshot("div.text", &raw, chromedp.NodeVisible),
})
if err != nil {
panic(err)
}
err = os.WriteFile("image.png", raw, 0o777)
if err != nil {
panic(err)
}
}
Here is the result in a web-browser:
what I want:(https://i.sstatic.net/ymg47G0w.png)
what I got: (https://i.sstatic.net/OlBKMzD1.png)
can someone help me ?
New contributor
user1753011 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.