Getting Started with Web Automation Testing: Detailed Analysis of the Composition of Front-end Pages

Currently common front-end pages are composed of HTML+css+JavaScript.

1. HTML:

Role: define the content of the page rendering

HTML is a language used to describe web pages.

HTML stands for Hypertext Markup Language ( H yper T ext Markup Language )
HTML is not a programming language but a markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web pages

Language feature editor:

Hypertext Markup Language document production is not very complicated, but it has powerful functions and supports the embedding of files in different data formats. This is one of the reasons why the World Wide Web (WWW) is popular. Its main features are as follows:

Simplicity: The hypertext markup language version upgrade adopts a superset method, which makes it more flexible and convenient.
Extensibility: The wide application of hypertext markup language brings requirements such as enhanced functions and additional identifiers. Hypertext markup language adopts the method of subclass elements to guarantee system expansion.
Platform independence: Although personal computers are popular, there are many people who use other machines such as MAC. Hypertext Markup Language can be used on a wide range of platforms, which is another reason for the prevalence of the World Wide Web (WWW).
Versatility: In addition, HTML is the universal language of the Internet, a simple and universal all-purpose markup language. It allows web producers to create complex pages that combine text and pictures, and these pages can be browsed by anyone else on the Internet, no matter what type of computer or browser is used.

The essence of web pages is hypertext markup language, and powerful web pages can be created by using other web technologies (such as: scripting language, common gateway interface, components, etc.) in combination. Therefore, Hypertext Markup Language is the basis of World Wide Web (Web) programming, that is to say, the World Wide Web is built on the basis of hypertext. Hypertext Markup Language is called Hypertext Markup Language because the text contains so-called "hyperlink" points.

HTML tags

HTML markup tags are often referred to as HTML tags (HTML tag).

HTML tags are keywords surrounded by angle brackets, such as <html>
HTML tags usually come in pairs, such as <b> and </b>
The first tag in a tag pair is the opening tag and the second tag is the closing tag
Opening and closing tags are also known as opening and closing tags

HTML document = web page

HTML document describing the web page
HTML documents contain HTML tags and plain text
HTML documents are also known as web pages

The job of a web browser is to read HTML documents and display them as web pages. Browsers don't display HTML tags, but use tags to explain the content of the page:

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

1. Introduction to css

CSS is the abbreviation of Cascading Style Sheets, which is called cascading style sheets in Chinese, which is used to control the performance of web page data, and can separate the performance of web pages from the data content

2. Four import methods of css

2.1. Inline style

The inline style is to set the CSS style in the style attribute of the markup. This method does not reflect the advantages of CSS and is not recommended.

<div style="color: red; margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important;">>hello yuan </div>

2.2. Embedded

Embedded is to write the CSS style centrally in the <style></style> tag pair of the <head></head> tag pair of the web page. The format is as follows:

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

p{

background-color: #2b99ff;

}

</style>

</head>

2.3. Link type

Introduce a .css file into an HTML file (commonly used)

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

<link href="test1.css" rel="stylesheet">

2.4. Imported

Import an independent .css file into the HTML file. The import type uses CSS rules to import external CSS files. The <style> tag is also written in the <head> tag. The syntax used is as follows:

<style type="text/css">

@import"mystyle.css"; 此处要注意.css文件的路径

</style>　

Special attention: the import type will load the CSS file after the entire webpage is loaded, so this leads to a problem. If the webpage is relatively large, it will first display the unstyled page, and after a flash, the style of the webpage will appear. This is a flaw inherent in imports. The difference between the link type and the import type is that it will load the CSS file before loading the main body of the web page file, so the displayed web page will have a styled effect from the beginning, and it will not first display the unstyled web page like the import type , and then display a styled web page, which is the advantage of linking.

Three, css selector (selector)

"Selector" indicates the object of the "style" in {}, that is, which elements in the web page the "style" applies to

3.1. Basic selector

1) * Universal element selector, match any element

*{

color: red;

}

2) Label selector, matching all elements using a certain label

01	`p { color:green; }` `#匹配p标签`

3) id selector

#littleP{

background-color: blue;

}

......

<p id="littleP">pppp</p>

4) class selector

.info和E.info: class选择器，匹配所有class属性中包含info的元素

