capybara 2.18.0 → 3.40.0

data/lib/capybara/spec/views/form.erb

@@ -1,17 +1,23 @@
-
 <h1>Form</h1>
 
-<form action="/form" method="post">
+<button type="button" tabindex="1">A Button</button>
+
+<label>
+  An Input
+  <input type="text" tabindex="2">
+</label>
+
+<form action="/form" method="post" novalidate>
 
   <p>
     <label for="form_title">Title</label>
-    <select name="form[title]" id="form_title" class="title">
+    <select name="form[title]" id="form_title" class="title" tabindex="3">
       <option class="title">Mrs</option>
       <option class="title">Mr</option>
       <option>Miss</option>
       <option disabled="disabled">Other</option>
     </select>
-    </p>
+  </p>
 
   <p>
     <label for="customer_name">Customer Name
@@ -25,6 +31,12 @@
     </label>
   </p>
 
+  <p>
+    <label for="customer_other_email">Customer Other Email
+      <input type="text" name="form[customer_other_email]" value="notben@notben.com" id="customer_other_email"/>
+    </label>
+  </p>
+
   <p>
     <label for="form_other_title">Other title</label>
     <select name="form[other_title]" id="form_other_title">
@@ -56,6 +68,11 @@
     <input type="text" name="form[name]" value="John Smith" id="form_name"/>
   </p>
 
+  <p>
+    <label for="form_age">Age</label>
+    <input type="range" name="form[age]" value="18" min="13" max="100" step="0.5" id="form_age"/>
+  </p>
+
   <p>
     <label for="form_schmooo">Schmooo</label>
     <input type="schmooo" name="form[schmooo]" value="This is Schmooo!" id="form_schmooo"/>
@@ -88,6 +105,11 @@
     <input type="file" name="form[image]" id="form_image"/>
   </p>
 
+  <p>
+    <label for="form_hidden_image">Hidden Image</label>
+    <input type="file" name="form[hidden_image]" id="form_hidden_image" style="display: none"/>
+  </p>
+
   <p>
     <input type="hidden" name="form[token]" value="12345" id="form_token"/>
   </p>
@@ -97,7 +119,7 @@
     <select name="form[locale]" id="form_locale">
       <option value="sv">Swedish</option>
       <option selected="selected" value="en">English</option>
-      <option value="fi">Finish</option>
+      <option value="fi">Finnish</option>
       <option value="no">Norwegian</option>
       <option value="jo">John's made-up language</option>
       <option value="jbo"> Lojban </option>
@@ -124,7 +146,11 @@
 
   <p>
     <label for="form_zipcode">Zipcode</label>
-    <input type="text" maxlength="5" name="form[zipcode]" id="form_zipcode" />
+    <input type="text" maxlength="5" name="form[zipcode]" id="form_zipcode" pattern="[0-9]{5,9}" />
+  </p>
+
+  <p>
+    <input maxlength="35" id="long_length" />
   </p>
 
   <p>
@@ -150,7 +176,7 @@ New line after and before textarea tag
     <label for="gender_male">Male</label>
     <input type="radio" name="form[gender]" value="female" id="gender_female" checked="checked"/>
     <label for="gender_female">Female</label>
-    <input type="radio" name="form[gender]" value="both" id="gender_both"/>
+    <input type="radio" name="form[gender]" value="both" id="gender_both" readonly="readonly"/>
     <label for="gender_both">Both</label>
   </p>
 
@@ -185,7 +211,14 @@ New line after and before textarea tag
     <label for="form_cars_ferrari">Ferrari</label>
     <input type="checkbox" value="pagani" name="form[cars][]" id="form_cars_pagani" style="position: absolute; left: -9999px"/>
     <label for="form_cars_pagani">Pagani</label>
+    <div style="position: relative;">
+      <input type="checkbox" value="bugatti" name="form[cars][]" id="form_cars_bugatti"/>
+      <div style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff;">
+        <label for="form_cars_bugatti">Bugatti</label>
+      </div>
+    </div>
     <input type="checkbox" value="ariel" name="form[cars][]" id="form_cars_ariel" style="display: none"/>
+    <input type="checkbox" value="porsche" name="form[cars][]" id="form_cars_porsche" checked="checked" style="display: none"/>
     <label>
       McLaren
       <input type="checkbox" value="mclaren" name="form[cars][]" id="form_cars_mclaren" style="display: none"/>
