07_Selenium IDE positioning strategy xpath&css

1. Positioning via Xpath

XPath Attributes
It is always recommended to use XPath attributes if there is no suitable id or name attribute for the element you are looking for.
XPath attributes allow locating web elements using different attributes.

语法：//htmltag[@attribute1=‘value1’ and @attribute2=‘value2’]
Example: //input[@id='passwd' and @placeholder='password']

What is xpath
xpath is the abbreviation of XML Path. Since the HTML document itself is a standard XML page, we can use Xpath to locate page elements.

Disadvantages of xpath positioning
With this positioning method, webdriver will scan all elements of the entire page to locate the elements we need. This is a very time-consuming operation. If a large number of xpaths are used in the script for element positioning, the execution speed of the script will be reduced. may be a little slower

testXpath.html code is as follows

<html>
<head><title>Test Xpath</title></head>
<body>
    <div id="div1">
        <input name="div1input"></input>
        <a href="http://www.sogou.com">搜狗搜索</a>
        <img alt="div1-img1" src="http://www.sogou.com/images/logo/new/sogou.png" href="http://www.sogou.com">搜狗图片</img>
        <input type="button" value="查询"></input>
    </div>
    <br />
    <div name="div2">
        <input name="div2iniput" /></input>
        <a href="http://www.baidu.com">百度搜索</a>
        <img alt="div2-img2" src="http://www.baidu.comn/img/bdlogo.png" href="http:/www.baidu.com">百度图片</img>
    </div>
</body>
</html>

Absolute path positioning method:
In the tested web page, find the
XPath expression of the button in the first div tag

/html/body/div/input[@value="查询"]
WebElement button = driver.findElement(By.xpath("/html/body/div/input[@value='查询']"));

Using browser debugging tools, you can directly obtain the absolute
Insert image description here
path of the
Therefore, it is not recommended to use absolute path writing.

The difference between absolute paths and relative paths.
An absolute path starts with "/", allowing xpath to start parsing from the root node of the document. A
relative path starts with "//", allowing xpath to start parsing from any element node of the document.

Relative path positioning method:
In the tested web page, find the
XPath expression of the button in the first div tag

//input[@value="查询"]
WebElement button = driver.findElement(By.xpath("//input[@value='查询']"));

Use the index number
to locate the "Query" button in the second div tag in the tested web page.

//input[2]
WebElement button = driver.findElement(By.xpath("//input[2]"));

Use page attribute
positioning to locate the first image element in the page under test

//img[@alt='div1-img1']
WebElement button = driver.findElement(By.xpath("//img[@alt='div1-img1']"));

Fuzzy positioning starts-with keyword
to find elements containing the 'div1' keyword at the beginning of the image alt attribute

//img[starts-with(@alt,'div’)]

Fuzzy positioning contains keyword
to find elements whose image alt attribute contains the 'g1' keyword

//img[contains(@alt,'g1')]

text() function text positioning
finds all elements whose text is "Baidu Search"

driver.findElement(By.xpath("//*[text()='百度搜索']"));

Find all hyperlinks with the text "Search"

driver.findElement(By.xpath("//a[contains(text(),'搜索')]"));

2. Positioning via CSS

1. Tag selector

driver.findElement(By.cssSelector("input"));

Directly pass in the tag of the element to be located, and you can directly locate the element.

2. ID selector, class selector

driver.findElement(By.cssSelector("#kw"));     //#表示id属性定位器，后面紧跟id属性值
driver.findElement(By.cssSelector(".s_ipt"));   //英文的. 表示class定位器，后面紧跟class属性值

3. Descendant element selector

driver.findElements(By.cssSelector("div#u1 a"));

Locate the div element through the tag selector + id selector. The descendant selector is represented by a space, and all a tags of the descendants of the div element can be obtained (note: can be obtained at multiple levels)

4. Child element selector

driver.findElements(By.cssSelector("div#u1>a"));

Locate the div element through the tag selector + id selector. The child selector is represented by >, and you can get all the a tags of the children of the div element (note: only the next level of the div can be obtained, not across levels)

5. Adjacent element selector

driver.findElement(By.cssSelector("div#u1>a+a"));

First locate the news tag, and use the adjacent element selector to indicate it with + to get the tag of the sibling element immediately adjacent to the tag (only the first sibling element is matched)

6. Attribute selector

driver.findElement(By.cssSelector("input[name='wd']"));

Can filter by any element attribute value

DOM element positioning

The findElement function of the WebDriver object in the positioning process
defines a Web page element;

The findElements method can locate multiple elements of the page;

Use WebElement objects to store positioned elements for subsequent operations;

id positioning

driver.findElement(By.id(“id的值”))；

name positioning

driver.findElement(By.name(“name的值”))；

xpath method positioning

driver.findElement(By.xpath(“xpath表达式”))；

Class name positioning

driver.findElement(By.className(“class属性”))；

css positioning

driver.findElement(By.cssSelector(“css表达式”))；

TagName tag name positioning

driver.findElement(By.tagName(“标签名称”))；

Jquery expression positioning

Js.executeScript(“return jQuery.find(“jquery表达式”)”)

Full text positioning of link

driver.findElement(By.linkText(“链接的全部文字”))；

Partial text positioning of links

driver.findElement(By.partialLinkText(“链接的部分文字”))；

※ 如果使用 By.tagName，By.c lassName 定位，只会返回第一个匹配元素，但元素class元素内容不止一个，而是类似 <div class="btn-login btn"> 可以使用 By.cssSelector 的方式定位；