.info { background:#ff0; }

p.info { background:blue; }

3.2. Combined selector

E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 div,p { color:#f00; }

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 li a { font-weight:bold;

E > F 子元素选择器，匹配所有E元素的子元素F div > p { color:#f00; }

E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F div + p { color:#f00; }

Note the nesting rules :

A block-level element can contain inline elements or some block-level elements, but an inline element cannot contain block-level elements, it can only contain other inline elements.
There are a few special block-level elements that can only contain inline elements, not block-level elements . Such as h1, h2, h3, h4, h5, h6, p, dt
li can contain div
Block-level elements juxtapose block-level elements, and inline elements juxtapose inline elements.

Example one:

#littleP,div.cuihua{ #匹配id为littleP，或者标签为div且class为cuihua的标签

color: chartreuse;

}

#++++++++++++++++++++++++++++

#匹配

<p id="littleP">pppp</p>

<div class="cuihua">div</div>

Reference address:

JavaScript：

3.3, attribute selector

E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}

Example:

[alex]{ #匹配属性为alex

color: red;

}

p[alex="dasb"]{ #匹配标签为p标签，且属性值为alex="dasb"

color: blue;

font-family: "Times New Roman";

font-size: 30px;

}

[alex*="b"]{ #匹配属性为alex，且值只要含有b的标签

color: teal;

}

3.4. Pseudo-classes

CSS pseudo-classes are used to add some special effects to selectors.

a:link #（没有接触过的链接）,用于定义了链接的常规状态。

a:hover #（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited #（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active #（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

#伪类选择器 : 伪类指的是标签的不同状态:

a ==> 点过状态没有点过的状态鼠标悬浮状态激活状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

Example:

+ View Code

before after pseudo-class:

:before p:before 在每个<p>元素之前插入内容

:after p:after 在每个<p>元素之后插入内容

p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}

p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}

Four, css priority and inheritance

4.1, css priority

The so-called CSS priority refers to the order in which CSS styles are parsed in the browser.

#样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1 内联样式表的权值最高 style=""-------------------1000

2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-1

#按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

Examples of priorities:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#p{

color: rebeccapurple;

}

.p{

color: #2459a2;

}

p{

color: yellow;

}

</style>

</head>

<body>

<p id="p" class="p" style="color: deeppink">hello yuan</p> #优先级最高

</body>

</html>

4.2, css inheritance

Inheritance is a major feature of CSS, which relies on the ancestor-descendant relationship. Inheritance is a mechanism that allows styles to be applied not only to a particular element, but also to its descendants. For example a color value defined by BODY will also be applied to the text of the paragraph.

01	`body{color:red;} <p>helloyuan</p>`

This text all inherits the color defined by the body {color:red;} style. However, the weight of CSS inheritance is very low, which is 0 lower than the weight of ordinary elements. It is found that only adding a color value can override the style color it inherits. It can be seen from this: any rule declared explicitly can override its inherited style. Furthermore, inheritance is such an important part of CSS that we don't even have to think about why it works like this, but CSS inheritance is also limited. Some attributes cannot be inherited, such as: border, margin, padding, background, etc.

4.3. Additional instructions

1、文内的样式优先级为1000，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。
2、有!important声明的规则高于一切。
3、如果!important声明冲突，则比较优先权。
4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

#div1 .div3 {

color: chartreuse!important; #优先级最高

}

五、css常用属性

5.1、颜色属性

<div style="color:blueviolet">ppppp</div>

<div style="color:#ffee33">ppppp</div>

<div style="color:rgb(255,0,0)">ppppp</div>

<div style="color:rgba(255,0,0,0.5)">ppppp</div> #增加了透明度

5.2、字体属性

font-size: 20px/50%/larger #字体大小

font-family:'Lucida Bright' #字体格式

font-weight: lighter/bold/border/ #字体粗细

<h1 style="font-style: oblique">老男孩</h1>

5.3、背景属性

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

#简写：

<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

5.4、文本属性

font-size: 10px;

text-align: center; #横向排列

line-height: 200px; #文本行高通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px #设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

text-indent: 150px; #首行缩进

letter-spacing: 10px;

word-spacing: 20px;

text-transform: capitalize; #首字母大写

示例：

+ View Code

5.5、边框属性

border-style: solid;

border-color: chartreuse;

border-width: 20px;

#简写：border: 30px rebeccapurple solid;

示例：

+ View Code

5.6、列表属性

ol,ul{

/*list-style: circle;*/

/*list-style: square;*/

/*list-style: lower-latin;*/

list-style: none; #去样式

}

5.7、 display属性

display属性有：none，block，inline，inline-block

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决

最后： 为了回馈铁杆粉丝们，我给大家整理了完整的软件测试视频学习教程，朋友们如果需要可以自行免费领取 【保证100%免费】

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。