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

最新推荐文章于 2022-04-17 22:03:35 发布

原创最新推荐文章于 2022-04-17 22:03:35 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

【阳肖JS编程】专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用Google浏览器F12开发者工具和Console执行JavaScript脚本的方法，实现网页表单的自动填充，适用于开发和测试场景。

一个开发测试技巧的指引和截图，利用google浏览器的F12调试和Console执行，注入JavaScript脚本实现表单的自动填充和测试。

执行的JS脚本. -

文本隐藏/显示

function DevFillClick( ) {
document.getElementById("txtd_TheName").value = "管理员";
document.getElementById("txtd_TheCode").value = "管理员";
document.getElementById("txtd_ShowSeq").value = "0";
}
DevFillClick();

样例页面的HTML. -

文本隐藏/显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
新增用户状态</title>
<link href="/Web/css/PM.css?v=20170909" rel="stylesheet" media="all" />
<script language="javascript" type="text/javascript" src="/Web/js/My97DatePicker/WdatePicker.js"></script>
<script language="javascript" type="text/javascript" src="/Web/JS/PM.js"></script>
</head>
<body>
<form name="form1" method="post" action="Detail.aspx" id="form1">
<div>
<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==" />
</div>
<div>
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="E7EE5254" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCwKhrZ+qAQKSv8qaCwK84/6cBwK58ummDgL5kdGSBwKjwvKAAQKsrdjuDQKtrdjuDQKKqf+zCwLf0LSYBwK1s9viD1mAmEh3f3UIhOHJN2SJtgBAfKWL" />
</div>
<table width="100%" cellpadding="0" cellspacing="5" border="0">
<tr>
<td>
<!--
UTB_BM_USER_STATUS
用户状态
-->
<a href="list.aspx" class="DefaultHref">用户状态管理</a> > <a href="/Web/WebForms/Adms/Blanks/Bm/User/Status/Detail.aspx" class="DefaultHref" title="UTB_BM_USER_STATUS
用户状态">新增用户状态</a>
</td>
<td align="right">
<input type="submit" name="btnTwo_Save" value="保存" onclick="return OnJsSaveClick();" id="btnTwo_Save" />
<input type="submit" name="btn_Return" value="返回" id="btn_Return" />
</td>
</tr>
<tr>
<td colspan="2">
<table class="DL" style="width: 100%;">
<tbody>
<tr class="DL">
<td class="DL" align="right" style="width: 20%;">
<span class="ek-ctrl-input-check">*</span>名称：
</td>
<td class="DLA" style="width: 30%;">
<input name="txtd_TheName" type="text" id="txtd_TheName" title="字段：TheName
说明：名称
名称
" style="width:99%;" />
</td>
<td class="DL" align="right" style="width: 20%;">
<span class="ek-ctrl-input-check">*</span>代号：
</td>
<td class="DLA" style="width: 30%;">
<input name="txtd_TheCode" type="text" id="txtd_TheCode" title="字段：TheCode
说明：代号
代号
" style="width:99%;" />
</td>
</tr>
<tr class="DL">
<td class="DL" align="right">
<span class="ek-ctrl-input-check">*</span>登录设置：
</td>
<td class="DLA">
<select name="ddld_EmUserStatusAllowLoginV" id="ddld_EmUserStatusAllowLoginV" title="字段：EmUserStatusAllowLoginV
说明：登录设置允许/不允许
登录设置|数据关系：枚举|eKing.Bm_Enum.Enums.UserStatusAllowLogin[严格一对一]
" style="width:99%;">
<option value="">--请选择--</option>
<option value="1">允许</option>
<option value="2">不允许</option>
</select>
</td>
<td class="DL" align="right">
<span class="ek-ctrl-input-check">*</span>显示顺序：
</td>
<td class="DLA">
<input name="txtd_ShowSeq" type="text" value="0" id="txtd_ShowSeq" title="字段：ShowSeq
说明：显示顺序
显示顺序
" style="width:99%;" />
</td>
</tr>
<tr class="DL">
<td class="DL" align="right">
备注：
</td>
<td class="DLA" colspan="3">
<textarea name="txtd_Remark" rows="2" cols="20" id="txtd_Remark" title="字段：Remark
说明：备注
备注|允许空
" style="height:70px;width:99%;"></textarea>
</td>
</tr>
<tr class="DL">
<td class="DLA" align="right">
 
</td>
<td class="DLA" colspan="3">
<input type="submit" name="btn_Save" value="保存" onclick="return OnJsSaveClick();" id="btn_Save" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<div style="color: red; text-align: center; margin-top: 40px;">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
function OnJsSaveClick()
{
var bFlag = true;
bFlag = TextItemCheck("txtd_TheName", "名称");
if (!bFlag)
return false;
bFlag = TextItemCheck("txtd_TheCode", "代号");
if (!bFlag)
return false;
bFlag = DropDownListItemCheck("ddld_EmUserStatusAllowLoginV", "登录设置");
if (!bFlag)
return false;
bFlag = TextItemCheck("txtd_ShowSeq", "显示顺序");
if (!bFlag)
return false;
return true;
}
</script>