@@ -194,6 +227,19 @@ New line after and before textarea tag
       Koenigsegg
       <input type="checkbox" value="koenigsegg" name="form[cars][]" id="form_cars_koenigsegg" checked="checked" style="display: none"/>
     </label>
+    <input type="checkbox" value="maserati" name="form[cars][]" id="form_cars_maserati" disabled="disabled"/>
+    <label for="form_cars_maserati">Maserati</label>
+    <input type="checkbox" value="lotus" name="form[cars][]" id="form_cars_lotus" style="display: none"/>
+    <label for="form_cars_lotus"><a href="#" onclick="return false;">Link here</a>Lotus</label>
+  </p>
+
+  <p>
+    <input type="text" name="form[manufacturer]" list="manufacturers" id="manufacturer"/>
+    <datalist id="manufacturers">
+      <option value="Jaguar">J</option>
+      <option value="Audi">
+      <option value="Mercedes" disabled>
+    </datalist>
   </p>
 
   <p>
@@ -360,7 +406,6 @@ New line after and before textarea tag
     </label>
   </p>
 
-
   <p>
     <label for="form_disabled_file">
       Disabled File
@@ -368,41 +413,38 @@ New line after and before textarea tag
     </label>
   </p>
 
-  <p>
-    <fieldset>
-        <input name="form[enabled_fieldset_child]" id="form_enabled_fieldset_child"/>
-    </fieldset>
-  </p>
-
-
-  <p>
-    <fieldset disabled="disabled">
-      <legend>Disabled Child</legend>
-      <input name="form[disabled_fieldset_child]" id="form_disabled_fieldset_child"/>
-      <select>
-        <option>Disabled Child Option</option>
-      </select>
-    </fieldset>
+  <fieldset>
+    <input name="form[enabled_fieldset_child]" id="form_enabled_fieldset_child"/>
+  </fieldset>
 
-    <fieldset disabled="disabled">
-      <legend>
-        Nested Disabled
-        <input type="checkbox" name="form[disabled_fieldeset_legend_child]" id="form_disabled_fieldset_legend_child"/>
-      </legend>
+  <fieldset disabled="disabled" id="form_disabled_fieldset">
+    <legend>Disabled Child</legend>
+    <input name="form[disabled_fieldset_child]" id="form_disabled_fieldset_child"/>
+    <select>
+      <option>Disabled Child Option</option>
+    </select>
+  </fieldset>
+
+  <fieldset disabled="disabled">
+    <legend>
+      Nested Disabled
+      <input type="checkbox" name="form[disabled_fieldeset_legend_child]" id="form_disabled_fieldset_legend_child"/>
+    </legend>
+    <legend>
+      Another WLegend
+      <input type="checkbox" name="form[disabled_fieldeset_second_legend_child]" id="form_disabled_fieldset_second_legend_child"/>
+    </legend>
+    <fieldset>
       <legend>
-        Another Legend
-        <input type="checkbox" name="form[disabled_fieldeset_second_legend_child]" id="form_disabled_fieldset_second_legend_child"/>
+        Disabled?
+        <input id="form_disabled_fieldset_descendant_legend_child">
       </legend>
-      <p>
-        <fieldset>
-          <input name="form[disabled_fieldset_descendant]" id="form_disabled_fieldset_descendant"/>
-        </fieldset>
-      </p>
+      <input name="form[disabled_fieldset_descendant]" id="form_disabled_fieldset_descendant"/>
     </fieldset>
-  </p>
+  </fieldset>
 
   <p>
-    <select>
+    <select data-test-id="my_test_id">
       <optgroup label="Level One">
        <option> A.1 </option>
       </optgroup>
@@ -414,21 +456,43 @@ New line after and before textarea tag
   </p>
 
   <p>
