add focus/blur events when setting value

biloba.go

@@ -92,6 +92,9 @@ func SpinUpChrome(ginkgoT GinkgoTInterface, options ...chromedp.ExecAllocatorOpt
 		chromedp.UserDataDir(tmp),
 	)
 	opts = append(opts, options...)
+	if os.Getenv("BILOBA_INTERACTIVE") != "" {
+		opts = append(opts, chromedp.Flag("headless", false))
+	}
 
 	allocCtx, cancel := chromedp.NewExecAllocator(context.Background(), opts...)
 	ginkgoT.DeferCleanup(cancel)
@@ -335,6 +338,14 @@ func (b *Biloba) Prepare() {
 	if !b.disableProgressReportScreenshots {
 		b.gt.DeferCleanup(b.gt.AttachProgressReporter(b.progressReporter))
 	}
+	if os.Getenv("BILOBA_INTERACTIVE") != "" {
+		b.gt.DeferCleanup(func(ctx context.Context) {
+			if b.gt.Failed() {
+				fmt.Println(b.gt.F("{{red}}{{bold}}This spec failed and you are running in interactive mode.  Biloba will sleep so you can interact with the browser.  Hit ^C when you're done to shut down the suite{{/}}"))
+				<-ctx.Done()
+			}
+		})
+	}
 
 	b.Navigate("about:blank")
 }

biloba.js

@@ -76,15 +76,19 @@ if (!window["_biloba"]) {
             return rErr(`Select input does not have option with value "${v}"`)
         } else if (n.type == "checkbox") {
             if (typeof v != "boolean") return rErr("Checkboxes only accept boolean values")
+            n.focus()
             n.checked = v
+            n.blur()
         } else if (n.type == "radio") {
             if (typeof v != "string") return rErr("Radio inputs only accept string values")
             let o = document.querySelector(`input[type="radio"][name="${n.name}"][value="${v}"]`)
             if (!o) return rErr(`Radio input does not have option with value "${v}"`)
             if (!b.isVisible(o).success) return rErr(`The "${v}" option is not visible`)
             if (!b.isEnabled(o).success) return rErr(`The "${v}" option is not enabled`)
+            o.focus()
             o.checked = true
-            return r(dispatchInputChange(o))
+            o.blur()
+            n = o
         } else if (n.type == "select-multiple") {
             if (!Array.isArray(v)) return rErr("Multi-select inputs only accept []string values")
             let options = [...n.options]
@@ -98,9 +102,13 @@ if (!window["_biloba"]) {
             options.forEach(o => o.selected = false)
             optionsToSelect.forEach(o => o.selected = true)
         } else {
+            n.focus()
             n.value = v
+            n.blur()
         }
-        return r(dispatchInputChange(n))
+        n.dispatchEvent(new Event('input', { bubbles: true }))
+        n.dispatchEvent(new Event('change', { bubbles: true }))
+        return r()
     })
     b.hasProperty = one((n, p) => {
         let v = n

docs/index.md

@@ -1033,6 +1033,15 @@ In general, most input types take and return strings (e.g. `text`, `numeric`, `c
 
 But `checkboxes`, `radio` buttons, and `<select multiple>` elements all behavior differently.  Biloba rationalizes all these differences for you through `GetValue`/`SetValue`/`HaveValue`
 
+When Biloba sets a value it does the following:
+- focus the element
+- update its value (either by setting `el.value` or `el.checked` or `el.selected` etc.)
+- blur the element
+- dispatch an `input` event
+- dispatch a `change` event
+
+That should get _most_ web applications to realize that a form input has been set.  Some applications, though, may be wired up to keyboard events.  Unfortunately it is not possible to simulate these atomically in JavaScript (for security reasons, the browser does not allow synthetic key events to actually type in the application); for these cases you'll need to use `chromedp`s [SendKeys](https://pkg.go.dev/github.com/chromedp/chromedp#SendKeys).
+
 #### Working with Checkboxes
 
 When `selector` refers to a checkbox:
@@ -1043,6 +1052,7 @@ When `selector` refers to a checkbox:
 
 If you want to set/get the Checkboxes' `intermediate` property - or if you prefer to work with the `checked` property directly, use `b.GetProperty/b.SetProperty/b.HaveProperty`.
 
+
 ### Working with Radio buttons
 
 Radio buttons are a bit trickier.  Recall that the browser groups radio buttons by their `name` attribute and that the value of the radio button is associated with its `value` attribute and whether or not the radio button is selected is determined by its `checked` property.