Various methods of positioning web page elements using Selenium!

To use Selenium to automate operations, the first thing to do is to open a URL link through the get() method of webdriver.

After opening the link and completing the page loading, you can perform various operations on the page through the interface provided by Selenium. Let’s learn how to find elements.

3.1 Find and locate web page elements

In the example in the previous article, we demonstrated how to use the find_element_by_id() method to locate page elements based on their id values.

In addition to finding elements based on their id values, Selenium also provides many methods for finding elements:

As you can see from the picture above, Selenium provides nearly twenty find_element family methods for us to find elements in the page, including id, name, class name, css selector, link text, tag name, xpath, etc.

Methods for locating a single matching element are:

  • find_element_by_id
  • find_element_by_name
  • find_element_by_xpath
  • find_element_by_link_text
  • find_element_by_partial_link_text
  • find_element_by_tag_name
  • find_element_by_class_name
  • find_element_by_css_selector

Methods for locating multiple matching elements are:

  • find_elements_by_name
  • find_elements_by_xpath
  • find_elements_by_link_text
  • find_elements_by_partial_link_text
  • find_elements_by_tag_name
  • find_elements_by_class_name
  • find_elements_by_css_selector

We can find and locate the page elements we need based on different situations on different pages.

3.2 Positioning through id attribute

If you know the value of the element’s id attribute, you can use the find_element_by_id() method to locate the element, which will return the first element whose id attribute value matches that position.

The search box structure of Baidu homepage is as follows:

# coding:utf-8
'''
    @site:zmister.com
 
'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_id('haha')
print(ele)

ele returns a corresponding element element:

If no element matches the passed id value, a NoSuchElementException will be thrown:

# coding:utf-8
'''
    @author:Mr. Zhou
    @site:zmister.com
    @WeChat public account: Mr. Zhou
'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_id('haha')
print(ele)

Running the code, an exception is thrown because there is no matching id value:

Now I have also found a lot of test friends and created a communication group to share technology, sharing a lot of technical documents and video tutorials we collected.
If you don’t want to experience the feeling of not being able to find resources when self-study, having no one to answer your questions, and persisting for a few days before giving up.
You can join us to communicate. And there are many technical experts who have made certain achievements in automation, performance, security, test development, etc.
Share their experience, and also share many live lectures and technical salons
You can learn for free! Focus on it! Open source! ! !
QQ group number: 110685036 [password: csdn999]

3.3 Positioning through the name attribute

If you know the value of the name attribute of an element, you can use the find_element_by_name() method to get the first element matching the name attribute value:

# coding:utf-8
'''
    @site:zmister.com

'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_name('wd')
print(ele)

ele returns the matched element element:

C:\Python35\python.exe E:/pythonproject/selenium_env/code/2.py
<selenium.webdriver.remote.webelement.WebElement (session="23d00cea9ce99d36ffcac96cfb3ca12c", element="0.7355927465563321-1")>

If you locate a name attribute value that does not exist, a NoSuchElementException exception will also be thrown:

# coding:utf-8
'''
    @site:zmister.com

'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_name('zmister')
print(ele)

3.4 Element positioning through Xpath

XPath is a language for finding nodes in XML documents. Since HTML can be an implementation of XML (XHTML), we can use this powerful language to position elements in web pages. XPath extends and supports simple methods of locating by id or name attributes, and provides a variety of new operations, such as finding the third checkbox on the page, etc.

One reason for using Xpath is that sometimes the element we need to locate on the page does not have an id attribute or a name attribute. In this case, we can use Xpath to locate the element using an absolute path, or to locate the parent element through the id or name attribute value. The element then gets its child elements.

Regarding the knowledge of Xpath, I will not introduce it here. Students who need it can check out the websites or tutorials that specifically introduce Xpath, such as:

  • W3schhool Xpath Tutorial

Here we briefly introduce how to quickly obtain the Xpath path of page elements through the browser. Open the web page debugging console in the browser, right-click the element that needs to be positioned, and an option bar will appear. Select “Copy XPath” in “copy”:

# coding:utf-8
'''

    @site:zmister.com

'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_xpath('//*[@id="kw"]')
print(ele)

In this way, we can also locate the Baidu homepage search box through the XPath path:

3.5 Locate elements by tag name

When we want to locate an element by its tag name, we can use the find_element_by_tag_name() method, which will return the first element with a given tag name:

# coding:utf-8
'''

    @site:zmister.com

'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_tag_name('input')
print(ele)

Here, we locate directly through the element tag name of the input. Because the first input on the Baidu homepage is the search box, we can also locate:

If no match is found, NoSuchElementException will also be thrown.

3.6 Locate elements through class names

If we want to locate the element by its class attribute value, we can use the find_element_by_class_name() method. It will return the first matched element. If there is no matching element, a NoSuchElementException will also be thrown:

# coding:utf-8
'''

    @site:zmister.com

'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_class_name('s_btn')
print(ele)

Here, we locate the search button on Baidu homepage through the class name.

3.7 Positioning elements through CSS selectors

CSS selector is a syntax for locating elements through their CSS attribute values. We can use the find_element_by_css_selector() method to locate elements through css selectors:

# coding:utf-8
'''

    @site:zmister.com

'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_css_selector('input.s_btn')
print(ele)

The absolute syntax of CSS selectors can be obtained through “Copy” in the browser debugging console:

3.8 Positioning elements through link tag text

In addition to the above element positioning methods, we can also position elements through the text on the a tag, using the find_element_by_link_text() method.

At the very top of the Baidu homepage, there is a row of links, as shown below:

If we need to locate the “map” link element, we can do this:

# coding:utf-8
'''

    @site:zmister.com

'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_link_text('map')
print(ele)

This sets the success status to the element:

Similarly, if no match is found, NoSuchElementException will be thrown:

# coding:utf-8
'''
    @site:zmister.com
'''
from selenium import webdriver

driver = webdriver.Chrome(executable_path=r"D:\chromedriver_win32\chromedriver.exe")
driver.get('http://www.baidu.com')
ele = driver.find_element_by_link_text('Mr. Zhou')
print(ele)

The element whose link text is “Mr. State” cannot be matched:

3.9 Summary

In this article, we introduce how to search and locate elements through id attributes, name attributes, class attributes, Xpath paths, CSS selectors, tag names, etc. after opening a page using Selenium. Successfully locating page elements is an important prerequisite for performing complex operations on the page. In the next article, we will introduce various operations on the page.

Finally, I would like to thank everyone who has read my article carefully. Looking at the increase in fans and attention, there is always some courtesy. Although it is not a very valuable thing, if you can use it, you can take it directly!

Software testing interview document

We must study to find a high-paying job. The following interview questions are the latest interview materials from first-tier Internet companies such as Alibaba, Tencent, Byte, etc., and some Byte bosses have given authoritative answers. After finishing this set I believe everyone can find a satisfactory job based on the interview information.