您的位置: 首页  >  文章  >  开发测试技巧|辅助开发调试：goolge谷歌浏览器利用F12在控制台输入脚本实现表单自动填充

开发测试技巧|辅助开发调试：goolge谷歌浏览器利用F12在控制台输入脚本实现表单自动填充

分类: 文章 • 2022-11-01 18:11:53
一个开发测试技巧的指引和截图，利用google浏览器的F12调试和Console执行，注入JavaScript脚本实现表单的自动填充和测试。

 

执行的JS脚本. -
文本  隐藏/显示
  1. function DevFillClick( ) {
  2.      
  3.         document.getElementById("txtd_TheName").value = "管理员";
  4.         document.getElementById("txtd_TheCode").value = "管理员";
  5.         
  6.         document.getElementById("txtd_ShowSeq").value = "0";
  7.     
  8. }
  9. DevFillClick();


 

样例页面的HTML. -

 
文本  隐藏/显示
  1. <!-- 用户状态-->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title>
  7.         新增用户状态</title>
  8.     <link href="/Web/css/PM.css?v=20170909" rel="stylesheet" media="all" />
  9.     <script language="javascript" type="text/javascript" src="/Web/js/My97DatePicker/WdatePicker.js"></script>
  10.     <script language="javascript" type="text/javascript" src="/Web/JS/PM.js"></script>
  11. </head>
  12. <body>
  13.     <form name="form1" method="post" action="Detail.aspx" id="form1">
  14. <div>
  15. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTIwNjI4NTk3MA8WBB4DRFBQMrABAAEAAAD/////AQAAAAAAAAAMAgAAAEJlS2luZy5Fa1dlYiwgVmVyc2lvbj0xLjAuMC4wLCBDdWx0dXJlPW5ldXRyYWwsIFB1YmxpY0tleVRva2VuPW51bGwFAQAAAC1lS2luZy5Fa1dlYi5DbGFzc2VzLlBhZ2VQYXJhbXMuSW5wdXRQYWdlUGFyYW0CAAAACW1fSXNDbG9uZQZtX1BrSWQAAQECAAAAAAYDAAAAAAseDEN1clBhZ2VUaXRsZQUS5paw5aKe55So5oi354q25oCBFgJmD2QWDAIBDxYCHgRUZXh0BY8CDQo8IS0tDQpVVEJfQk1fVVNFUl9TVEFUVVMNCueUqOaIt+eKtuaAgQ0KLS0+DQo8YSBocmVmPSJsaXN0LmFzcHgiIGNsYXNzPSJEZWZhdWx0SHJlZiI+55So5oi354q25oCB566h55CGPC9hPiZuYnNwOyZndDsmbmJzcDs8YSBocmVmPSIvV2ViL1dlYkZvcm1zL0FkbXMvQmxhbmtzL0JtL1VzZXIvU3RhdHVzL0RldGFpbC5hc3B4IiBjbGFzcz0iRGVmYXVsdEhyZWYiIHRpdGxlPSJVVEJfQk1fVVNFUl9TVEFUVVMNCueUqOaIt+eKtuaAgSI+5paw5aKe55So5oi354q25oCBPC9hPmQCBw8PFgIeB1Rvb2xUaXAFK+Wtl+aute+8mlRoZU5hbWUNCuivtOaYju+8muWQjeensA0K5ZCN56ewDQpkZAIJDw8WAh8DBSvlrZfmrrXvvJpUaGVDb2RlDQror7TmmI7vvJrku6Plj7cNCuS7o+WPtw0KZGQCCw8QDxYCHwMFqAHlrZfmrrXvvJpFbVVzZXJTdGF0dXNBbGxvd0xvZ2luVg0K6K+05piO77ya55m75b2V6K6+572uIOWFgeiuuC/kuI3lhYHorrgNCueZu+W9leiuvue9rnzmlbDmja7lhbPns7vvvJrmnprkuL58ZUtpbmcuQm1fRW51bS5FbnVtcy5Vc2VyU3RhdHVzQWxsb3dMb2dpblvkuKXmoLzkuIDlr7nkuIBdDQpkEBUDDS0t6K+36YCJ5oupLS0G5YWB6K64CeS4jeWFgeiuuBUDAAExATIUKwMDZ2dnZGQCDQ8PFgIfAwU35a2X5q6177yaU2hvd1NlcQ0K6K+05piO77ya5pi+56S66aG65bqPDQrmmL7npLrpobrluo8NCmRkAg8PDxYCHwMFNOWtl+aute+8mlJlbWFyaw0K6K+05piO77ya5aSH5rOoDQrlpIfms6h85YWB6K6456m6DQpkZGSBlbRO4XUu4O5pNe1NlWrXA7XMoQ==" />
  16. </div>
  17. <div>
  18.   <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="E7EE5254" />
  19.   <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwKhrZ+qAQKSv8qaCwK84/6cBwK58ummDgL5kdGSBwKjwvKAAQKsrdjuDQKtrdjuDQKKqf+zCwLf0LSYBwK1s9viD1mAmEh3f3UIhOHJN2SJtgBAfKWL" />
  20. </div>
  21.     <table width="100%" cellpadding="0" cellspacing="5" border="0">
  22.         <tr>
  23.             <td>
  24.                 <!-- 主导航 -->
  25.                 
  26. <!--
  27. UTB_BM_USER_STATUS
  28. 用户状态
  29. -->
  30. <a href="list.aspx" class="DefaultHref">用户状态管理</a>&nbsp;&gt;&nbsp;<a href="/Web/WebForms/Adms/Blanks/Bm/User/Status/Detail.aspx" class="DefaultHref" title="UTB_BM_USER_STATUS
  31. 用户状态">新增用户状态</a>
  32.             </td>
  33.             <td align="right">
  34.                 <input type="submit" name="btnTwo_Save" value="保存" οnclick="return OnJsSaveClick();" id="btnTwo_Save" />
  35.                 <input type="submit" name="btn_Return" value="返回" id="btn_Return" />
  36.             </td>
  37.         </tr>
  38.         <tr>
  39.             <td colspan="2">
  40.                 <table class="DL" style="width: 100%;">
  41.                     <tbody>
  42.                         <tr class="DL">
  43.                             <td class="DL" align="right" style="width: 20%;">
  44.                                 <span class="ek-ctrl-input-check">*</span>名称：
  45.                             </td>
  46.                             <td class="DLA" style="width: 30%;">
  47.                                 <input name="txtd_TheName" type="text" id="txtd_TheName" title="字段：TheName
  48. 说明：名称
  49. 名称
  50. " style="width:99%;" />
  51.                             </td>
  52.                             <td class="DL" align="right" style="width: 20%;">
  53.                                 <span class="ek-ctrl-input-check">*</span>代号：
  54.                             </td>
  55.                             <td class="DLA" style="width: 30%;">
  56.                                 <input name="txtd_TheCode" type="text" id="txtd_TheCode" title="字段：TheCode
  57. 说明：代号
  58. 代号
  59. " style="width:99%;" />
  60.                             </td>
  61.                         </tr>
  62.                         <tr class="DL">
  63.                             <td class="DL" align="right">
  64.                                 <span class="ek-ctrl-input-check">*</span>登录设置：
  65.                             </td>
  66.                             <td class="DLA">
  67.                                 <select name="ddld_EmUserStatusAllowLoginV" id="ddld_EmUserStatusAllowLoginV" title="字段：EmUserStatusAllowLoginV
  68. 说明：登录设置 允许/不允许
  69. 登录设置|数据关系：枚举|eKing.Bm_Enum.Enums.UserStatusAllowLogin[严格一对一]
  70. " style="width:99%;">
  71.   <option value="">--请选择--</option>
  72.   <option value="1">允许</option>
  73.   <option value="2">不允许</option>
  74. </select>
  75.                             </td>
  76.                             <td class="DL" align="right">
  77.                                 <span class="ek-ctrl-input-check">*</span>显示顺序：
  78.                             </td>
  79.                             <td class="DLA">
  80.                                 <input name="txtd_ShowSeq" type="text" value="0" id="txtd_ShowSeq" title="字段：ShowSeq
  81. 说明：显示顺序
  82. 显示顺序
  83. " style="width:99%;" />
  84.                             </td>
  85.                         </tr>
  86.                         <tr class="DL">
  87.                             <td class="DL" align="right">
  88.                                 备注：
  89.                             </td>
  90.                             <td class="DLA" colspan="3">
  91.                                 <textarea name="txtd_Remark" rows="2" cols="20" id="txtd_Remark" title="字段：Remark
  92. 说明：备注
  93. 备注|允许空
  94. " style="height:70px;width:99%;"></textarea>
  95.                             </td>
  96.                         </tr>
  97.                         <tr class="DL">
  98.                             <td class="DLA" align="right">
  99.                                 &nbsp;
  100.                             </td>
  101.                             <td class="DLA" colspan="3">
  102.                                 <input type="submit" name="btn_Save" value="保存" οnclick="return OnJsSaveClick();" id="btn_Save" />
  103.                             </td>
  104.                         </tr>
  105.                     </tbody>
  106.                 </table>
  107.             </td>
  108.         </tr>
  109.         <tr>
  110.             <td colspan="2">
  111.                 <div style="color: red; text-align: center; margin-top: 40px;">
  112.                     
  113.                     
  114.                     
  115.                 </div>
  116.             </td>
  117.         </tr>
  118.     </table>
  119.     </form>
  120. </body>
  121. </html>
  122. <script language="javascript" type="text/javascript">
  123.     function OnJsSaveClick()
  124.     { 
  125.         var bFlag = true;
  126.         bFlag = TextItemCheck("txtd_TheName", "名称");  
  127.   
  128.         if (!bFlag)  
  129.             return false;  
  130.         bFlag = TextItemCheck("txtd_TheCode", "代号");  
  131.   
  132.         if (!bFlag)  
  133.             return false;  
  134.         bFlag = DropDownListItemCheck("ddld_EmUserStatusAllowLoginV", "登录设置");  
  135.   
  136.         if (!bFlag)  
  137.             return false;  
  138.         bFlag = TextItemCheck("txtd_ShowSeq", "显示顺序");  
  139.   
  140.         if (!bFlag)  
  141.             return false;  
  142.          
  143.         return true;
  144.     }
  145. </script>

开发测试技巧|辅助开发调试：goolge谷歌浏览器利用F12在控制台输入脚本实现表单自动填充

 

 

原始页面.

开发测试技巧|辅助开发调试：goolge谷歌浏览器利用F12在控制台输入脚本实现表单自动填充
 

 

F12并执行脚本的效果.

相关推荐