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

问题描述

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

我试图自动化它，一旦生成 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.
  })
 );

我也无法改变任何东西，因为它是第 3 方库！

编辑：附加 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()

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

错误

Whitelabel 错误页面此应用程序没有显式映射 /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调用

标签： javascriptdom-eventsui-automationkeyboard-events

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

问题描述

解决方案

推荐阅读