Web测试方法与技术

于 2024-07-10 16:54:31 发布
阅读量930 收藏 24
点赞数 30
分类专栏： 软件测试 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42797317/article/details/140316409
版权

HTML概述（Hyper Text Markup Language）

HTML基本结构

1、网页骨架

用HTML编写的网页中有一些结果是默认且必须存在的，这些结构就叫做网页骨架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>
2、HTML基本标签 
标签
  • 单标签：<标签名 />
  • 双标签：<标签名称><!--标签名称-->
常用标签
  • <!DOCTYPE html>：向浏览器声明当前的文档是HTML类型
  • <html></html>之间的文本描述，<html>是网页中最大的一个标签，称之为根标签
  • <head></head>描述网页头部，里面的内容是给浏览器看的
  • <meta charset="UTF-8">设置当前网页的显示编码
  • <title></title>网页标题，里面的内容会在浏览器的标签页上显示
  • <body></body>网页主体
  • <div></div>定义一个区域
  • <h1></h1>内容显示为网页中的标题
  • <p></p>内容显示为段落
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <div>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <p>段落</p>
    </div>
</body>

标签属性 

HTML标签属性总是以键值对形式出现，基本格式如下：

<标签名 属性1="value1" 属性2="value2"><!--标签名-->

每个标签可以拥有多个属性。属性必须写在开始标签中，位于标签名后面。属性之间不区分顺序。标签名与属性、属性与属性之间使用空格分隔。任何属性都有默认值，省略该属性表示使用默认值。

JavaScript

JS是一种轻量及脚本语言。可以插入HTML页面的代码中，插入HTML页面中的代码可以被所有浏览器执行。JS主要用来向HTML页面添加交互行为。JS可以创建动态的HTML内容，也可以对事件做出反应。

位置

JS脚本必须位于<script></script>之间。<script>可被放置在HTML页面的<body>和<head>部分中。F12进入开发者工具，点击Elements查看

引用方式 
内部引用

在<script></script>之间的代码包含了JS脚本代码。浏览器会解释并执行这些JS代码。

外部引用

<script>的src属性包含了JS外部脚本代码所在的路径。现在网页中大部分都是通过外部引用方式使用JS脚本的。

输出

JS可用不同的方式显示数据，并可在浏览器的开发者工具Console面板中查看输出的内容

  • 警告弹窗
window.alert("Hello World!")
  • 将内容写到HTML文档中，这种方式会覆盖原来的HTML文件中的内容
document.write("Hello World!")
  • 把内容写入浏览器的控制台
console.log("Hello World!")
操作HTML中的DOM 
HTML中的DOM

文档对象模型（Document Object Model，DOM）。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取。JS利用HTML DOM动态地修改网页。HTML DOM模型被结构化为对象树：

查找HTML元素 

当用JS操作DOM修改Web页面上的元素时，首先需要确定修改的是哪一个元素，这就涉及到元素定位问题。JS提供三种定位元素的方式：

  • 通过id定位
Document.getElementById("su")
  • 通过标签名定位
Document.getElementsByTagName("span")
  • 通过类名定位
Document.getElementsByClassName("btn")
修改HTML
  • 改变内容
Document.getElementById("su").innerHTML = "archer"
  • 改变属性
Document.getElementById("su").value="archer"
读取cookie
var x = document.cookie;
使用事件

使用JS脚本还可以实现一些操作，来展示网页中的对应效果

当用户点击鼠标时：

HTML中：

<element onclick="SomeJavaScriptCode">

JS中：

Object.onlick=function(){SomeJavaScriptCode};

CSS（层叠样式表，Cascading Style Sheets）

        用来定义、显示HTML元素。HTML元素的样式通常存储在层叠样式表中。CSS解决了内容与表现分离的问题，通过CSS可以让相同的页面在不同的浏览器中呈现相同的样式。

CSS规则组成

CSS规则由两个主要部分构成：选择器和一条或多条声明。

选择器通常是需要改变样式的HTML元素。每条声明都是一个键值对。

CSS选择器 

CSS需要通过选择器来确定要定义样式的元素。常用的选择器如下：

  • 通用选择器：*
选择器示例说明
**选取所有元素
  • ID选择器：#ID{}
选择器示例说明
#id#firstname选取id为"firstname"的元素
  • CLASS选择器：.CLASSNAME{}
