rubycdp / ferrum

Headless Chrome Ruby API
https://ferrum.rubycdp.com
MIT License
1.7k stars 122 forks source link

Screenshot scale parameter and scroll position #301

Closed lanks closed 9 months ago

lanks commented 1 year ago

I am having an issue when capturing screenshots using the screenshot scale parameter when the page is scrolled vertically.

In this case rather than taking a screenshot of the current viewport, the screenshot shows the viewport offset from the top. This means that the top of the page is just blank and then only part of the viewport is shown.

Here's an example of how I am scrolling the page (note I am showing a specific element on screen). scroll_script = <<-JS let element = document.getElementById("salesmock-#{prev_step[:step].id}"); let dims = element.getBoundingClientRect(); window.scrollTo(window.scrollX, (dims.top - dims.height) + #{step.scroll_padding}); JS browser.execute(scroll_script)

Taking the screenshot: browser.screenshot(path: file, scale: 1.8)

I had a look into the ferrum code and I see that in screenshot.rb the area_options function sets x, y to 0,0 when the scale is not 1... I was wondering if this might be the cause of the issue?

def area_options(full, selector, scale)
      message = "Ignoring :selector in #screenshot since full: true was given at #{caller(1..1).first}"
      warn(message) if full && selector

      clip = if full
               width, height = document_size
               { x: 0, y: 0, width: width, height: height, scale: scale } if width.positive? && height.positive?
             elsif selector
               bounding_rect(selector).merge(scale: scale)
             end

      if scale != 1
        unless clip
          width, height = viewport_size
          clip = { x: 0, y: 0, width: width, height: height }
        end

        clip.merge!(scale: scale)
      end

      clip
end
lanks commented 1 year ago

Ok I managed to fix it by adding this line to the area_options function:

x,y = evaluate("[window.pageXOffset, window.pageYOffset]")

clip = { x: x, y: y, width: width, height: height }

Not sure if you want to include this in the main branch, let me know if so I can create a PR?

sandstrom commented 9 months ago

@lanks does this PR solve your problem?

https://github.com/rubycdp/ferrum/pull/410

I think scale is in there, and also element/selector, which may help with scroll?

Or just use the viewport setting?

I think this can be closed, unless I've misunderstood.