Bug 1780436 - Use querySelector in getFormElementByName instead of namedItem. r=sgalich

Differential Revision: https://phabricator.services.mozilla.com/D154670

toolkit/components/satchel/test/satchel_common.js

@@ -26,28 +26,16 @@ const TelemetryFilterPropsAC = Object.freeze({
  * Returns the element with the specified |name| attribute.
  */
 function getFormElementByName(formNum, name) {
-  let form = document.getElementById("form" + formNum);
-  if (!form) {
-    ok(false, "getFormElementByName couldn't find requested form " + formNum);
+  const formElement = document.querySelector(
+    `#form${formNum} [name="${name}"]`
+  );
+
+  if (!formElement) {
+    ok(false, `getFormElementByName: Couldn't find specified CSS selector.`);
     return null;
   }
 
-  let element = form.elements.namedItem(name);
-  if (!element) {
-    ok(false, "getFormElementByName couldn't find requested element " + name);
-    return null;
-  }
-
-  // Note that namedItem is a bit stupid, and will prefer an
-  // |id| attribute over a |name| attribute when looking for
-  // the element.
-
-  if (element.hasAttribute("name") && element.getAttribute("name") != name) {
-    ok(false, "getFormElementByName got confused.");
-    return null;
-  }
-
-  return element;
+  return formElement;
 }
 
 function registerPopupShownListener(listener) {

toolkit/components/satchel/test/test_form_submission.html

@@ -202,7 +202,7 @@
 
   <form purpose="saved input with id and not name"
         id="form103">
-    <input type="text" id="test3">
+    <input type="text" name="test3">
     <button type="submit">Submit</button>
   </form>