选择器示例说明
.class.intro选择class为"intro"的所有元素
.class1.class2.name1.name2选择class中同时有name1和name2的所有元素
.class1.class2.name1.name2选择作为类名name1元素后代的所有类名为name2的元素
  • 元素选择器：TAG{}
选择器示例说明
elementp选择所有<p>元素
element.classp.intro选择class为"intro"的所有<p>元素
element, elementdiv, p选择所有<div>和所有<p>元素
element elementdiv p选择<div>内的所有<p>元素
element>elementdiv > p选择父元素是<div>的所有<p>元素
element+elementdiv + p选择紧跟<div>元素的首个<p>元素
element~elementp ~ ul选择前面有<p>元素的每个<ul>元素
  • 属性选择器：[属性]{}
选择器示例说明
[attribute][target]选择带有target属性的所有元素
[attribute=value][target=_blank]选择带有target="_blank"属性的所有元素
[attribute~=value][title~=flower]选择title属性包含但是flower的所有元素
[attribute^=value]a[href^="https"]选择其src属性以"https"开头的每个<a>元素
[attribute$=value]a[href$=".pdf"]选择其src属性以".pdf"结尾的所有<a>元素
[attribute*=value]a[href*="abc"]选择其href属性值中包含"abc"子串的每个<a>元素
CSS创建
  • 外部样式
<link rel="stylesheet" type="text/css" href="mystyle.css">
  • 内部样式
<style>
hr {color:sienna;}
p {margin-left:20px;}
</style>
  • 内联样式
<p style="color: sienna; margin-left: 20px">这是一个段落</p>
常见CSS样式
背景样式 
  • background：与网页/标签背景相关的属性样式，都可以在这里进行设置，包括背景的颜色、背景的图像、背景的起始位等，也可以单独对这些属性进行设置
  • background-color：可以单独设置元素的背景颜色
  • background-image：可以单独设置网页/标签的背景图片
  • background-position：可以单独设置网页/标签的背景图像的起始位置
  • background-repeat：可以单独设置网页/标签的背景图像是否平铺
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <style>
        p {
            background-color: red;
        }
        body {
            background-image: url("wx_icon.jpg");
            background-repeat: repeat;
            background-position: right top;
        }
    </style>
</head>
<body>
<div id="first" class="content">
    <p>设置了红色背景</p>
</div>

</body>
</html>

文本样式 
  • color：设置文本颜色
  • text-align：对齐元素中的文本
  • text-decoration：向文本中添加修饰
  • text-indent：缩进元素中文本的首行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        h1 {
            color: blue;
        }
        p {
            color: green;
            text-align: right;
            text-decoration: underline;
            text-indent: 50px;
        }
    </style>
</head>
<body>
<div id="first" class="content">
    <h1>标题1</h1>
    <p>background-color：可以单独设置元素的背景颜色
background-image：可以单独设置网页/标签的背景图片
background-position：可以单独设置网页/标签的背景图像的起始位置
background-repeat：可以单独设置网页/标签的背景图像是否平铺</p>
</div>

</body>
</html>

字体样式
  • font：在一个声明中设置所有的字体属性
  • font-family：指定文本的字体系列
  • font-size：指定文本的字体大小
  • font-style：指定文本的字体样式
  • font-weight：指定字体的粗细
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style>
        p {
            font-family: "Times New Roman";
            font-size: 200%;
            font-style: italic;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="first" class="content">
    <p>background-color：可以单独设置元素的背景颜色</p>
</div>

</body>
</html>

列表 
  • list-style：把所有用于列表的属性设置在一个声明中
  • list-style-image：将图像设置为列表项标志
  • list-style-type：设置列表项标值类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style>
        ul {
            list-style-image: url("Chrome_icon.png");
            list-style-type:circle
        }
    </style>
</head>
<body>
<div id="first" class="content">
    <ul>
      <li>archer</li>
      <li>saber</li>
      <li>lancer</li>
    </ul>
</div>

</body>
</html>

表格 
  • border：设置表格边框
  • border-collapse：设置表格的边框是否被折叠成一个单一的边框
  • width：定义表格的宽度
  • text-align：设置表格中的文本对齐方式
  • padding：设置表格中的填充
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        #stu {
            border-collapse: collapse;
            width: 100%;
        }
        #stu td, #stu th {
            border: 1px solid red;
            padding: 8px;
        }
    </style>
