dispatch input and change events at the SetValue() target (#819)

chromedp.SetValue is supposed to be called against input, textarea and select.
For these kind of elements, dispatching input and change events after their
values are changed is required.

The document says chromedp.SetValue supports other elements with a .value field.
The input and change events will be fired for those elements too. But I'm not ware
of such an element, so there is not unit test to cover this case.

js.go

@@ -78,7 +78,12 @@ const (
 	// setAttributeJS is a javascript snippet that sets the value of the specified
 	// node, and returns the value.
 	setAttributeJS = `(function(a, n, v) {
-		return a[n] = v;
+		a[n] = v;
+		if (n === 'value') {
+			a.dispatchEvent(new Event('input', { bubbles: true }));
+			a.dispatchEvent(new Event('change', { bubbles: true }));
+		}
+		return a[n];
 	})(%s, %q, %q)`
 
 	// visibleJS is a javascript snippet that returns true or false depending on if

query_test.go

@@ -2,6 +2,8 @@ package chromedp
 
 import (
 	"bytes"
+	"context"
+	"errors"
 	"fmt"
 	"image/png"
 	"io/ioutil"
@@ -557,6 +559,7 @@ func TestSetValue(t *testing.T) {
 		{`#form > input[type="text"]`, ByQueryAll},
 		{`#bar`, ByID},
 		{`document.querySelector("#bar")`, ByJSPath},
+		{`#select`, ByQuery},
 	}
 
 	for i, test := range tests {
@@ -578,6 +581,19 @@ func TestSetValue(t *testing.T) {
 			if value != "FOOBAR" {
 				t.Errorf("expected `FOOBAR`, got: %s", value)
 			}
+
+			ctx, cancel = context.WithTimeout(ctx, 2*time.Second)
+			defer cancel()
+			if err := Run(ctx,
+				WaitVisible("#event-input", ByQuery),
+				WaitVisible("#event-change", ByQuery),
+			); err != nil {
+				if errors.Is(err, context.DeadlineExceeded) {
+					t.Fatal("input and/or change events not fired")
+				} else {
+					t.Fatalf("got error: %v", err)
+				}
+			}
 		})
 	}
 }

testdata/form.html

@@ -16,8 +16,22 @@
     <textarea id="bar" rows="4" cols="50">bar</textarea><br>
     <input id="btn1" name="reset" type="reset" value="Reset">
     <input id="btn2" name="submit" type="submit" value="Submit">
+    <select id="select">
+      <option value="">First</option>
+      <option value="FOOBAR">Second</option>
+    </select>
     <p id="inner-hidden">this is <span style="display: none;">hidden</span></p>
     <p id="hidden" style="display: none;">hidden</p>
   </form>
+  <span id="event-input" style="display: none">input event fired</span>
+  <span id="event-change" style="display: none">change event fired</span>
+<script>
+  document.addEventListener('input', ()=>{
+    document.getElementById('event-input').style.display = 'block';
+  })
+  document.addEventListener('change', ()=>{
+    document.getElementById('event-change').style.display = 'block';
+  })
+</script>
 </body>
 </html>