按钮单击在没有键盘/人工中断的情况下不起作用

Question

场景：开发者通过调用外部服务生成JWT Token，生成jwt后，复制粘贴到Swagger的授权部分，点击授权按钮，之后我们可以从swagger中触发API，因为它现在有jwt Token。

我已经尝试自动化它，一旦生成 JWT 我的 JS 代码将在授权部分输入 jwt 令牌并尝试单击授权按钮。但是这里有一些问题，我可以看到 JS 正在尝试单击授权按钮（在控制台中我可以看到该操作）但没有发生任何事情。我还注意到，如果我们从键盘手动添加任何内容，然后按下按钮，它就会起作用。如何在 JS 中模拟这个？

注意：如果我们手动按下/输入键盘上的任何字符，然后触发 z.click() 是否有效？我们如何在 JS 中模拟输入文本的键盘按下？

我试过了，但没有成功：

 document.getElementById("va").dispatchEvent(
 new KeyboardEvent("keydown", {
 key: "e",
 keyCode: 69, // example values.
 code: "KeyE", // put everything you need in this object.
 which: 69,
 shiftKey: false, // you don't need to include values
 ctrlKey: false,  // if you aren't going to use them.
 metaKey: false   // these are here for example's sake.
 })
);



 const txtToken = document.getElementById("jwttoken");

function simulateEnterToken (x,tokens){
var val=x.getElementsByClassName("dialog-ux")[0]
             .getElementsByClassName("modal-ux")[0]
              .getElementsByClassName("modal-dialog-ux")[0]
              .getElementsByClassName("modal-ux-inner")[0]
              .getElementsByClassName("modal-ux-content")[0]
             .getElementsByClassName("auth-container")[0] .getElementsByClassName("wrapper")[1];
   val.getElementsByTagName("input")[0].id="va";
  document.getElementById("va").value=tokens;

 console.log(x);
}


function simulateClickAuthorize(x){
 var y=x.getElementsByClassName("dialog-ux")[0]
         .getElementsByClassName("modal-ux")[0]
          .getElementsByClassName("modal-dialog-ux")[0]
          .getElementsByClassName("modal-ux-inner")[0]
          .getElementsByClassName("modal-ux-content")[0]
         .getElementsByClassName("auth-container")[0]
          .getElementsByClassName("auth-btn-wrapper")[0];
           console.log(y);
       var z=y.getElementsByClassName("btn modal-btn auth authorize button")[0];
   z.click();
    }

添加了 2 个截图以便清晰理解

注意：我也尝试过模拟键盘事件

document.getElementById("va").value.dispatchEvent(new 
KeyboardEvent('keypress',{'key':'a'}));


 document.getElementById("va").dispatchEvent(
 new KeyboardEvent("keydown", {
  key: "e",
  keyCode: 69, // example values.
  code: "KeyE", // put everything you need in this object.
  which: 69,
  shiftKey: false, // you don't need to include values
  ctrlKey: false,  // if you aren't going to use them.
  metaKey: false   // these are here for example's sake.
  })
 );

我也不能改变任何东西，因为它是 3rd 方库！

编辑：附加 Console.log(z) 的输出

编辑 2：表单没有 ID

编辑 3：@Roger 要求提交表单

var val=x.getElementsByClassName("dialog-ux")[0]
             .getElementsByClassName("modal-ux")[0]
              .getElementsByClassName("modal-dialog-ux")[0]
              .getElementsByClassName("modal-ux-inner")[0]
              .getElementsByClassName("modal-ux-content")[0]
             .getElementsByClassName("auth-container")[0]

val.getElementsByTagName("form")[0].submit()

它也没有工作，我得到错误页面

错误

白标错误页面 此应用程序没有 /error 的显式映射，因此您将其视为后备。Mon Jul 20 14:01:11 IST 2020 出现意外错误（类型=错误请求，状态=400）。 必需的字符串参数“产品”不存在

编辑 4：这是我的初始网址

http://localhost:8080/docs?product=test&docid=testapp-swagger-openapi&type=yaml#/person-controller/getPersonUsingGET

点击 submit() 后 url 出现错误

http://localhost:8080/docs?#/person-controller/getPersonUsingGET

点击提交()后的图片/网络控制台

注意：手动点击时没有api调用

Answer 1

为了提交您的表单，我相信您会想要定位您的表单元素并调用submit 方法。

示例（假设页面上只有一个 <form> 元素）：

var formElement = document.getElementByTagName('form')[0];
formElement.submit();