Originally thought that the UI automation related things will not update, but recently the group of friends in the UI, put forward a lot of questions, I looked, most of the page element positioning problems, that today I will talk about some.

First, learn about xpath

When it comes to element positioning, there are several common ways to do it:

  • find_element_by_name()
  • find_element_by_id()
  • find_element_by_css_selector()
  • find_element_by_xpath()

In positioning, under normal circumstances, is to run how simple how good. For example, if the element has an ID, it will be positioned by that ID.

However, in practice, you may not find the ID in the whole article, such as the home page of Zhihu, WTF?



Don’t panic. We have xpath. Don’t worry.

A previous project I implemented used VUE on the front end, forcing me to use xpath to locate, but xpath is so powerful and flexible that it never hurts to learn.

//div[.=’ answer a question ‘] : //div[.=’ answer a question ‘]

By the way, here’s a tip: When debugging the positioning syntax on a page, just press F12 to open the element page, then Ctrl+F, and enter the positioning syntax in the input box at the bottom.

In addition, if you use xpath to locate the situation in the example above, you can parameterize encapsulation more easily. For example, in addition to “answer a question,” I would use “post a video,” “write an article,” and “write an idea,” which would be easy. Usually, you just need to adjust the text in //div[.=’ answer question ‘], and then you can abstract it out further, using Python as an example:

//div[.='{}']".format(button_name))Copy the code

Pseudo code for your reference, if you think xpath is nice, but it’s not enough. As your project progresses, you will need to extract as many generic packages as possible for reuse. As a result, you will encounter more and more complex hierarchical localization, where the xpath axis comes into play.

Enter the xpath axis

In fact, it is relatively easy, you only need 2 steps to learn.

Step 1: Read the grammar I posted carefully

Step 2: Practice (─━ _ ─━✧)

Grammar is all the same. Practice makes perfect. It just takes practice.

Here’s an example of a real-world application to illustrate the advantages of the xpath axis:



As shown, this is a very common list of systems.

Requirement: I now need to encapsulate a method based on the list page that can be checked by passing in the data name. Xpath: //div[.=’ DPA jump test ‘]; //div[.=’ DPA jump test ‘]

def locate__checkbox_by_name(name):
    driver.find_element_by_xpath("//div[.='{}']".format(name))
Copy the code

Now that you have the name, how do you locate the check box?

As you can see, the yellow highlights are the names of the data being located. The node where the checkbox element is located is above the name element. Looking further, the checkbox looks for the fifth parent node, which is sibling to the parent of the yellow-highlighted name element, so we can use the xpath axis to locate the node (see the syntax in the figure above).

Xpath axis location: The idea is simple: first locate the parent node in the yellow highlighted area, then locate the previous sibling node through the parent node, and then locate the checkbox element. That is:

//div[.=' scenic DPA jump test ']/parent::tdCopy the code

//div[.=' bootstrap ']/ preceding :: SIBLING ::tdCopy the code

3. //div[.=' bootstrap ']/parent:: TD /preceding- Sibling :: TD //inputCopy the code

So, the method positioning of the final encapsulation operation can be written as follows:

def locate__checkbox_by_name(name):
    driver.find_element_by_xpath("//div[.='{}']/parent::td/preceding-sibling::td//input".format(name))
Copy the code

Is it convenient? Positioning flexibility has also been greatly improved.