Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what are the methods of Selenium using CSS positioning". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

When most people use selenium positioning elements, they use xpath positioning, and css positioning is often ignored. In fact, css positioning also has its value. Css positioning is faster and the syntax is more concise.

1. CSS selector

Common symbols:

# indicates id selector

. Represents a class selector

> represents child elements, levels

A space also represents child elements, but all descendant child elements, which are equivalent to relative paths in xpath

2. CSS: attribute positioning

Css can be located directly through the three general attributes of the element: id, class, and tag

The following is the html code of Baidu input box:

Css uses a # sign to indicate the id attribute, such as: # kw

For css. Represents a class property, such as .s _ ipt

Css uses the tag name directly without any identifiers, such as input

3. CSS: other attributes

Css can be located through three general attributes: tag, class, id or other attributes.

The following is the format for locating other attributes [name=wd] [autocomplete='off'] [maxlength='255'] IV. CSS: tag

Css can locate elements through a combination of tags and attributes

Input.s_ipt input#kw input [id = 'kw'] 5. CSS: hierarchical relationship / / id attribute of form form#form > span > class attribute of input//form form.fm > span > input VI, CSS: index

Css can also locate child elements through an index

Select control third Opel#select > select > option:nth-child (3) CheckBox first Volvo#checkbox > input:nth-child (1) CheckBox second Saab#checkbox > input:nth-child (4) RadioBox second Saab#radio > input:nth-child (4) VII, CSS: logical operation

Css can also perform logical operations and match two attributes at the same time, unlike xpath.

[type='checkbox'] [name='checkbox1']

Eighth, Baidu search box example

Take a look at the CSS location in Baidu's search box.

Positioning input box

Single attribute positioning type selectordriver.find_element_by_css_selector ('input') id positioning driver.find_element_by_css_selector (' # kw') class positioning driver.find_element_by_css_selector ('.s _ ipt') other attribute positioning driver.find_element_by_css_selector ('[name='wd']') driver.find_element_by_css_selector ("[type='text']") combined attribute positioning id Combined attribute positioning driver.find_element_by_css_selector ("input#kw") class combined attribute positioning driver.find_element_by_css_selector ("input.s_ipt") other attribute combination positioning driver.find_element_by_css_selector ("input [name = 'wd']") has only attribute names If there is no value, you can combine two other attributes of driver.find_element_by_css_selector ("input [name]") to locate driver.find_element_by_css_selector ("[name='wd'] [autocomplete='off']"). Click the button on the home page of Baidu as an example.

Fuzzy matching attribute value method

1 > attribute values are separated by multiple spaces Methods that match one of the values driver.find_element_by_css_selector ("input [class~='btn']") 2 > match methods whose attribute values begin with a string driver.find_element_by_css_selector ("input [class^ = 'btn']") 3 > methods that match the end of an attribute value string driver.find_element_by_css_selector ("input [class$='s_btn']") X, difference between CSS and Xpath location

CSS

Css can be located directly through the three general attributes of the element: id, class, and tag.

1. Css uses a # sign to indicate the id attribute, such as:

Id= "kw" can be written as: # kw

two。 For css. Represents a class attribute, such as:

Class= "s_ipt" can be written as: .s_ipt

3. Css uses the tag name directly without any identifiers, such as input

Xpath

Xpath can also be located through the attributes of id, name and class of the element.

1. Use xpath to locate through the id attribute

Driver.find_element (By.XPATH, "/ / [@ id='kw']")

two。 Use xpath to locate through the name attribute

Driver.find_element (By.XPATH, "/ / [@ name='wd']")

3. Use xpath to locate through the class attribute

Driver.find_element (By.XPATH, "/ / * [@ class='s_ipt']")

Other attributes

CSS

In addition to the above, css can also be located through other attributes

1. Css locates through the name attribute:

Driver.find_element (By.CSS_SELECTOR, "[name='wd']")

two。 Css locates through the autocomplete attribute:

Driver.find_element (By. CSS_SELECTOR, "[autocomplete='off']")

③ .css is located through the type attribute:

Driver.find_element (By.CSS_SELECTOR, "[type='text']")

Xpath

Without the above attributes, you can locate them through other attributes.

Driver.find_element (By.XPATH, "/ / * [@ autocomplete='off']")

Label

CSS

Css pages can locate elements through a combination of tags and attributes

1. Css locates driver.find_element (By.CSS_SELECTOR, "input.s_ipt") through a combination of tags and class attributes

two。 Css locates driver.find_element (By.CSS_SELECTOR, "input#kw") through a combination of tags and id attributes

3. Css locates driver.find_element by combining tags with other attributes (By.CSS_SELECTOR, "input [id = 'kw']")

Xpath

1. If there are more of the same attribute with the same name, you can filter through the tag.

1. Use xpath to locate driver.find_element through other attributes (By.XPATH, "/ / input [@ autocomplete='off']")

two。 Use xpath to locate driver.find_element through the id attribute (By.XPATH, "/ / input [@ id='kw']")

3. Use xpath to locate driver.find_element through the name attribute (By.XPATH, "/ / name [@ id='wd']")

Hierarchical relationship

CSS

For example, / / form [@ id='form'] / span/input and / / form [@ class='fm'] / span/input

1. Css locates driver.find_element through hierarchical relationships (By.CSS_SELECTOR, "form#form > span > input")

two。 Css locates driver.find_element through hierarchical relationships (By.CSS_SELECTOR, "form.fm > span > input")

Xpath

1. If the attribute of an element is not obvious and cannot be located directly, you can find its parent element first, and then find the next level.

1. Locate the input input box driver.find_element (By.XPATH, "/ / span [@ id='s_kw_wrap'] / input") by locating the parent element.

two。 Locate the input input box driver.find_element (By.XPATH, "/ / form [@ id='form'] / span/input") by locating the master element.

Indexes

CSS

1. Css can also locate child elements by indexing option:nth-child (1)

1. Select the first child element driver.find_element (By.CSS_SELECTOR, "select#nr > option:nth-child (1)")

two。 Select the second child element driver.find_element (By.CSS_SELECTOR, "select#nr > option:nth-child (2)")

3. Select the third child element driver.find_element (By.CSS_SELECTOR, "select#nr > option:nth-child (3)")

Xpath

1. It can be located by sorting.

1. Use xpath to locate the first driver.find_element (By.XPATH, "/ / select [@ id='nr'] / option [1]")

two。 Use xpath to locate the second bit driver.find_element (By.XPATH, "/ / select [@ id='nr'] / option [2]")

3. Use xpath to locate the third bit driver.find_element (By.XPATH, "/ / select [@ id='nr'] / option [3]")

Fuzzy matching

CSS

Driver.find_element (By.CSS_SELECTOR, "input:contains ('kw')")

Xpath

1. Xpath's powerful fuzzy matching

2. By_partial_link, fuzzy matching location

Driver.find_element (By.XPATH, "/ / * [contains (text (), 'hao123')]")

This is the end of the content of "what are the methods of Selenium using CSS positioning". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.