-    <input type="button" name="form[fresh]" id="fresh_btn" value="i am fresh"/>
-    <input type="submit" name="form[awesome]" id="awe123" title="What an Awesome Button" value="awesome"/>
+    <input type="button" aria-label="Aria button" name="form[fresh]" id="fresh_btn" value="i am fresh"/>
+    <input type="submit" name="form[awesome]" id="awe123" data-test-id="test_id_button" title="What an Awesome Button" value="awesome"/>
     <input type="submit" name="form[crappy]" id="crap321" value="crappy"/>
     <input type="image" name="form[okay]" id="okay556" title="Okay 556 Image" value="okay" alt="oh hai thar"/>
     <button type="submit" id="click_me_123" title="Click Title button" value="click_me">Click me!</button>
     <button type="submit" name="form[no_value]">No Value!</button>
     <button id="no_type">No Type!</button>
     <button><img alt="A horse eating hay"/></button>
+    <button id="button_with_label"></button>
+    <label for="button_with_label">button with label element</label>
+    <label>
+      button within label element
+      <button></button>
+    </label>
+    <label>
+      role=button within label element
+      <span role="button">with other text</span>
+    </label>
     <input type="button" disabled="disabled" value="Disabled button"/>
+    <span role="button">ARIA button</span>
+  </p>
+
+  <p>
+    <input type="date" name="form[date]" id="form_date"/>
+    <input type="time" name="form[time]" id="form_time"/>
+    <input type="datetime-local" name="form[datetime]" id="form_datetime">
   </p>
 
   <p>
     <input id="readonly" name="form[readonly_test]" readonly/>
     <input id="not_readonly" name="form[readonly_test]" />
   </p>
+
+  <p>
+    <input id="required" name="form[required]" required />
+    <input id="length" name="form[length]" minlength="4" maxlength="4" />
+  </p>
 </form>
 
 <input type="text" name="form[outside_input]" value="outside_input" form="form1"/>
@@ -438,14 +502,21 @@ New line after and before textarea tag
   <input type="text" name="nested_label" id="nested_label"/>
 </label>
 
+<label id="wrapper_label">
+  Wrapper Label
+  <input type="checkbox"/>
+</label>
+
 <form id="form1" action="/form" method="post">
   <input type="text" name="form[which_form]" value="form1" id="form_which_form"/>
   <input type="text" name="form[for_form2]" value="for_form2" form="form2"/>
   <input type="submit" name="form[submit_form1]" value="submit_form1" id="submit_form1"/>
 </form>
 
+<button type="submit" name="form[outside_button]" value="outside_button" form="form2">Outside!</button>
+
 <form id="form2" action="/form" method="post">
-  <input type="text" name="form[which_form]" value="form2" id="form_which_form"/>
+  <input type="text" name="form[which_form]" value="form2" id="form_which_form2"/>
   <input type="submit" name="form[unused]" value="unused"/>
   <button type="submit" name="form[other_form_button]" value="other_form_button" form="form1">Form1</button>
 </form>
@@ -460,8 +531,6 @@ New line after and before textarea tag
 </select>
 
 <input type="submit" name="form[outside_submit]" value="outside_submit" form="form1"/>
-<button type="submit" name="form[outside_button]" value="outside_button" form="form2">Outside!</button>
-
 
 <form id="get-form" action="/form/get?foo=bar" method="get">
   <p>
@@ -471,6 +540,7 @@ New line after and before textarea tag
 
   <p>
     <input type="submit" name="form[mediocre]" id="mediocre" value="med" aria-label="Mediocre Button"/>
+    <input type="submit" formaction="/form/get?bar=foo" id="mediocre2" value="med2"/>
   <p>
 </form>
 
@@ -516,6 +586,19 @@ New line after and before textarea tag
   <p>
 </form>
 
+<form action="/form" method="post" enctype="multipart/form-data">
+  <input type="hidden" name="form[document2]" value="hidden_field"/>
+
+  <p>
+    <label for="form_document">Document with hidden</label>
+    <input type="file" name="form[document2]" id="form_document2"/>
+  </p>
+
+  <p>
+    <input type="submit" value="Upload Empty With Hidden"/>
+  <p>
+</form>
+
 <form action="/upload_multiple" method="post" enctype="multipart/form-data">
   <p>
     <label for="form_multiple_file_name">File Name</label>
@@ -527,6 +610,11 @@ New line after and before textarea tag
     <input type="file" name="form[multiple_documents][]" id="form_multiple_documents" multiple="multiple" />
   </p>
 
+  <p>
+    <label for="form_directory_upload">Directory Upload</label>
+    <input type="file" name="form[multiple_documents][]" id="form_directory_upload" multiple="multiple" webkitdirectory="webkitdirectory" mozdirectory="mozdirectory" />
+  </p>
+
   <p>
     <input type="submit" value="Upload Multiple"/>
   <p>
