1. HTML tags and elements
(1) HTML tags
HTML tags are a key part used to define the structure of an HTML document. They are used to mark up HTML elements that tell the browser how to display web page content. HTML tags are usually surrounded by angle brackets <and , eg . Tags are divided into start tags and end tags. The start tag is used to define the beginning of an element, and the end tag is used to define the end of an element. The form of the closing tag is to precede the opening tag with a slash , eg .><tagname>/</tagname>
(2) HTML elements
An HTML element is a complete building block consisting of HTML tags, element content, and attributes. An HTML element consists of an opening tag, an closing tag, and content in between. The content of an element is the text that appears between the start and end tags, other nested elements, or whitespace.
The following shows the use of HTML tags and elements:
<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 attributes
HTML attributes are properties used to provide additional information or configure HTML elements. Attributes are located in the start tag of HTML tags and are represented in the form of key-value pairs, where the key is the name of the attribute and the value is the value of the attribute. Attributes help us control the behavior, styling, and interaction of elements.
(1) id attribute: used to assign a unique identifier to the element, usually used to locate and manipulate elements in JavaScript or CSS.
<div id="main-content">This is the main content.</div>
(2) class attribute: used to specify one or more class names for elements, usually used to organize and style elements.
<p class="highlighted">This paragraph is highlighted.</p>
(3) src attribute: used to specify the URL of external resources such as images, audio, and video.
<img src="image.jpg" alt="An image">
(4) href attribute: used to specify the target URL of the link.
<a href="https://www.example.com">Visit Example Website</a>
(5) alt attribute: It is used to provide alternative text for the image, and this text will be displayed when the image cannot be displayed.
<img src="image.jpg" alt="An image">
(6) type attribute: used to specify the type of input element, such as text input box, check box, radio button, etc.
<input type="text" name="username">
(7) value attribute: used to specify the default value of the input element, usually used in the form.
<input type="text" name="username" value="John">
3. Form elements
Form elements (Form Elements) are elements in HTML used to collect user input, allowing users to enter data, make selections, or submit data in web pages. Form elements are an important tool for creating interactive web pages and collecting user information.
Here are some common HTML form elements:
(1) Text input box (TEXT Input): used for the user to enter a single line of text.
<input type="text" name="username" placeholder="Enter your username">
(2) Password input box (Password Input): used to enter passwords or other sensitive information, the text will be hidden.
<input type="password" name="password" placeholder="Enter your password">
(3) Multi-line text box (Textarea): used for users to enter multi-line text.
<textarea name="comments" rows="4" cols="50">Enter your comments here...</textarea>
(4) Radio Buttons (Radio Buttons): The user selects one from multiple options.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
(5) Check boxes (Checkboxes): y users can select one or more options from multiple options.
<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 menu (Dropdown Menus): The user can select one from the predefined options.
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
</select>
(7) Submit Button: After the user clicks the submit button, the form data will be submitted to the server for processing.
<input type="submit" value="Submit">
4, Frame and iFame
Both Frame and iframe are used to create an inline frame in a web page, nesting a web page document within another web page document. They are commonly used for web page layout and display of multiple independent web page content. Although they function similarly, they are used and behave slightly differently in HTML documents.
（1）Frame
- Frame is an element introduced in HTML4, created using
<frame>and tags.<frameset> <frameset>Tags are used to define the layout of frames, specifying the number and arrangement of frames that should appear in a web page.<frame>Tags are used to specify the content of each frame, they are nested in<frameset>.- Frame allows a webpage to be divided into multiple regions, each region can load different webpage content, and each frame has its own URL and document.
HTML example:
<frameset cols="25%, 75%">
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
</frameset>
（2）iframe
- An iframe is an element introduced in HTML4 and
<iframe>is created using the tag. <iframe>Tags are used to embed a web page within another independent web page, creating an inline frame.- An iframe can display the content of another page nested in the parent page, and the content of the parent page and the child page are independent of each other.
HTML example:
<p>这是父页面的内容。</p>
<iframe src="child.html"></iframe>
<p>这是父页面的其他内容。</p>
the difference:
- Frames are created with
<frameset>and<frame>tags, while iframes only need to use<iframe>tags. - Frame allows a web page to be divided into multiple areas, and each area displays a different web page, while an iframe nests a web page within another web page.
- Frames have a more complex layout and hierarchy, while iframes are simple inline frames.
In Selenium automated testing, when the page contains frame or iframe elements, you need to use switch_to.frame()the method to switch to the corresponding frame or iframe for positioning and operation.
5. xpath and css selectors
(1) XPath (XML Path Language) is a query language used to locate nodes in an XML document. It can be used to locate elements in HTML documents and is a powerful element positioning method often used in web automation testing. XPath uses path expressions to describe the position of nodes in the document, and XPath can be used to locate elements in HTML documents very flexibly.
Some basic concepts and usage of XPath are as follows:
-
Nodes: In HTML documents, nodes can be elements, attributes, text, or other types. Element nodes are the HTML tags themselves, while text nodes contain the text content within the tags.
-
Path Expression (Path Expression): XPath uses path expressions to locate nodes. Path expressions can be absolute or relative. Absolute paths start from the root node, while relative paths start from the current node.
-
Node relationship: XPath supports different node relationships to locate elements, such as parent node, child node, sibling node, etc.
-
Predicates: Predicates are used to add conditions to path expressions to more accurately locate elements. Predicates are enclosed in square brackets [].
XPath example:
- Locate an element with a specific id:'
//*[@id="element-id"]'- Target all paragraph elements:'
//p'- Target a specific child element under a parent element:'
//div[@class="parent-class"]/child::a'
In Selenium, you can use find_element_by_xpath()methods to locate elements via XPath, for example:
element = driver.find_element_by_xpath("//input[@id='username']")
(2) CSS selector
A CSS selector (Cascading Style Sheets Selector) is a pattern for selecting elements in an HTML document. It is part of CSS (Cascading Style Sheets), but can also be used in Selenium to locate and select elements on a web page. CSS selectors use element tag names, classes, IDs, attributes, etc. to locate elements, which is a concise and powerful positioning method.
Some common uses of CSS selectors are as follows:
1. Tag Selector (Tag Selector): Select elements by their tag names.
p {
color: red;
}
2. Class Selector (CLass Selector): Select elements by their class names.
.highlighted {
background-color: yellow;
}
3. ID Selector (ID Selector): Select the unique element by the ID of the element.
#header {
font-size: 24px;
}
4. Attribute Selector (Attribute Selector): Select the element through the attribute of the element.
input[type="text"] {
border: 1px solid gray;
}
5. Combination Selector: You can combine multiple conditions to select elements.
div.header a.button {
color: blue;
}
The following is an example of the application of CSS selectors in Selenium:
1) Locate elements by ID selector:
element = driver.find_element_by_css_selector("#element-id")
2) Locate elements by class selector:
element = driver.find_element_by_css_selector(".class-name")
3) Locate elements by tag name selector:
element = driver.find_element_by_css_selector("p")
4) Locating elements by combining selectors:
element = driver.find_element_by_css_selector("div.header a.button")
5) Locate elements via attribute selectors:
element = driver.find_element_by_css_selector("input[type='text']")
6) Position multiple elements:
elements = driver.find_elements_by_css_selector(".item")