Web automation of the positioning element

Mu class Network study notes: Web-side functionality automation positioning element

Positioning elements with CSS selectors

The basic syntax:

tag[attribute='value']

Targeting elements use both attributes:

tag[attribute1='value1'][attribute2='value2']

例：button[type='submit'][class='res-send']

ID selector

There are three common ID selector representation, incorporated herein by reference for a Web page to HTML code portion represented exemplified.

<div class="popup-bank" id="popup-bank-newuser" style="display: none">
    <a class="popup-close BankStorageClose" href="javascript:void(0)"></a>
    <img src="https://imgcdn1.migang.com/v2/images/common/account_bank.png?v=1513325912">
    <div class="popup-bank-box">
        <p class="popup-user-text">开通银行存管后，您在银行开设电子账户，您的全部资金将存放到银行电子账户中，资金安全得到全面保障。</p>
        <p class="popup-user-text">根据银行规定，用户必须在平台进行实名开户后，才能进行资金操作。您的实名开户信息均由银行验证，请放心操作。</p>
        <div class="mg-submit-btn"><a class="btn" href="https://p2p.migang.com/reg/complete_reg/from/news">开设银行存管账户</a><!-- <a class="skip-btn BankStorageClose"  href="javascript:void(0)">暂不开设</a> --></div>
    </div>
</div>

Example: positioning id is popup-bank-newuser of div

div[id='popup-bank-newuser']
#popup-bank-newuser
body #popup-bank-newuser

ID with the ID value may be added # manner represented. If the ID is not unique, different and where the same ID tag, can be labeled target element and a space before #.

Class selectors

There are also three Class Selector common representation. For example as follows:

div[class='popup-bank alert-adowntime']
.popup-bank
div.alert-adowntime

When using a first class = 'value' manner, the value in single quotes and class must match the target element. When using two way behind the ".", And can contain only one value (the case where a plurality of values) in the class, but this time there may be not unique, since the class is found in the lookup values comprising All the elements, and positioned to the first element. At this time an additional embodiment may be utilized class, the following syntax:

.class1.class2.class3, for example: .popup-bank.alert-adowntime

And id selectors can be combined, for example: div.popup-bank # popup-bank-newuser, until you find the only element.

Wildcards

grammar:

Tag [attribute ^ = 'value']: beginning with the specified property value element
Tag [attribute $ = 'value']: specified attribute value to the end value of the element
Tag [attribute * = 'value']: specified attribute value of the element value contains

Find a child node

With> parent node and child nodes connected to the node label can be expressed, and may be represented by id class. E.g:

div> .topbar>div>a

#topd > div.inside > a.weixin.tel

contains

tag:contains('Text')

Example: button: contains ( 'enable')

Positioning elements with XPath

When the following occurs, may be considered to locate by xpath element.

If the element is not unique ID, ID or dynamic
If the name is not the only property values and linktext

The basic syntax:

//tag[@attribute='value']

Absolute and relative paths

Absolute path: single slash, "/" represents, for example: html / body / div [1] / div / div [2] / ul / li [2] / a / span [2]
Relative path: double slash "//" represents, for example: // li [@ id = 'shop-cart'] / a / span [2]

"/" And "//" the difference:

"/": On the one element is a child node of a node can not skip;
"//": any child node is subordinate any nested or a child node, can skip;
Do not use a path inside the "*" to specify the label name.

Construction of XPath with Text

grammar:

//tag[text()='value']

"=" Is the exact match that text content and value to be exactly the same.

Contains keyword

grammar:

//tag[contains(attribute,'value')]

Find the elements specified attribute value contains the value, you do not need to match exactly. E.g:

// a [contains (text (), 'forgotten password')]

//input[contains(@class,'ipt') and contains(@placeholder,'手机号')]

starts-with keywords

grammar:

//tag[starts-with(attribute,'value')]

E.g:

//div[starts-with(@class,'popbox')]

//div[starts-with(@class,'popbox') and contains(@id,'nav')]

Find a parent node level peace

Parent

语法：xpath-to-some-element//parent::<tag>

Flat front stage node

语法：xpath-to-some-element//preceding-sibling::<tag>

Behind the same level node

语法：xpath-to-some-element//following-sibling::<tag>

For example:

<tbody>
	<tr height="35">
		<th style="text-align:center">银行</th>
		<th style="text-align:center">限额</th>
	</tr>
    <tr height="35" style="background-color:#fff">
        <td>中国银行</td>
        <td>单笔限额49999元，单日限额20万</td>
    </tr>
    <tr height="35" style="background-color:#fff">
        <td>中国工商银行</td>
        <td>单笔限额5万，单日限额5万</td>
    </tr>
    <tr height="35" style="background-color:#fff">
        <td>中国建设银行</td>
        <td>单笔限额10万，单日限额50万</td>
    </tr>
    <tr height="35" style="background-color:#fff">
        <td>中国交通银行</td>
        <td>单笔单日限额9999元</td>
    </tr>
    <tr height="35" style="background-color:#fff">
        <td>中国农业银行</td>
        <td>单笔限额9,999元，单日限额9,999元</td>
    </tr>
    <tr height="35" style="background-color:#fff">
        <td>招商银行</td>
        <td>单笔限额1万，单日限额2万</td>
    </tr>
    <tr height="35" style="background-color:#fff">
        <td>浦发银行</td>
        <td>单笔限额10万，单日限额40万</td>
    </tr>
    <tr height="35" style="background-color:#fff">
        <td>光大银行</td>
        <td>单笔单日限额99,999.99元</td>
    </tr>
    <tr height="35" style="background-color:#fff">
        <td>平安银行</td>
        <td>单笔限额5万，单日限额5万</td>
    </tr>
</tbody>

Where the elements "Agricultural Bank of China" as:

//div[@id="zc_k"]//tbody/tr[6]/td[1]

Where the elements "China Construction Bank" as:

//div[@id="zc_k"]//tbody/tr[6]/td[1]//parent::tr//preceding-sibling::tr[2]/td

Where the element "Everbright Bank" as:

//div[@id="zc_k"]//tbody/tr[6]/td[1]//parent::tr//following-sibling::tr[3]/td

References:

CSS selectors: http://www.w3school.com.cn/cssref/css_selectors.asp

XPath syntax: http://www.w3school.com.cn/xpath/xpath_syntax.asp