</head>
<body>
<table id="stu">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
    </tr>
    <tr>
        <th>竹筒饭</th>
        <th>18</th>
        <th>航空母舰</th>
    </tr>
    <tr>
        <th>archer</th>
        <th>19</th>
        <th>武装直升机</th>
    </tr>

</table>

</body>
</html>

定位 
  • static：没有定位
  • relative：相对定位
  • fixed：元素的位置相对于浏览器窗口是固定位置
  • absolute：绝对定位，元素的位置相对于最近的以定位父元素
  • sticky：黏性定位，基于用户的滚动位置来定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        div.static {
            position: static;
            border: 3px solid green;
        }
        div.relative {
            position: relative;
            left: 30px;
            border: 3px solid blue;
        }
    </style>
</head>
<body>
    <h1>定位</h1>
    <p>设置不同定位</p>
    <div class="static">
        正常文档流定位
    </div>
    <div class="relative">
        相对定位
    </div>
</body>
</html>

盒子模型 

        所有HTML元素可以看作盒子。CSS盒子模型本质上是一个盒子，用以封装HTML元素，它包括内外边距、边框、内容。

Margin（外边距）：边框外的区域，外边距是透明的

Border（边框）：围绕在内边距和内容外的边框 

Padding（内边距）：介于内容外和边框内边的区域，内边距是透明的

Content（内容）：盒子的内容，显示文本或图像

