1、HTML标签和元素
(1)HTML标签
HTML标签是用于定义HTML文档结构的关键部分。它们用于标记HTML元素,告诉浏览器如何显示网页内容。HTML标签通常由尖括号 <
和 >
包围,例如 <tagname>
。标签分为起始标签和结束标签,起始标签用于定义元素的开始,结束标签用于定义元素的结束。结束标签的形式是在起始标签前加上斜杠 /
,例如 </tagname>
。
(2)HTML元素
HTML元素是由HTML标签、元素内容和属性组成的完整构建块。一个HTML元素包含一个起始标签、一个结束标签和之间的内容。元素的内容是出现在起始标签与结束标签之间的文本、其他嵌套的元素或空白字符。
如下,展示了HTML标签和元素的使用:
<p>This is a paragraph element.</p> #<p>为段落标签
<a href="https://www.example.com">This is a link element.</a> #<a>为链接标签,href是链接元素的属性
<img src="image.jpg" alt="An image"> #<img>是图像标签,src 和 alt 是图像元素的属性
2、HTML属性
HTML属性是用于提供额外信息或配置HTML元素的特性。属性位于HTML标签的起始标签中,并以键值对的形式表示,其中键是属性的名称,值是属性的取值。属性可以帮助我们控制元素的行为、样式和交互。
(1)id属性:用于给元素指定一个唯一的标识符,通常用于在JavaScript或CSS中定位和操作元素。
<div id="main-content">This is the main content.</div>
(2)class属性:用于给元素指定一个或多个类名,通常用于组织和样式元素。
<p class="highlighted">This paragraph is highlighted.</p>
(3)src属性:用于指定图像、音频、视频等外部资源的URL。
<img src="image.jpg" alt="An image">
(4)href属性:用于指定链接的目标URL。
<a href="https://www.example.com">Visit Example Website</a>
(5)alt属性:用于提供图像的替代文本,当图像无法显示时会显示这个文本。
<img src="image.jpg" alt="An image">
(6)type属性:用于指定输入元素的类型,如文本输入框、复选框、单选按钮等。
<input type="text" name="username">
(7)value属性:用于指定输入元素的默认值,通常在表单中使用。
<input type="text" name="username" value="John">
3、表单元素
表单元素(Form Elements)是HTML中用于收集用户输入的元素,允许用户在网页中输入数据、进行选择或提交数据。表单元素是创建交互式网页和收集用户信息的重要工具。
以下是一些常见的HTML表单元素:
(1)文本输入框(TEXT Input):用于用户输入单行文本。
<input type="text" name="username" placeholder="Enter your username">
(2)密码输入框(Password Input):用于输入密码或其他敏感信息,文本会被隐藏。
<input type="password" name="password" placeholder="Enter your password">
(3)多行文本框(Textarea):用于用户输入多行文本。
<textarea name="comments" rows="4" cols="50">Enter your comments here...</textarea>
(4)单选按钮(Radio Buttons):用户从多个选项中选择一个。
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
(5)复选框(Checkboxes):y用户可以从多个选项中选择一个或多个选项。
<input type="checkbox" name="hobbies" value="reading"> Reading
<input type="checkbox" name="hobbies" value="cooking"> Cooking
<input type="checkbox" name="hobbies" value="sports"> Sports
(6)下拉菜单(Dropdown Menus):用户可以从预定义的选项中选择一个。
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
(7)提交按钮(Submit Button):用户点击提交按钮后,表单数据会被提交给服务器进行处理。
<input type="submit" value="Submit">
4、Frame和ifame
Frame和iframe都是用于在网页中创建内联框架,将一个网页文档嵌套在另一个网页文档中。它们常用于网页布局和显示多个独立的网页内容。虽然它们的功能相似,但它们在HTML文档中的使用和行为略有不同。
(1)Frame
- Frame 是 HTML4 中引入的元素,使用
<frame>
和<frameset>
标签来创建。 <frameset>
标签用于定义框架的布局,指定网页中应该出现的框架数量和排列方式。<frame>
标签用于指定每个框架的内容,它们是嵌套在<frameset>
中的。- Frame 允许将网页划分为多个区域,每个区域可以加载不同的网页内容,每个 frame 有自己的 URL 和文档。
HTML示例:
<frameset cols="25%, 75%">
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
</frameset>
(2)iframe
- iframe 是 HTML4 中引入的元素,使用
<iframe>
标签来创建。 <iframe>
标签用于在一个网页中嵌入另一个独立的网页,创建内联框架。- iframe 可以在父页面中嵌套显示另一个页面的内容,父页面和子页面的内容是相互独立的。
HTML示例:
<p>这是父页面的内容。</p>
<iframe src="child.html"></iframe>
<p>这是父页面的其他内容。</p>
区别:
- Frame 是通过
<frameset>
和<frame>
标签来创建,而 iframe 只需要使用<iframe>
标签。 - Frame 允许将网页分割成多个区域,每个区域显示不同的网页,而 iframe 是将一个网页嵌套在另一个网页中显示。
- Frame 具有更复杂的布局和层次结构,而 iframe 是简单的内联框架。
在Selenium自动化测试中,当页面包含 frame 或 iframe 元素时,需要使用 switch_to.frame()
方法来切换到相应的 frame 或 iframe,以便在其中进行定位和操作。
5、xpath和css选择器
(1)XPath(XML Path Language)是一种用于在XML文档中定位节点的查询语言。它可以用于在HTML文档中定位元素,是Web自动化测试中经常使用的一种强大的元素定位方法。XPath使用路径表达式来描述节点在文档中的位置,可以通过XPath在HTML文档中非常灵活地定位元素。
XPath的一些基本概念和用法如下:
-
节点(Nodes): 在HTML文档中,节点可以是元素、属性、文本或其他类型。元素节点是HTML标签本身,而文本节点包含在标签中的文本内容。
-
路径表达式(Path Expression): XPath使用路径表达式来定位节点。路径表达式可以是绝对路径或相对路径。绝对路径从根节点开始,而相对路径从当前节点开始。
-
节点关系: XPath支持不同的节点关系来定位元素,如父节点、子节点、兄弟节点等。
-
谓语(Predicates): 谓语用于在路径表达式中添加条件,以更准确地定位元素。谓语包含在方括号 [] 中。
XPath示例:
- 定位具有特定ID的元素:'
//*[@id="element-id"]'
- 定位所有段落元素:'
//p'
- 定位父元素下的特定子元素:'
//div[@class="parent-class"]/child::a'
在Selenium中,可以使用find_element_by_xpath()
方法来通过XPath定位元素,例如:
element = driver.find_element_by_xpath("//input[@id='username']")
(2)CSS选择器
CSS选择器(Cascading Style Sheets Selector)是一种用于在HTML文档中选择元素的模式。它是CSS(层叠样式表)的一部分,但同样可以在Selenium中用于定位和选择网页上的元素。CSS选择器使用元素的标签名、类、ID、属性等来定位元素,是一种简洁而强大的定位方法。
CSS选择器的一些常见用法如下:
1.标签选择器(Tag Selector):通过元素的标签名来选择元素。
p {
color: red;
}
2.类选择器(CLass Selector):通过元素的类名来选择元素。
.highlighted {
background-color: yellow;
}
3.ID选择器(ID Selector):通过元素的ID来选择唯一元素。
#header {
font-size: 24px;
}
4.属性选择器(Attribute Selector):通过元素的属性来选择元素。
input[type="text"] {
border: 1px solid gray;
}
5.组合选择器(Combination Selector):可以结合多个条件来选择元素。
div.header a.button {
color: blue;
}
以下是CSS选择器在Selenium中的应用示例:
1) 通过ID选择器定位元素:
element = driver.find_element_by_css_selector("#element-id")
2) 通过类选择器定位元素:
element = driver.find_element_by_css_selector(".class-name")
3) 通过标签名选择器定位元素:
element = driver.find_element_by_css_selector("p")
4) 通过组合选择器定位元素:
element = driver.find_element_by_css_selector("div.header a.button")
5) 通过属性选择器定位元素:
element = driver.find_element_by_css_selector("input[type='text']")
6) 定位多个元素:
elements = driver.find_elements_by_css_selector(".item")