add ScreenshotScale that allows specifying page scale factor

screenshot.go

@@ -30,6 +30,12 @@ import (
 //
 // [screenshot]: https://github.com/chromedp/examples/tree/master/screenshot
 func Screenshot(sel interface{}, picbuf *[]byte, opts ...QueryOption) QueryAction {
+	return ScreenshotScale(sel, 1, picbuf, opts...)
+}
+
+// ScreenshotScale is like [Screenshot] but accepts a scale parameter that
+// specifies the page scale factor.
+func ScreenshotScale(sel interface{}, scale float64, picbuf *[]byte, opts ...QueryOption) QueryAction {
 	if picbuf == nil {
 		panic("picbuf cannot be nil")
 	}
@@ -52,9 +58,7 @@ func Screenshot(sel interface{}, picbuf *[]byte, opts ...QueryOption) QueryActio
 		clip.Width, clip.Height = math.Round(clip.Width+clip.X-x), math.Round(clip.Height+clip.Y-y)
 		clip.X, clip.Y = x, y
 
-		// The next comment is copied from the original code.
-		// This seems to be necessary? Seems to do the right thing regardless of DPI.
-		clip.Scale = 1
+		clip.Scale = scale
 
 		// take screenshot of the box
 		buf, err := page.CaptureScreenshot().

screenshot_test.go

@@ -79,6 +79,53 @@ func TestScreenshot(t *testing.T) {
 	}
 }
 
+func TestScreenshotScale(t *testing.T) {
+	t.Parallel()
+
+	tests := []struct {
+		name  string
+		sel   string
+		scale float64
+		want  string
+	}{
+		{
+			name:  "padding border",
+			sel:   "#padding-border",
+			scale: 2,
+			want:  "element-padding-border@2x.png",
+		},
+		{
+			name:  "svg",
+			sel:   "#svg-circle",
+			scale: 3,
+			want:  "element-svg@3x.png",
+		},
+	}
+
+	for _, test := range tests {
+		test := test
+		t.Run(test.name, func(t *testing.T) {
+			t.Parallel()
+			ctx, cancel := testAllocate(t, "screenshot.html")
+			defer cancel()
+
+			var buf []byte
+			if err := Run(ctx,
+				ScreenshotScale(test.sel, test.scale, &buf, ByQuery),
+			); err != nil {
+				t.Fatal(err)
+			}
+			diff, err := matchPixel(buf, test.want)
+			if err != nil {
+				t.Fatal(err)
+			}
+			if diff != 0 {
+				t.Fatalf("screenshot does not match. diff: %v", diff)
+			}
+		})
+	}
+}
+
 func TestScreenshotHighDPI(t *testing.T) {
 	t.Parallel()
 

testdata/screenshot.html

@@ -56,6 +56,11 @@
             border: 1px solid black;
         }
 
+        #svg-circle {
+            width: 20.82px;
+            height: 20.82px;
+        }
+
         ::-webkit-scrollbar {
             display: none;
         }
@@ -69,5 +74,10 @@
 <div id="rotated"></div>
 <div id="fractional-dimensions"></div>
 <div id="fractional-offset" ></div>
+<div id="svg-circle">
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="50" cy="50" r="50" />
+  </svg>
+</div>
 </body>
 </html>