测试用前端基础知识
本文最后更新于211 天前,其中的信息可能已经过时

市面常见的软件和系统都分为前端和后端,前端复制显示内容,后端负责处理逻辑

常见的前后端系统架构有MVC(后端架构),MVVM(前端架构),针对不同的编码形式做出不同的处理逻辑。

由于测试涉及的前端知识只集中在前端抓包上,因此暂时不展开其他内容。

Web前端的核心语言为HTML+CSS+JavaScript,其他市面上常见的Web前端语言或框架,如Vue,jQuery等,最终编译的结果都为.html、.css、.js文件
HTML负责网页的架构
CSS负责网页的样式、美化
JS负责网页的简单行为

如图为一个简单的显示时间网页包含的文件
<!-- index.html代码如下 -->
<!DOCTYPE html>
<html lang="en"> <!-- <html>标签为骨架标签 所有html标签都要放在这个标签内 -->
 <head>  <!-- <head>为头标签 负责页面标签和辅助主体页面 -->
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>显示当前时间</title>
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>  <!-- <body>为主体标签 负责网页的主题内容 -->
  <div id="clock"></div>
  <script src="script.js"></script>
 </body>
</html>

HTML是用来描述网页的一种语言,由很多标签<>组成

按F12可以查看网页元素

html常见标签

<!-- 注释标签,常用工具添加注释的快捷键为ctrl+/ -->

<!-- 标题标签 <h1>-<h6>,从1到6默认字体大小逐渐减小
  示例 
-->
<h1>h1</h1>

<!-- 段落标签 可用作换行 -->
<p>段落1</p>
<p>段落2</p>

<!-- 超链接标签 -->
<!-- 当href的链接为远程链接时,需要加上网络协议(http://或者https://) -->
<!-- target属性控制新窗口打开或者本窗口打开 -->
<a href="https://simple.com" target="_blank">simple</a>

<!-- 图片标签 
     src:图片路径
     title:光标悬停显示文字
     alt:图片未加载时显示文字
     width:图片宽度
     height:图片高度
     src分绝对路径和相对路径,项目部署时一般使用相对路径 ./表示当前目录 ../表示上一级目录
-->
<img src="XX/image.jpg" title="图片" alt="loading" width="100" height="142"/>

<!-- 换行 -->
<br/>

<!-- 空格 -->
&nbsp;

<!-- 布局标签 相当于将网页分成一个个容器,在内的标签不会超过容器范围 -->
<div>大容器,独占一行
    <span>小容器,一行可以有多个</span>
</div>

<!-- 表单标签 
     所有的输入标签都要放在表单标签内
     输入标签
     常见的有input,select,textarea,根据属性的不同会有不同效果
     form的属性
        action:目标页面
        method:
               get:参数在url中显示,速度相对于post较快,提交内容长度有限制,一般用作查询
               post:参数不在url中显示,速度较慢,提交内容长度无限制,一般用作数据提交使用(登录等)
-->
<form action="这里放输入数据流向的目标页面.html" method="get">
     <input type="text"/>文本框
     <input type="password"/>密码框
     <input type="radio" name="1"/>单选框
     <input type="radio" name="1"/>另一个单选框
     <input type="checkbox"/>复选框1
     <input type="checkbox"/>复选框2
     <input type="checkbox"/>复选框3
     <select>
         <option>下拉框1</option>
         <option>下拉框2</option>
     </select>
     <textarea cols="10" rows="5">10列5行长文本框</textarea>
     <input type="button" value="按钮"/>
     <input type="summit/>
</form>

在软件测试中,对于页面标签,只需要能够阅读各个控件的含义即可,在实操中,通常通过f12查看页面元素,通过光标查看需要测试的部分

如图为百度输入框的控件

上文提到的表单<form>。网页各个模块之间的数据传递通常都通过表单进行
在浏览网页的过程中,我们可以通过监听网络端口,分析网络的请求和相应,这一过程叫做抓包。
抓包:抓取客户端发送服务器的数据包/服务器响应客户端的请求包
抓包可以让我们了解网页的各种活动,也能对网页生成和返回的数据进行提取

点击设置后的网络活动

在测试过程中,在涉及到服务器和网络的程序中,我们通常需要通过抓包来验证一些功能的可行性
如前端对输入账号密码进行验证,如果我们想查看数据是否被正确传输到后端,可以通过抓包来进行监控。

常用的抓包工具有浏览器自带的F12和charles

Charles安装/破解教程见charles安装和激活教程 – 常疯大虾 – 博客园 (cnblogs.com)

抓包详情见另一篇接口测试的文章https://wfqn.xyz/archives/244

文末附加内容
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