@@ -536,6 +624,14 @@ New line after and before textarea tag
   <p>
     <input type="submit" value="Go FAR"/>
   </p>
+
+  <input type="hidden" name="form[data]" value="TWTW"/>
+  <p>
+    <button formaction='/redirect_307'>Go 307</button>
+  </p>
+  <p>
+    <button formaction='/redirect_308'>Go 308</button>
+  </p>
 </form>
 
 <form action="/form" method="post">
@@ -599,6 +695,15 @@ New line after and before textarea tag
   </p>
 </form>
 
+<form id="single_input_form" action="/form" method="post">
+  <input type="text" name="form[single_input]" id="single_input"/>
+</form>
+
+<form id="two_input_form" action="/form" method="post">
+  <input type="text" name="form[two_input_1]" id="two_input_1"/>
+  <input type="text" name="form[two_input_2]" id="two_input_2"/>
+</form>
+
 <label>Confusion
   <input type="checkbox" id="confusion_checkbox" class="confusion-checkbox confusion"/>
 </label>
@@ -615,3 +720,19 @@ New line after and before textarea tag
   <label for="asterisk_input">With Asterisk<abbr title="required">*</abbr></label>
   <input id="asterisk_input" type="number"value="2016"/>
 </p>
+
+<p>
+  <input id="special" {custom}="abcdef" value="custom attribute"/>
+</p>
+
+
+<label for="multi_label_checkbox">
+  Label to click
+</label>
+<div>Something random that justifies the usage of a separate label</div>
+<label>
+  <div>
+    <input type="checkbox" id="multi_label_checkbox" style="display: none"/>
+    <div>Visual representation of the checkbox</div>
+  </div>
+</label>

data/lib/capybara/spec/views/frame_child.erb

@@ -1,16 +1,17 @@
-
+<!DOCTYPE html>
 <html>
     <head>
         <title>This is the child frame title</title>
         <script>
         function closeWin() {
-          var iframe = window.parent.document.getElementById('childFrame')
+          var iframe = window.parent.document.getElementById('childFrame');
           iframe.parentNode.removeChild(iframe)
         }
         </script>
     </head>
     <body id="childBody">
-      <a href="javascript:void(0)" onClick="closeWin()">Close Window</a>
+      <a href="javascript:void(0)" onClick="closeWin()">Close Window Now</a>
+      <a href="javascript:void(0)" onClick="setTimeout(function(){closeWin()}, 10)">Close Window Soon</a>
       <iframe src="/frame_one" id="grandchildFrame1"></iframe>
       <iframe src="/frame_two" id="grandchildFrame2"></iframe>
     </body>

data/lib/capybara/spec/views/frame_one.erb

@@ -1,9 +1,10 @@
-
+<!DOCTYPE html>
 <html>
     <head>
         <title>This is the title of frame one</title>
     </head>
     <body>
         <div id="divInFrameOne">This is the text of divInFrameOne</div>
+        <div id="otherDivInFrameOne">Some other text</div>
     </body>
 </html>

data/lib/capybara/spec/views/frame_parent.erb

@@ -1,4 +1,4 @@
-
+<!DOCTYPE html>
 <html>
     <head>
         <title>This is the parent frame title</title>

data/lib/capybara/spec/views/frame_two.erb

@@ -1,4 +1,4 @@
-
+<!DOCTYPE html>
 <html>
     <head>
         <title>This is the title of frame two</title>

data/lib/capybara/spec/views/initial_alert.erb

@@ -1,4 +1,5 @@
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<!DOCTYPE html>
+<html lang="en">
   <body>
     <div>
       Initial alert page

data/lib/capybara/spec/views/layout.erb

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/lib/capybara/spec/views/obscured.erb

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>Obscured</title>
+    <style>
+      div {
+        width: 200px;
+        height: 200px;
+      }
+      #cover, #offscreen, #offscreen_wrapper {
+        position: absolute;
+      }
+      #obscured {
+        z-index: 1;
+        background-color: red;
+      }
+      #cover {
+        top: 0px;
+        z-index: 2;
+        background-color: blue;
+      }
+      #offscreen {
+        top: 2000px;
+        left: 2000px;
+        background-color: green;
+      }
+      #offscreen_wrapper {
+        top: 2000px;
+        left: 2000px;
+        overflow-x: scroll;
+        background-color: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="obscured">
+      <input id="obscured_input"/>
+    </div>
+    <div id="cover"></div>
+    <iframe id="frameOne" height="10px" src="/frame_one"></iframe>
+    <iframe id="nestedFrames" src="/frame_parent"></iframe>
+    <div id="offscreen_wrapper">
+      <div id="offscreen"></div>
+    </div>
+  </body>
+</html>

