When using selenium2 framework for UI automation testing, there is an efficiency ranking among the 8 methods for locating page elements: ID > Name > CSS >xpath; What about the speed of the other four methods of locating elements: tagName\className\linkText\partialLinkText? For example, LinkText is only valid for a tag, and those tagName/className are similar to ID /name. They must be unique. What developer will write so many unique elements for you to position to do UI automation? Developed to improve code reuse rate ah ~~~

Post said test

Struggle in the workplace front line, on the way to the old long workers, CSDN blog experts, workplace said testing, unremitting efforts to share testing technology, framework source code, operation & development and other high-quality original articles! Welcome to subscribe ~

15 original articles

The public,

This chapter describes the advanced uses of xpath elements. Keywords: Contains/boot-with, upstream and down-level lookup, conditional combination and/or, and so on.

Let’s start with an exercise: How many ways can you locate the contents of a page table? The HTML source code is as follows:

<html> <title></title> <body> <div id="ck"> <table border="1" width="500" bordercolor="#ddd"> <tbody> <tr width="35" > Bank name < th > < / th > < th > quota < / th > < / tr > < tr width = "35" > < / td > < td > CMB < td > cap 300000, </td> <tr > <tr width="35" > < TD class="xxxtext"> A cumulative monthly 1 million < / td > < / tr > < tr width = "35" > industrial and commercial bank of < td > < / td > < td > limit of 200000, a cumulative monthly 2 million < / td > < / tr > < / tbody > < / table > < / div > < / body > < / HTML >Copy the code

The page looks like this:

Requirements: Find the quota of the bank of China, usually by opening the browser F12 directly to find the location of the content copy xpath expression: //*[@id=”ck”]/table/tbody/tr[2]/td[2]

Blue is the selected part of xpath expression. If you continue to follow the xpath expression of the first copy: //*[@id=”ck”]/table/tbody/tr[2]/ TD [2], search for elements and find the quota of China Merchants Bank.

So the expectations are not correct, so how do you write this xpath? Sibling = Sibling = Parent = Parent = child = Sibling = Sibling = Parent = child

First find the Bank of China and modify the above xpath expression as follows

<text()> : //div[@id=”ck”]//td[)=” bank of China “]

Furthermore, it is found that the tag of bank of China corresponds to the sibling element tag: sibling, so use the follow-Sibling keyword to find the subordinate tags of the sibling tag

Properties: / / div [@ id = “ck”] / / td/text () = “bank of China”] / / following – (: : td

You think this is the end of it? The above expression means that the bank of China is located in the next row of the same label, so if there are multiple columns, need to find the bank description information? The effect is as follows:

//div[@id=”ck”]//td[text()=” sibling “]//following-sibling::td[1]

Thinking: / / div [@ id = “ck”] / / td/text () = “bank of China”] / / following – (: : td and / / td/text () = “bank of China”] / / following – (: : td, what is the difference between:

Xpath looks for elements in the DOM, so the former is recommended because id lookup is faster. Find the parent node of the ID first, and then look later.

The HTML source code for the test is as follows:

<html> <title></title> <body> <div id="ck"> <table border="1" width="500" bordercolor="#ddd"> <tbody> <tr width="35" > Bank name < th > < / th > < th > quota < / th > < th > description < / th > < / tr > < tr width = "35" > < / td > < td > CMB < td > cap 300000, </td> <tr > <tr width="35" > < TD class="xxxtext"> </td> <tr > <tr ="35" > < TD > A cumulative monthly 2 million < / td > < / tr > < / tbody > < / table > < / div > < / body > < / HTML >Copy the code

Friendship expansion:

Usage of other xpath keywords: [@ / / div id = “ck”] / / td [starts – with (the text (), “the bank of China)”], / / div [@ id = “ck”] / / td [contains (text (), “bank of China)”]. The ends-with keyword finds the attribute value of an element ending in XXX

Xpath advanced application, keywords :contains, with conditions to find elements: and, or;

Example DOM elements:

<span class="btn_wr s_btn_wr" id="s_btn_wr"> < form type="submit" value=" id="su" class=" BTN self-bTN bg s_bTN "> < p style =" box-sizing: border-box! Important; word-wrap: break-word! Important;"Copy the code

The xpath uses starts-with\contains\ends-with. However, it is possible to find elements that are not unique and may need to be searched with conditions of AND and OR. Such as:

//input[@type="submit" and @id='su'] //input[@type="submit" and @id='su'] //input[@type="submit" and contains(@class,'self-btn')]Copy the code

If you can be sure that one of them is unique, you can say:

Such as: / / input [starts - with (@ value, 'baidu') and @ id = 'su'] can also like this: / / input [@ value = 'baidu once or @ id =' su ']Copy the code

The above example is just to demonstrate the use of keywords in xpath. The actual Baidu search button uses the ID to find the element exactly.

The reason you can’t find elements is because your browser doesn’t support Xpath 2.0 yet

Xpath finds parent or horizontal tag attributes with the following syntax:

Parent: xpath – to – some – element / / parent: :

Preceding -sibling::

Xpath-to-some-element //following-sibling:

Demo examples:

<span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap"> <input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off"> <a href="javascript:;" Id =" quickDelete "class=" quickDelete" style="top: 0px; right: 0px; display: none;" > </a> <span class="soutu-hover-tip" style="display: none;" </span> </span>Copy the code

//input[@id=”kw”]. This is just for demonstration purposes, because span can be found directly by id

//input[@id="kw"]//following-sibling::a sibling: //input[@id="kw"]//following-sibling::a level can also be mixed: / / input [@ id = "kw"] / / following - (: : a / / preceding - (: : span / / parent: : span: Display by finding the lower node of the input level (A), the upper node of the A label (SPAN), and the upper label of the SPAN label (SPAN)Copy the code

Please leave your comments with two interview questions about xpath:

1. The difference between absolute path and relative path?

2. The meaning of single slash and double slash?

This article uses the article synchronization assistant to synchronize