竹筒饭啊
关注
专栏目录
Web测试技术大全
01-30
Web测试技术大全
用户端Web测试方法与技术
qq_56444564的博客
07-07 363
DNS（Domain Name System，域名系统）是互联网中用于将易于记忆的域名（如www.example.com）转换为对应的IP地址（如192.0.2.1）的系统。顶级域名服务器知道下一级域名服务器的地址，它会向本地DNS服务器提供对应的下一级域名服务器的地址。通过DNS解析，用户不需要记住复杂的IP地址，只需要输入易于记忆的域名，就能访问到互联网上的各种资源。根域名服务器知道整个DNS系统的层次结构，并向本地DNS服务器提供一个顶级域名服务器的地址。输入域提示信息不明确。Network 面板。
全网最全，Web测试点详细整理（测试场景举例+常见问题分析）
m0_70102063的博客
06-20 4687
Web测试检查表功能测试、接口测试、性能测试、安全测试、兼容性测试1、功能测试测试网页中的所有链接、数据库连接、网页中用于提交或从用户处获取信息的表单、Cookie等。链接：外链。内部链接。同一页面上跳转的链接。邮件 孤立页；表单：每个字段及默认值。错误的输入的处理 可选和必选域；Cookie测试：在写入用户机器之前，测试Cookie是否已经加密。如果你正在测试会话cookie（即会话结束后过期的cookie），请检查会话结束后的登录会话和用户统计。通过删除cookie来检查对应用安全的影响。
Web测试技术
最新发布
nuts66的博客
04-26 750
后端测试较复杂，可分为：性能指标测试、压力测试、负载测试、容量测试，一般使用专业性能测试工具，如Jmeter和LoadRunner。OSI协议模型（7层）：物理层、数据链路层、网络层（将网络地址翻译成对应的物理地址）、传输层、会话层、表示层、应用层。C/S结构（客户端、服务器）、B/S结构（web浏览器、web服务器、数据库服务器）前端测试需要关注：加载时间、页面容量、资源数量、本地缓存、请求数量。TCP/IP协议模型（4层）：网络接口层、网络层、传输层、应用层。协议://主机IP[:端口]/资源路径。
WEB端测试技术
qq_44411339的博客
07-06 1158
对于Web 应用系统需要开展的测试涉及到功能、性能、安全，兼容性等各个方面。在开展其它类型测试之前，功能测试与兼容性测试通常是最先开展的测试。a：连接测试：b：表单测试：c：应用程序铁定的功能需求d：测试人员需要对应程序特点的功能需求进行验证e: 兼容性测试：f： Web应用的肝功能在不同的操作系统与浏览器进行验证Web 界面是用户与系统对接的窗口，在Web系统测试中占据的重要的地位。试想，一个web点上系统如果界面布局不可合理，内容不完整，功能不齐全，给用户的体验是非常不好的。因此需要从不同层面开展测试。
【web测试技术】
m0_67831639的博客
10-21 215
整合
[ZZ]Web测试方法
weixin_33795093的博客
12-15 1280
测试中心  刘艳会  在Web工程过程中，基于Web系统的测试、确认和验收是一项重要而富有挑战性的工作。基于Web的系统测试与传统的软件测试不同，它不但需要检查和验证是否按照设计的要求运行，而且还要测试系统在不同用户的浏览器端的显示是否合适。重要的是，还要从最终用户的角度进行安全性和可用性测试。然而，Internet和Web媒体的不可预见性使测试基于Web的系统变得困难。因此，我们必须为测试和评...
技术分享 | Web测试方法与技术之JavaScript 讲解
hogwarts_beibei的博客
04-08 752
JavaScript 是脚本语言，是一种轻量级的编程语言，可以插入 HTML 页面的编程代码。插入 HTML 页面后，可由所有的现代浏览器执行。 JavaScript 可以直接写入 HTML 输出流，也就是直接改变 HTML 的内容。也可以对事件做出反应，比如鼠标点击之后弹出弹窗，或者改变样式之类的。 位置 JavaScript 脚本必须位于 HTML 文档中<script>与</script>标签之间。<script>可被放置在 HTML 页面的&...
WEB测试技术
贪财好色的斜杠人生
02-07 2051
一，web测试和传统测试的区别 相同点：1，测试内容：功能性，易用性，性能，兼容性，安全性等 2，测试方法：因果图法，边界值法，场景法等 3，测试手段：人工测试，工具测试，评估等 不同点：web测试更加注重性能点和安全性。web测试在性能方面更关注系统处理能力，最大并发数，事务响应时间等；传统测试更关注CPU，内存，系统资源使用情况等...
如何做功能测试-功能测试用例及测试方法
smelllu的博客
04-16 5968
如何做功能测试-功能测试用例及测试方法
Web网站测试流程和方法
热门推荐
ting_chuzhuang的博客
04-06 3万+
Web网站测试流程和方法（转载） 1测试流程与方法 1.1测试流程 进行正式测试之前，应先确定如何开展测试，不可盲目的测试。一般网站的测试，应按以下流程来进行： 1）使用HTML Link Validator将网站中的错误链接找出来； 2）测试的顺序为：自顶向下、从左到右； 3）查看页面title是否正确。（不只首页，所有页面都要查看）； 4）LOGO图片是否正确显示； 5）LOG
技术分享 | Web测试方法与技术实战演练
ceshiren2022的博客
05-16 104
技术分享 | Web测试方法与技术实战演练
Web测试方法
lanjingling_zz的博客
09-21 7074
最近做某项目，项目要求采用B/S架构进行系统总体构建，此次测试为面向Web的测试，现整理出面向web测试设计测试用例时需要考虑的因素。 一、功能测试 首先需要将系统和需求说明书中的功能需求进行对比，查看是否有不一致的地方。 功能测试主要包括：链接测试、表单测试、内容测试、页面测试、数据库测试。下面来分别介绍各个测试的主要内容。 链接测试主要内容：测试所链接的页面是否存在，测试所有链接是否确...
测试入门（菜鸟篇）
qq_30020875的博客
10-08 728
一、输入框 1、字符型输入框： （1）字符型输入框：英文全角、英文半角、数字、空或者空格、特殊字符“~！@#￥%……&*？[]{}”特别要注意单引号和&符号。禁止直接输入特殊字符时，使用“粘贴、拷贝”功能尝试输入。 （2）长度检查：最小长度、最大长度、最小长度-1、最大长度+1、输入超工字符比如把整个文章拷贝过去。 （3）空格检查：输入的字符间有空格、字符前有空格、字符后有空格、字...
Web API接口开发和测试
耀的专栏
07-10 1906
4、ASP.NET Web API的开发 上面我们定义了一般的Web API接口，以及实现相应的业务实现，如果我们需要创建Web API层，还需要构建一个Web API项目的。 创建好相应的项目后，可以为项目添加一个Web API基类，方便控制共同的接口。 然后我们就可以在Controller目录上创建更多的应用API控制器了。 最后我们为了统一所有的API接口都是返回JSON方式，我们需要对WebApiConfig里面的代码进行设置下。 public sta...
Web测试方法与技术详解：提升用户体验的关键
Web测试技术是针对网络应用的专门测试手段，随着Web应用的普及和企业对B/S架构的依赖增强，测试方法和技术的重要性日益凸显。本文档旨在提供一个全面的概述，以帮助读者理解并应用于实际工作中。 1. **概述** - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值