Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for iFrames #129

Closed
benalavi opened this issue Jan 29, 2020 · 4 comments
Closed

Support for iFrames #129

benalavi opened this issue Jan 29, 2020 · 4 comments

Comments

@benalavi
Copy link

Hello!

We are attempting to upgrade to the latest percy agent in order to solve percy/react-percy#5 (comment) (we need to render React w/ styled components) which will work except that the percy-capybara gem doesn't seem to support capturing the content of iFrames. Pretty sure we're running into the same issue as #67 (comment) and we can in fact render the iFrame snapshot from within_frame, but then we can't see both the frames together (and we'd have to change a lot of test code that is currently working, albeit with a very old patched version).

I wanted to make sure it was the same issue so I made a (somewhat) minimal test case, which I've added here in case it is useful:

# frozen_string_literal: true

require "rack"
require "capybara/dsl"
require "selenium-webdriver"
require "percy"

layout = <<~HTML
<!doctype html>
<html>
<head>
</head>
<body style="background-color: blue;">
  <p>Body Content</p>
  <iframe src="/frame" style="width: 500px; height: 500px;" id="frame"></iframe>
</body>
</html>
HTML

form = <<~HTML
<!doctype html>
<html>
<head>
</head>
<body style="background-color: red;">
  <form method="POST">
    <input type="submit" value="Submit" />
  </form>
</body>
</html>
HTML

result = <<~HTML
<!doctype html>
<html>
<head>
</head>
<body style="background-color: green;">
  <p>Frame Submitted</p>
</body>
</html>
HTML

chrome_bin = ENV.fetch("GOOGLE_CHROME_BIN", nil)
options = {}
options[:args] = %W( headless disable-gpu no-sandbox window-size=1980,1060} )
options[:binary] = chrome_bin if chrome_bin

Capybara.register_driver :selenium_chrome_headless do |app|
  Capybara::Selenium::Driver.new \
    app,
    browser: :chrome,
    options: Selenium::WebDriver::Chrome::Options.new(options)
end

Capybara.javascript_driver = :selenium_chrome_headless
Capybara.default_driver = Capybara.javascript_driver

Capybara.app =  Rack::Session::Cookie.new(
  ->(env) {
    r = Rack::Request.new env
    session = env["rack.session"]

    case r.path_info
    when "/frame"
      if session["authenticated"] == "1"
        if r.post?
          content = result
        else
          content = form
        end
      else
        content = "Authentication Required"
      end
    when "/"
      session["authenticated"] = "1"
      content = layout
    end

    [200, {"Content-Type" => "text/html"}, [content]]
  }
)

include Capybara::DSL
visit "/"
page.within_frame "frame" do
  click_on "Submit"
  puts "Frame submitted? #{page.has_content?("Frame Submitted")}"
end
Percy.snapshot "Body With Frame"

In the test case above what we would like to see in the checkpoint is the same content we see in the test at that point ("Frame Submitted"), what we end up seeing is:

Screen Shot 2020-01-28 at 4 13 37 PM

percy-agent version: 0.20.12
percy-capybara version: 4.0.2

Any guidance here, even if it's "we're not going to support iFrames" (I believe we may be the only people in the world still using them 😅 ) would be helpful so we can decide what to do. Thanks!
@Robdel12
Copy link
Contributor

Hey @benalavi! Wanted to chime in here with maybe good news! Could you give @percy/agent v0.22.0 a try? percy/percy-agent#468 This should hopefully capture your iframes.

cc: @wwilsman

@benalavi
Copy link
Author

@Robdel12 🎉 it works with the isolated test script, we now see the frame content!

Screen Shot 2020-02-21 at 2 08 21 PM

Will check our full app now and report back. Thank you!

@benalavi
Copy link
Author

@Robdel12 Looks like it worked for all snapshots w/ frames in our full CI run! I think you guys can close this as far as our usage is concerned.

Thanks again!

@benalavi benalavi mentioned this issue Feb 21, 2020
Closed
@Robdel12
Copy link
Contributor

Awesome! Super happy to hear that :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@benalavi @Robdel12