data/lib/capybara/spec/views/offset.erb

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>Offset</title>
+    <style>
+      body {
+        margin: 0px;
+      }
+      #wrapper {
+        width: 300px;
+        height: 300px;
+        margin: 0px;
+      }
+      #clicker {
+        position: relative;
+        width: 100px;
+        height: 100px;
+        top: 100px;
+        left: 100px;
+        background-color: red;
+        margin: 0px;
+      }
+    </style>
+    <script src="/jquery.js" type="text/javascript" charset="utf-8"></script>
+    <script src="/offset.js" type="text/javascript" charset="utf-8"></script>
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="clicker"></div>
+    </div>
+  </body>
+  </html>

data/lib/capybara/spec/views/path.erb

@@ -1,5 +1,5 @@
-
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<!DOCTYPE html>
+<html lang="en">
   <body>
     <div>
       <a href="#">First Link</a>

data/lib/capybara/spec/views/popup_one.erb

@@ -1,4 +1,4 @@
-
+<!DOCTYPE html>
 <html>
     <head>
         <title>Title of the first popup</title>

data/lib/capybara/spec/views/popup_two.erb

@@ -1,4 +1,4 @@
-
+<!DOCTYPE html>
 <html>
     <head>
         <title>Title of popup two</title>

data/lib/capybara/spec/views/react.erb

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://unpkg.com/react/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script>
+      // https://codepen.io/gaearon/pen/VmmPgp?editors=0010
+      class NameForm extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = { value: '' };
+
+          this.handleChange = this.handleChange.bind(this);
+          this.handleSubmit = this.handleSubmit.bind(this);
+        }
+
+        handleChange(event) {
+          this.setState({ value: event.target.value });
+        }
+
+        handleSubmit(event) {
+          alert('A name was submitted: ' + this.state.value);
+          event.preventDefault();
+        }
+
+        render() {
+          return (
+            React.createElement("form", { onSubmit: this.handleSubmit },
+            React.createElement("label", null, "Name:",
+
+            React.createElement("input", { type: "text", value: this.state.value, onChange: this.handleChange })),
+
+            React.createElement("input", { type: "submit", value: "Submit" })));
+        }}
+
+
+        ReactDOM.render(
+        React.createElement(NameForm, null),
+        document.getElementById('root'));
+    </script>
+  </body>
+</html>

data/lib/capybara/spec/views/scroll.erb

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html style="height: 250%; width: 150%">
+  <head>
+    <style>
+      * { padding: 0; }
+      div { position: absolute; }
+      #scroll { top: 125%; }
+      #scrollable { top: 150%; overflow-y: scroll; overflow-x: scroll; height: 50px; width: 50px; position: relative; border: 1px solid black;}
+      #inner { top: 50%; }
+    </style>
+  </head>
+  <body style="height: 100%; width: 100%">
+    <div id="scroll" style = "top: 125%">scroll</div>
+    <div id="scrollable">
+      <div style="height: 200px; width: 200px; poistion: relative">
+        <div id="inner">inner</div>
+      </div>
+    </div>
+  </div>
+  </body>
+</html>

data/lib/capybara/spec/views/spatial.erb

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>spatial</title>
+    <style>
+      #spatial {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 10px;
+        grid-auto-rows: minmax(100px, auto);
+      }
+      .footer {
+        grid-column: 1 / 4;
+      }
+    </style>
+  </head>
+
+  <body id="spatial">
+    <div class="corner">1</div>
+    <div class="distance">2</div>
+    <div class="corner">3</div>
+    <div>4</div>
+    <div class="center">5</div>
+    <div>6</div>
+    <div class="corner">7</div>
+    <div>8</div>
+    <div class="corner">9</div>
+    <div class="footer distance">10</div>
+  </body>
+</html>