Web UI automation test

Catalog

1 What kind of project is suitable for Automation ：

2 The entry point for automated testing ：

3 python +selenium Environment building

4 Eight positioning methods ：

4.1  id： Elemental id It's the whole current HTML The only one on the page , Is the first choice （ Dynamic id Don't think about it ）

        4.2 name： There will be repetition name The situation of , The probability is not high . It's not the only one

4.3 class_name：class It is mainly used for grouping elements , And set the same style for this level of elements , therefore class Property is currently html In the middle of the page , Nor is it the only one that is positioned to an element ,class The property of has only one value

4.4 tag_name： The tag name of the element , Such as input、div、span etc.

4.5 link_text： For linking a Labeled - Precise matching

4.6  partial_link_text： For linking a Labeled , Match partial text values - Fuzzy matching

4.7 css： Position by combination , and XPATH The positioning method is basically the same .-- Obscure

4.8 Xpath location ： - Easy to understand grammar - F12 Next elements among , Press ctrl+f The expression confirmation box pops up

---

1 What kind of project is suitable for Automation ：

1 ） Software requirements change infrequently

2 ） The project cycle is relatively long

3 ） Mature and stable projects , Automated scripts can be reused

2 The entry point for automated testing ：

The system test , Feasibility analysis Frame selection , Demand analysis , plan , Test case design , Nobody is on duty , Submit for examination , Operation and maintenance

3 python +selenium Environment building

1）python Environment installation and construction

2)  pycharm Installation

3) solve pyCharm Unable to get pip install selenium problem

4 Eight positioning methods ：

among
6 Big positioning method ：
id、name、 class_name、 tag_name、 link_text、 partial_link_text
Locate only one attribute of the element , The elements of the page are required to be very standard
…
2 Big positioning method ： Universal positioning
css_selector、xpath
Multiple attribute combinations to find elements , Or find elements through other relationships
 

4.1  id： Elemental id It's the whole current HTML The only one on the page , Is the first choice （ Dynamic id Don't think about it ）

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")
#  Search input box 
element = driver.find_element_by_id("kw") # WebElement object --  An object corresponds to an element 
element.send_keys("selenium webdriver")

or

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")
#  Search input box 
element = driver.find_element_by(By.ID, "kw") # WebElement object --  An object corresponds to an element 
element.send_keys("selenium webdriver")

4.2 name： There will be repetition name The situation of , The probability is not high . It's not the only one

driver.find_element_by_name("")
driver.find_element(By.NAME, "")

4.3 class_name：class It is mainly used for grouping elements , And set the same style for this level of elements , therefore class Property is currently html In the middle of the page , Nor is it the only one that is positioned to an element ,class The property of has only one value

driver.find_element_by_class_name("")
driver.find_element(By.CLASS_NAME, "")

4.4 tag_name： The tag name of the element , Such as input、div、span etc.

driver.find_element_tag_name("")
driver.find_element(By.TAG_NAME, "")

4.5 link_text： For linking a Labeled - Precise matching

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("http://www.baidu.com")
# driver.find_element_link_text(" Journalism ")
# Locate Baidu homepage news and click
driver.find_element(By.LINK_TEXT, " Journalism ").click()
 

4.6  partial_link_text： For linking a Labeled , Match partial text values - Fuzzy matching

driver.find_element_paritial_link_text(" smell ")
driver.find_element(By.PARITIAL_LINK_TEXT, " smell ")

4.7 css： Position by combination , and XPATH The positioning method is basically the same .-- Obscure

driver.find_element_by_css_selector(css expression )
driver.find_element(By.CSS_SELECTOR, "")

4.8 Xpath location ： - Easy to understand grammar - F12 Next elements among , Press ctrl+f The expression confirmation box pops up

1. Absolute positioning （ Generally do not use , Dynamic changes can make mistakes ）— With / start , Father / Son

/html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input Inheritance order ： Position order
2. Relative positioning Don't worry about the sequence of inherited positions , Locate by your own features , Don't care where – With // start

1.// Tag name [@ attribute = value ]
//*[@*="wrapper"]    #  As long as the value of an attribute satisfies this, it can be used *


2. Text matching 
// Tag name [text()= value ]  #  A unique value is required 


3. contain   Fuzzy matching 
// Tag name [contains(@ attribute /text(), value )]


4. Logical operations   To combine more element features  and or
// Tag name [@ attribute = value  and @ attribute = value  and contains(@ attribute , value ) and text()= value ]


5. Hierarchical positioning  // Primary element // Secondary elements //....
 When something like a table appears  
 //class[@id="wrapper"]//input[@id="kw"]


6. Axis positioning ： Relationship  -  Need to analyze the relationship between elements . The structure of the page 
 Axis operation ：
ancestor： Ancestral node , Including the father 
parent： Parent node 
preceding： All nodes before the current element node label ,html Page order 
preceding-sibling： All siblings before the current element node label 
following： All nodes after the current element node label ,html Page order 
following-sibling： All siblings after the current element node label 
 Use the syntax ：
 Known elements / Axis name :: Tag name [@ attribute = value ]
        1). Find yourself through brothers and sisters 
        2). Find ancestor elements through descendant elements 
//p[@title=" title "]/following-sibling::p[@class="stuno"]
//p[@title=" title "]/following-sibling::*  All the brothers and sisters behind -- Add [1] Subscript 
//p[@title=" title 1"]/parent::*/following-sibling::li//p[@class="name"]


7. Subscript /js
 Sometimes subscripts fail , Analysis found , When using subscripts, pay attention to node branching    It can be used element +  Subscript 
/html/body/div[4]/div[1]/div[1]/div[1]/div[3]/div/a
/html/body/div[4]/div[1]/div[2]/div[1]/div[3]/div/a
/html/body/div[4]/div[1]/div[3]/div[1]/div[3]/div/a
 You can find div One of the nodes is divided into 3 Branches .