Support filling in `contenteditable` elements #911

Closed
wants to merge 10 commits into
from
View
9 lib/capybara/selenium/node.rb
@@ -34,6 +34,15 @@ def set(value)
elsif tag_name == 'textarea' or tag_name == 'input'
driver.browser.execute_script "arguments[0].value = ''", native
native.send_keys(value.to_s)
+ elsif native.attribute('isContentEditable')
+ #ensure we are focused on the element
+ script = <<-JS
+ var range = document.createRange();
+ range.selectNodeContents(arguments[0]);
+ window.getSelection().addRange(range);
+ JS
+ driver.browser.execute_script script, native
+ native.send_keys(value.to_s)
end
end
View
19 lib/capybara/spec/session/node_spec.rb
@@ -71,6 +71,25 @@
@session.first('//input').set('')
@session.first('//input').value.should == ''
end
+
+ it 'should allow me to change the contents of a contenteditable element', :requires => [:js] do
+ @session.visit('/with_js')
+ @session.find(:css,'#existing_content_editable').set('WYSIWYG')
+ @session.find(:css,'#existing_content_editable').text.should == 'WYSIWYG'
+ end
+
+ it 'should allow me to set the contents of a contenteditable element', :requires => [:js] do
+ @session.visit('/with_js')
+ @session.find(:css,'#blank_content_editable').set('WYSIWYG')
+ @session.find(:css,'#blank_content_editable').text.should == 'WYSIWYG'
+ end
+
+ it 'should allow me to change the contents of a contenteditable elements child', :requires => [:js] do
+ pending "Selenium doesn't like editing nested contents"
+ @session.visit('/with_js')
+ @session.find(:css,'#existing_content_editable_child').set('WYSIWYG')
+ @session.find(:css,'#existing_content_editable_child').text.should == 'WYSIWYG'
+ end
end
describe "#tag_name" do
View
8 lib/capybara/spec/views/with_js.erb
@@ -36,6 +36,14 @@
</p>
<p>
+ <div contenteditable='true' id='existing_content_editable'>Editable content</div>
+ <div contenteditable='true' id='blank_content_editable' style='height: 1em;'></div>
+ <div contenteditable='true' style='height: 1em;'>
+ <div id='existing_content_editable_child' style='height: 1em;'>Content</div>
+ </div>
+ </p>
+
+ <p>
<input type="checkbox" id="checkbox_with_event"/>
</p>