Skip to content

Can't use single quotes in screenshot :selector #465

@zavan

Description

@zavan

Describe the bug
It raises if you try to use single quotes in a screenshot :selector.

To Reproduce

require "bundler/inline"

gemfile do
  source "https://rubygems.org"

  gem "ferrum", "0.15"
  gem "base64"
end

b = Ferrum::Browser.new(timeout: 120, headless: "new", window_size: [1920, 1080])
b.goto("https://en.wikipedia.org/wiki/Main_Page")
b.screenshot(encoding: :base64, selector: "[aria-labelledby='firstHeading']") # Note single quotes

This raises:

/Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/gems/3.3.0/gems/ferrum-0.15/lib/ferrum/frame/runtime.rb:138:in `handle_error': SyntaxError: missing ) after argument list (Ferrum::JavaScriptError)
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/gems/3.3.0/gems/ferrum-0.15/lib/ferrum/frame/runtime.rb:122:in `block in call'
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/gems/3.3.0/gems/ferrum-0.15/lib/ferrum/utils/attempt.rb:10:in `with_retry'
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/gems/3.3.0/gems/ferrum-0.15/lib/ferrum/frame/runtime.rb:105:in `call'
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/gems/3.3.0/gems/ferrum-0.15/lib/ferrum/frame/runtime.rb:68:in `evaluate_async'
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/3.3.0/forwardable.rb:240:in `evaluate_async'
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/gems/3.3.0/gems/ferrum-0.15/lib/ferrum/page/screenshot.rb:253:in `bounding_rect'
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/gems/3.3.0/gems/ferrum-0.15/lib/ferrum/page/screenshot.rb:230:in `area_options'
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/gems/3.3.0/gems/ferrum-0.15/lib/ferrum/page/screenshot.rb:207:in `screenshot_options'
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/gems/3.3.0/gems/ferrum-0.15/lib/ferrum/page/screenshot.rb:82:in `screenshot'
	from /Users/zavan/.asdf/installs/ruby/3.3.3/lib/ruby/3.3.0/forwardable.rb:240:in `screenshot'
	from screenshot.rb:26:in `<main>'

Using double quotes work:

b.screenshot(encoding: :base64, selector: '[aria-labelledby="firstHeading"]')

This happens because single quotes are already used to quote the selector itself here in line 255:

def bounding_rect(selector)
rect = evaluate_async(%(
const rect = document
.querySelector('#{selector}')
.getBoundingClientRect();
const {x, y, width, height} = rect;
arguments[0]([x, y, width, height])
), timeout)
{ x: rect[0], y: rect[1], width: rect[2], height: rect[3] }
end

Maybe CSS.escape can help?

Expected behavior
The quoting used in the selector shouldn't matter.

Desktop (please complete the following information):

  • OS: macOS
  • Browser: Chromium Version 125.0.6422.60 (Official Build, ungoogled-chromium) (x86_64)
  • Version: v0.15

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions