前端基础+UI自动化测试元素定位方式

MRJJ_9

已于 2023-09-09 16:16:12 修改

阅读量418

点赞数

分类专栏：前端技术测试技术文章标签：前端

于 2023-07-24 17:10:23 首次发布

本文链接：https://blog.csdn.net/MRJJ_9/article/details/131886941

版权

测试技术同时被 2 个专栏收录

48 篇文章 3 订阅

订阅专栏

前端技术

15 篇文章 0 订阅

订阅专栏

前言：做测试时也需要对前端的基础知识有所了解，了解下SAAS服务中前端是如何实现，在页面上呈现的元素以及操作的事件，有助于去做一个测试平台写个页面，或者做UI自动化测试，去更好地定位元素。前端三要素是html、css、js，本文主要从这三要素开始学起。

一、前端基础

先来了解下html的标签：

下面写一个静态的网页，注意标签都是成对出现的，h标签表示标题，div标签：没有具体的含义，用来划分页面的区域，独占一行，span标签没有换行的效果，span标签和div标签的具体使用效果可参考下面的这篇博客：HTML＜DIV＞常用标签_div标签_朵朵宝的博客-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world html</title>
</head>
<body>
<h1>标题展示 自带换行效果</h1>
<h1>One</h1>
<h2>Two</h2>
<h3>Three</h3>
<h4>Four</h4>
<h5>Five</h5>
<h6>Six</h6>
<div>这是div标签1 hello</div>
<div>这是div标签2 world</div>
</br>
<span>hello</span>
<span>span标签没有换行效果world</span>
</br>
</body>

可以看到csdn社区分成很多区块，用到了大量的div标签

用到span标签的例子：

此处代码涉及到常用的以下标签的使用：

a标签、input标签、label标签、select标签、ul标签、ol标签、table标签

注意input标签里如果是单选框，则name的值要相等，否则可以多选。

涉及到链接、以及鼠标悬浮上去展示文字，常用的输入选择框，点击提交后页面的跳转，表格，网页的内嵌。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world html</title>
</head>
<span>这是a标签 超链接</span>
<br></br>
<a href="https://www.baidu.com" target="_blank" title="点击一下，了解更多">
<img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
</a>
</br>
<a href = "https://sghimages.shobserver.com/img/catch/2023/07/23/ebdd00ca-e9a0-4c63-bfcf-8bee9c079d9f.jpg">这是图片</a>
</br>
</br>
<form action="./helloworld.html">
    <input type="text" name="username" placeholder="用户名/手机号/邮箱"></br>
    </br>
    <input type="password" name="password"placeholder="密码"></br>
    </br>
    <input type="submit" value="登录">
    </br>
    </br>
    <label>
    <input type="radio" name="童年" value="9">test1</label>
    <label><input type="radio" name="童年" value="1">test2</label>
        <label><input type="radio" name="少年" value="2">test3</label>
    </br>
    </br>
    <label><input type="checkbox" name="老年" value="1">learn1</label>
    <label><input type="checkbox" name="老年1" value="2">learn2</label>
    </br>
    </br>
    <select>
        <option value="11">world1
        </option>
        <option value="22">world2
        </option>
        <option value="33">world3
        </option>
    </select>
    </br>

</form>
<div>
    <h6>
        <ul>
            <li>learning1</li>
            <li>learning2</li>
            <li>learning3</li>
        </ul>
        <ol>
            <li>admin</li>
            <li>user1</li>
            <li>user2</li>
        </ol>
        <table border="2px",cellpadding="2px">
            <thead>
            <tr>
                <th>test1</th>
                <th>test2</th>
            </tr>
            </thead>
            <tbody>
            <tr><td>java</td><td>test1</td></tr>
            <tr><td>python</td><td>tes2</td></tr>
            </tbody>
        </table>
    </h6>
</div>
<iframe src="helloworld.html"></iframe>
</html>