This article is the study note of the Hogwarts Test Institute Distinguished Student course.


Selenium is one of the most widely used open source, browser-free, multilingual, and flexible test automation frameworks for Web automation today.

Selenium architecture and core components


To learn about Selenium, we need to understand the architecture and core components of Selenium. As the saying goes, “To do a good job, you must sharpen your tools.” You need to understand the architecture and core components to understand how to use the tool properly. Can let “it” become a sharp tool in our work, to help us solve the problem.

The Selenium framework

  • Client: Each language has its own library, providing different APIS for users to call to complete the related automated test behavior; Here the API about Web automation is called to Selenium’s server
  • Selenium: The driver that sends the received request to the browser and makes the call. Selenium is actually an encapsulation of the browser driver
  • Driver: A driver engine for browsers. Each browser has its own driver (usually provided by various browser vendors). The driver API of the browser can be used to complete corresponding operations
  • -Leonard: The browser is not.


Selenium Core Components

  • Selenium WebDriver Client (currently mainly used, dependent on Drivers)
  • Selenium Drivers (browser-driven, dependent on webDriver Client)
  • Selenium1 Selenium-RC (deprecated)
  • Selenium IDE (An introductory recording tool)
  • Selenium Grid (can operate browser cluster, also can operate App)

Selenium is installed

Step 1: Component installation


  • Install a browser: Web automation, no browser seems to make sense, install a browser first is a must
  • Install selenium Driver and add environment variablespath: Environmental variables, a platitude
  • Install Selenium Client: After this step, you can start web automation. Different languages can be installed as needed, such as JavamavenCurrently, it is recommended to use the stable version 3.141.59:
  • Selenium – IDE installation: for beginners, I will not demonstrate it here. If you need to learn about selenium, you can refer to the information
Selenium </groupId> <artifactId> Seleniumhq. Selenium </groupId> <artifactId> The < version > 3.141.59 < / version > < / dependency >Copy the code

Step 2: Download ChromeDriver

I mainly use Chrome browser here, so take Chrome as an example. 1) the first go to the selenium website download center at www.seleniumhq.org/download/; Scroll down to the position shown below:

2) Find the driver version that matches your current Chrome browser version and download the driver for the corresponding system (ladder required, if you do not continue to look down).

If you don’t have a ladder, unable to go to the website to download driver, here to provide a mirror of taobao, in the domestic network can directly download npm.taobao.org/mirrors/chr…

3) After the download is complete, decompress to the specified path, and don’t forget to add the path to the environment variable (take Mac as an example).

$ echo 'export PATH=$PATH:chrome' >> ~/.bash_profile
# chrome is the directory where the chromedriver is stored
$ tail -1 ~/.bash_profileCopy the code

Element localization


Element positioning is the most basic UI automation is also one of the most important part, to fix the element positioning, is to open the door of Web automation, you can enter the world of Web automation.


Now we use a “detective” vision, the element positioning as a “means of criminal investigation”, to see how to use the element positioning this means of criminal investigation, detect a “crime scene”.

First, we need to recognize elements. An element is a distinguishing attribute. Selenium’s WebDriver provides a total of nine positioning methods, of which the first eight are the most commonly used. Let’s take a look at the corresponding ones in Java


As shown in the table above, Web automation relies on HTML tags, attributes, etc., to locate elements to operate. What about these positioning methods? Consider a crime case:

The police are arresting a criminal suspect, to confirm the identity of the suspect can be identified according to the suspect’s name, alias, fingerprint, ID number, mobile phone number and other identifiable attributes; Similarly, the element itself also has id, className, tagName, name and other attributes to distinguish positioning;

The suspect’s anti-reconnaissance ability is relatively strong, hidden their identity characteristics, can not be located according to its own attributes, so it can be located according to its frequent places to arrest, such as to a bar in a city in a province, to a village in a county, a residence to go; Similarly, elements themselves can be located through the hierarchy of tags such as Xpath and CSS.

So far, the suspect is still on the run, in order to avoid detection, used to go to places are no longer contact, master! This is the master! Struggling to wait, finally handling the case police officers finally have a clue (the next case police appeared about the turning point ~) : because the suspect is a big filial son and very love his wife and children, so secretly in a place to parents on the phone, went to school to see his wife and children; Finally according to the information provided by their family exposed themselves, was located and captured! Similarly, an element can be located by its relative element, and we can use CSS or Xpath to locate the parent, sibling, and other node positions.


Case solved, case summary – method of locating elements

