相对定位
1,//标签名[@属性=值]
层级定位-最常用 //一级元素//二级元素
//i[@class="ing]
//*[@*="ing"]
//div[@id="number-attend"]//i[@class="ing"]
2.文本匹配 //标签名[text()=值]
//a[text()="公告"]
3.包含 //标签名[contains(@属性/text(),值)]
//a[contains(@href,"/Notify/index/courseid/")]
//a[contains(text(),"公告")]
4.通过逻辑运算来组合更多的元素特征 and or
//标签名[@属性=值 and @contains(@属性/text(),值） and text()值]
5.轴定位：关系 表格 搜索后的内容一般为表格形式
1）通过兄弟姐妹找到自己
2）通过后代元素找到祖先元素
ancestor
parent
preceding
preceding-sibling
following
follow-sibling
已知元素/轴名称 ::标签名称[@属性=值]
//div//table//td//preceding::td
//p[@title="jac"]/preceding-sibling::p[@class="stuno"]
6.下标/js
XPath Locator In Selenium
Xpath: //tagname[@attribute=’value’]
- Standard Xpath
- Using Contains
- Using Xpath with AND & OR
- Using starts-with
- Using text in Xpath
Standard Xpath
This is like the one defined above in syntax.
A quick example is for the below DOM structure of LambdaTest I am referencing to:
|
1
|
<input type="email" name="email" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt-3 form-control-lg">
|
Syntax of xpath is: //input[@name= ’email’]
In order to locate element, it can be written as follows:driver.findElement(By.xpath(“//input[@name= ’email’]”))
Contains
This works similar to CSS selector ‘contains’ symbol. It can be used when any element value changes dynamically and partially. For example, if value of login changes with the login text appended has been constant, then contains would be helpful in locating elements. Below is the referenced syntax of it:
Xpath: //tagname[contains(@attribute, ‘partial value of attribute’)]
Using the below DOM structure to locate the login field with class name:
|
1
|
<input type="text" placeholder="Full Name*" name="name" value="" class="form-control sign-up-input-2 ">
|
driver.findElement(By.xpath(“//input[contains(@class, ‘form-control’)]”))
Xpath using ‘AND’ & ‘OR’
These are used when we want to locate an element via two condition sets. In case of ‘AND’ both the conditions should be true and for ‘OR’ either of the two should be true.
Syntax using OR :Xpath=//input[@id='login_1' OR @name='login’]
Syntax using AND :Xpath=//input[@id='login_1' AND @name='login’]
The below example highlights the login field DOM structure of Lamdatest using both the above ‘AND’ and ‘OR’ expressions:
|
1
|
<input type="email" name="email" value="" placeholder="Email" required="required" autofocus="autofocus" class="form-control mt-3 form-control-lg">
|
driver.findElement(By.xpath(“//input[@type='email' OR @name='email’]))driver.findElement(By.xpath(“//input[@type='email' AND @name='email’]))
Starts-with
This is again like the functionality of CSS selector. It helps in locating element that starts with a specified attribute value. Syntax used is:
Xpath=//tagname[starts-with(@attribute,'starting name of the attribute value')]
Using the below DOM structure to locate the password field of signup form of Lambdatest:
|
1
|
<input type="password" placeholder="Desired Password*" name="password" class="form-control sign-up-input-2 " aria-autocomplete="list">
|
driver.findElement(By.xpath(“//input[starts-with(@name,'pass')]”))
Text
It helps to locate element via xpath using exact text match. Sometimes we have tags containing text, which we wish to locate element through. Locating element through text can help us achieve this.
Syntax:Xpath=//div[text()='Logged In']
Below is an example of Lambdatest DOM structure of sign-up page, where I am trying to locate the sign-up text on that page.
|
1
|
<p class="signup-titel">SIGN UP</p>
|
Using above DOM structure, following is the use case of text:driver.findElement(By.xpath(“//p[@text()=’ SIGN UP’]”))
Both CSS selector and Xpath are measured equally in terms of CSS locators in Selenium WebDriver. They both are useful with respect to complex scenarios. Choosing which one among the two is completely upon you and the scenario you opt to automate. The only key thing to remember is easy maintainability of your locators, this makes half of your job easier.