Skip to content
New issue

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

#

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

Already on GitHub? # to your account

Extend Node#set with additional input types #295

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Extend Node#set with additional input types #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3203b8c
Implement date input types based on the capybara selenium driver
DanielHeath Mar 21, 2025
4eba71f
Make fixture form valid HTML
duncan-bayne Mar 25, 2025
2c48686
Add specs for additional set types
duncan-bayne Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 39 additions & 2 deletions lib/capybara/cuprite/node.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,28 @@ def set(value, options = {})
when "file"
files = value.respond_to?(:to_ary) ? value.to_ary.map(&:to_s) : value.to_s
command(:select_file, files)
when "color"
node.evaluate("this.setAttribute('value', '#{value}')")
when 'date'
if value.respond_to?(:to_time)
set_value_js(value.to_date.iso8601)
else
command(:set, value.to_s)
end
when 'time'
if value.respond_to?(:to_time) && !value.is_a?(String)
set_value_js(value.to_time.strftime('%H:%M'))
else
command(:set, value.to_s)
end
when 'datetime-local'
if value.respond_to?(:to_time) && !value.is_a?(String)
set_value_js(value.to_time.strftime('%Y-%m-%dT%H:%M'))
else
command(:set, value.to_s)
end
when 'range'
set_value_js(value)
when 'color'
set_value_js(value)
else
command(:set, value.to_s)
end
Expand All @@ -114,6 +134,23 @@ def set(value, options = {})
end
end

# Copied from MIT licensed capybara project
# revision 0be79d6
# path lib/capybara/selenium/node.rb
def set_value_js(value)
driver.execute_script(<<-JS, self, value)
if (arguments[0].readOnly) { return };
if (document.activeElement !== arguments[0]){
arguments[0].focus();
}
if (arguments[0].value != arguments[1]) {
arguments[0].value = arguments[1]
arguments[0].dispatchEvent(new InputEvent('input'));
arguments[0].dispatchEvent(new Event('change', { bubbles: true }));
}
JS
end

def select_option
command(:select, true)
end
Expand Down
24 changes: 24 additions & 0 deletions spec/features/driver_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1468,6 +1468,30 @@ def create_screenshot(file, *args)
expect(input.text).to eq("replacement text")
end

it "sets a date field" do
input = @session.find(:css, "#date-field")
input.set(Time.new(2000, 12, 31))
expect(input.value).to eq("2000-12-31")
end

it "sets a datetime-local field" do
input = @session.find(:css, "#datetime-local-field")
input.set(Time.new(2000, 12, 31, 17, 15))
expect(input.value).to eq(Time.new(2000, 12, 31, 17, 15).strftime("%Y-%m-%dT%H:%M"))
end

it "sets a range field" do
input = @session.find(:css, "#range-field")
input.set(42)
expect(input.value).to eq("42")
end

it "sets a color field" do
input = @session.find(:css, "#color-field")
input.set("#1270a4")
expect(input.value).to eq("#1270a4")
end

it "sets a content editable childs content" do
@session.visit("/with_js")
@session.find(:css, "#existing_content_editable_child").set("WYSIWYG")
Expand Down
10 changes: 9 additions & 1 deletion spec/support/views/set.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Set tests</title>
</head>

<body>
<div id="empty_div" contenteditable="true"></div>
<div id="filled_div" contenteditable="true">Content</div>
<form>
<input id="date-field" type="date" name="date-field"><br>
<input id="datetime-local-field" type="datetime-local" name="datetime-local-field"><br>
<input id="range-field" type="range" min="0" max="100" name="range-field"><br>
<input id="color-field" type="color" name="color-field">
</form>
</body>
</html>
Loading