Warning! The following in the introduction of various positioning methods will also incidentally add CSS positioning methods as a comparison, the first contact may cause discomfort because you do not understand, do not worry, you can ignore, later will be specially introduced CSS, to understand the CSS positioning method after learning

1.By ID


Now we need to locate the welcome in the upper right corner of testerHome, as shown below:

Open Chrome Developer Tools, select the element to view, the element has an ID, can be located according to the ID:

WebDriver driver = new ChromeDriver();
driver.findElement(By.id("cornertip"));
driver.findElement(By.cssSelector("#cornertip"));  //CSSCopy the code

Tip: You can verify the location by searching the element you want to locate in the Control+F search box in Chrome’s developer tools, which supports CSS and xpath, as shown above

2.By Class Name – Alias

To locate the search box on the home page of Testerhome, you can use ClassName as shown below:

WebDriver driver = new ChromeDriver();
driver.findElement(By.className("form-control"));
driver.findElement(By.cssSelector(".form-control"));  //CSS
Copy the code

3.By Name


Locate the search box on the home page by name and CSS:

WebDriver driver = new ChromeDriver();
driver.findElement(By.className("q"));
driver.findElement(By.cssSelector("[name='q']"));  //CSSCopy the code

4.By Tag Name

Again, locate the search box on testerHome’s home page by tagName: Input

WebDriver driver = new ChromeDriver();
driver.findElement(By.tagName("input"));
driver.findElement(By.cssSelector("input"));  //CSS
Copy the code

5.By Link Text

Locate testerHome’s top posts of the week via linktest and CSS:

WebDriver driver = new ChromeDriver();
driver.findElement(By.linkText([shenzhen][Headline] Recruitment test leader));
Copy the code

6. By Partial Link Text

Locate testerHome’s top posts of the week via partialLinkText and CSS


WebDriver driver = new ChromeDriver();
driver.findElement(By.partialLinkText([Shenzhen][Headline]));
driver.findElement(By.cssSelector("[title~='[headlines]']"));  //CSSCopy the code

7.Using JavaScript

Sometimes our page elements are blocked and cannot be positioned, so we need to scroll the screen for visualization, so we can use JS to operate:

((JavascriptExecutor)(driver)).executeScript("window.scroll(0, 1200)");Copy the code

8.By Xpath

XPath is a language for finding information in XML documents. XPath is used to traverse elements and attributes in AN XML document, and HTML is an implementation of XML, so XPath can be used to locate elements

  • Problem: when you start to learn positioning, many people will think that there are so many ways of positioning above, but alsoxpathWhy? It feels quite complicated (compared to other positioning methods, it is more complicated) ~
  • A: That’s because not all elements are “what you want.” As in the example above of police arresting a criminal, sometimes elements don’t provide the desired location

Common path expressions:

Just a few simple chestnuts

  • 1) Absolute path location: Test development or programming experience of friends must be familiar with absolute path, through the absolute path is the use of elements on the page of the complete path.

Again, to locate the most popular posts of the week, go to the Developer toolbar in Chrome, find the HTML location of the element you want to locate, right click to bring up Copy Full Xpath, and click on it

Then we pasted the copied content as follows:

/html/body/div[2]/div[2]/div/div[2]/div[1]/div[2]/div[1]/div/a
Copy the code

Writing to code looks like this:

WebDriver driver = new ChromeDriver();
driver.findElement(By.xpath("/html/body/div[2]/div[2]/div/div[2]/div[1]/div[2]/div[1]/div/a"));Copy the code

Copy xpath, Copy xpath, Copy xpath, Copy xpath, Copy xpath

//*[@id="main"]/div/div[2]/div[1]/div[2]/div[1]/div/a
Copy the code

It looks a little bit simpler, using xpath syntax, but it’s not really much better, it’s still a hierarchy of tags, going from the outermost layer down, and it’s not very desirable;

In fact, the main reason why it is not desirable is that this absolute path is very unstable in the actual automation process. Any change in the position of the interface, the absolute path of the element is likely to change, and it can not be accurately positioned.

Therefore, we need to use the attribute of the element or the combination of attribute and hierarchy to locate, so that even if the page changes, as long as the change is not very big, still can be positioned by the attribute of the element and the relative position, the impact of the change of page position will be much less

2) Element attribute positioning:

Locate the welcome on testerHome, using xpath syntax to locate by ID:

WebDriver driver = new ChromeDriver();
driver.findElement(By.xpath("//div[@id='c-button']"));
Copy the code


