dispatch input and change events at the chromedp.SetValue target

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>