Skip to content
This repository has been archived by the owner on Nov 27, 2020. It is now read-only.

Can't click SVG element. Throws ObsoleteNode. #331

Closed
mclin opened this issue May 14, 2013 · 7 comments
Closed

Can't click SVG element. Throws ObsoleteNode. #331

mclin opened this issue May 14, 2013 · 7 comments

Comments

@mclin
Copy link

mclin commented May 14, 2013

Hey, having issues with this. It passes with selenium webdriver.

public/test.html

<html><body>
<div id="mydiv">my div</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect id="myrect" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
</body></html>

spec/features/test_spec.rb

require 'spec_helper'
describe "test", :js => true do
  context "click svg" do
    it "can click svg element" do
      visit '/test.html'
      page.should have_css('#myrect')
      #ok
      page.find('#mydiv').click
      #not ok
      page.find('#myrect').click
    end
  end
end

Output with :debug => true

test
  click svg
{"name"=>"set_debug", "args"=>[true]}
{"response"=>true}
{"name"=>"visit", "args"=>["http://127.0.0.1:49491/test.html"]}
poltergeist [1368553607997] state default -> loading
poltergeist [1368553608019] state loading -> default
{"response"=>{"status"=>"success"}}
{"name"=>"find", "args"=>[:css, "#myrect"]}
{"response"=>{"page_id"=>2, "ids"=>[0]}}
{"name"=>"visible", "args"=>[2, 0]}
{"response"=>true}
{"name"=>"find", "args"=>[:css, "#mydiv"]}
{"response"=>{"page_id"=>2, "ids"=>[1]}}
{"name"=>"visible", "args"=>[2, 1]}
{"response"=>true}
{"name"=>"click", "args"=>[2, 1]}
poltergeist [1368553608027] state default -> mouse_event
poltergeist [1368553608034] state mouse_event -> default
{"response"=>{"x"=>512, "y"=>17}}
{"name"=>"find", "args"=>[:css, "#myrect"]}
{"response"=>{"page_id"=>2, "ids"=>[2]}}
{"name"=>"visible", "args"=>[2, 2]}
{"response"=>true}
{"name"=>"click", "args"=>[2, 2]}
poltergeist [1368553608038] state default -> mouse_event
{"error"=>{"name"=>"Poltergeist.ObsoleteNode", "args"=>[]}}
{"name"=>"find", "args"=>[:css, "#myrect"]}
{"response"=>{"page_id"=>2, "ids"=>[3]}}
{"name"=>"visible", "args"=>[2, 3]}
{"response"=>true}

... try to click 36 more times

{"name"=>"click", "args"=>[2, 38]}
poltergeist [1368553610040] state mouse_event -> mouse_event
{"error"=>{"name"=>"Poltergeist.ObsoleteNode", "args"=>[]}}
{"name"=>"current_url", "args"=>[]}
{"response"=>"http://127.0.0.1:49491/test.html"}
{"name"=>"body", "args"=>[]}
{"response"=>"<html><head></head><body>\n<div id=\"mydiv\">my div</div>\n<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\">\n  <rect id=\"myrect\" width=\"300\" height=\"100\" style=\"fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)\"></rect>\n</svg>\n\n</body></html>"}
Saved file screenshot_2013-05-14-10-46-50.043
{"name"=>"render", "args"=>["/Users/myuser/workspace/test/tmp/capybara/screenshot_2013-05-14-10-46-50.043.png", true]}
{"response"=>true}
{"name"=>"reset", "args"=>[]}
{"response"=>true}
    can click the svg (FAILED - 1)

Failures:

  1) test click svg can click the svg
     Screenshot: /Users/myuser/workspace/test/tmp/capybara/screenshot_2013-05-14-10-46-50.043.png
     Failure/Error: page.find('#myrect').click
     Capybara::Poltergeist::ObsoleteNode:
       The element you are trying to interact with is either not part of the DOM, or is not currently visible on the page (perhaps display: none is set). It's possible the element has been replaced by another element and you meant to interact with the new element. If so you need to do a new 'find' in order to get a reference to the new element.
     # ./spec/features/test_spec.rb:10:in `block (3 levels) in <top (required)>'

Finished in 4.03 seconds
1 example, 1 failure

Capybara version 2.1.0
Poltergeist version 1.2.0
@Trevoke
Copy link

Trevoke commented May 24, 2013

I am also running into this error; somewhat frustrating, since it works with selenium-webdriver but I like poltergeist better ;)

@deadprogram
Copy link

This is also biting us. Is this poltergeist itself or some issue within phantomjs? We are trying to use "path" tag, but same problem as described above...

@EamonNerbonne
Copy link

Same issue here.

@EamonNerbonne
Copy link

The following workaround works for me:

page.execute_script("
  var svgEl = document.querySelector('YOUR-SELECTOR-HERE');
  var clickEvent = document.createEvent('MouseEvents');
  clickEvent.initMouseEvent('click',true,true);
  svgEl.dispatchEvent(clickEvent);
")

@rockwood
Copy link

rockwood commented Dec 2, 2014

This also works:

find("#svg-element").trigger('click')

But it would be nice to have the default click methods work

@richlewis14
Copy link

Thanks @rockwood your solution has just solved a similar issue for me

twalpole added a commit to twalpole/poltergeist that referenced this issue Nov 16, 2015
@twalpole
Get position of elements inside an SVG - Fix Issue teampoltergeist#331
82ee395
twalpole added a commit that referenced this issue Nov 16, 2015
@twalpole
Merge pull request #699 from twalpole/svg_click
859145c 
Get position of elements inside an SVG - Fix Issue #331
@twalpole
Copy link
Contributor

Should be fixed in master

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

No branches or pull requests
7 participants
@deadprogram @twalpole @Trevoke @mclin @rockwood @EamonNerbonne @richlewis14