//div means to start the match from the div tag of the current page, @id means to use the id attribute value, = followed by the specific ID value

3) Attribute and hierarchy positioning:

Xpath is most useful when elements have no directly locatable attributes:

Now we need to locate the title of “hottest Top10 of the 7th day”, which only has the class attribute, we can find the following situation according to the className:

Yes, there are 10 elements that can be located because there are many titles that have the same classname and no other attributes like ID, name, etc.; < div class = “col-MD-3 home-side-bar” > < div class = “col-MD-3 home-side-bar” >


Now we use Xpath to locate the unique class, then go down two levels of divs, and then take the first of the two levels


WebDriver driver = new ChromeDriver();
driver.findElement(By.xpath("//*[@class='col-md-3 home-side-bar']/div[1]/div[1]"));
Copy the code

4) Use Xpath operators to locate:

Xpath also supports operators that can be used to concatenate multiple attributes together if one attribute of an element cannot be located

Xpath commonly used operators



If we only rely on className, we will find 28 elements with the same attributes, as shown in the following figure:



There is another attribute named data-name, whose value is the author’s name. We can locate the specified element by concatenating the two attributes with the and character:



WebDriver driver = new ChromeDriver();
driver.findElement(By.xpath("/ / a [@ class = 'user -name' and @ data - name = 'the clouds the clouds go away]"));
Copy the code

5) Use Xpath functions to locate:

Xpath also provides a number of functions for more flexible positioning. Here’s an example of a contains function THAT I often use

We still locate the first post of “[Shenzhen][Toutiao] Recruitment test leader”, the most popular post on testerhome homepage of seven days. Through DOM analysis, we can see that the content of the title attribute is the title of the post, and we use part of the value of this attribute as the positioning condition:



WebDriver driver = new ChromeDriver();
driver.findElement(By.xpath("//*[contains(@title,' contains ')]"));
Copy the code

About Xpath grammar use and there are many, including still has a lot of function, concrete may refer to the W3C study: www.w3school.com.cn/xpath/xpath…

9.By CSS


The style of a Web page is usually stored in an external.css file. External stylesheets give you the ability to change the layout and appearance of all the pages on your site simultaneously by editing just one simple CSS document. So we can use CSS selectors to locate the elements of the page that are bound to attributes for use by our Selenium

If you read the above article, you should have noticed that before introducing xpath, you also wrote a CSS positioning method. Yes, that’s it. If you haven’t noticed, you can go back and have a look.

Recommended USE of CSS: CSS is also our most recommended use in Web automation for several reasons:

  • For example,idThis element may not be unique in a page, and it may be automatically generated by the front-end framework, not maintained by the developer, and may change at any time; whileCSSFront-end development is one of the most commonly used maintenance, for our development and maintenance of automated use cases is more clear and convenient
  • Most of them workCSSTo solve the
  • CSSCompared withXpathBe more concise

Common CSS selector syntax:



Here’s a quick summary of the CSS syntax we’ve already demonstrated:

  • throughid
WebDriver driver = new ChromeDriver();
driver.findElement(By.cssSelector("#cornertip"));  //CSS
Copy the code


  • throughclassName
WebDriver driver = new ChromeDriver();
driver.findElement(By.cssSelector(".form-control"));
Copy the code


  • throughname
WebDriver driver = new ChromeDriver();
driver.findElement(By.cssSelector("[name='q']"));
Copy the code


  • throughtag name
WebDriver driver = new ChromeDriver();
driver.findElement(By.cssSelector("input"));
Copy the code


  • throughlink text
WebDriver driver = new ChromeDriver();
driver.findElement(By.cssSelector("A [title='[shenzhen][headlines] Recruitment test leader']"));
Copy the code


  • throughpartialLinkText
WebDriver driver = new ChromeDriver();
driver.findElement(By.cssSelector("[title~='[headlines]']"));
Copy the code


CSS can also be used with a combination of properties and hierarchies. Here’s how we set up the first testerhome post:

WebDriver driver = new ChromeDriver();
driver.findElement(By.cssSelector(".panel-heading+div>div>div.topic-20857"));
Copy the code

.panel-heading: class value is panel-heading +div: followed by div >div: followed by all the children of div. Div.topic -20857: class named topic-20857 div tag

(Article from Hogwarts Testing Institute)

Welfare benefits:

Front-line Internet famous enterprises test development position internal promotion channel

Test development internal communication circle, expand your test network

For free: Interface testing + Performance testing + Automated testing + Test development + Test cases + resume template + test documentation