UI自動化測試常用頁面元素定位方法

單元素定位

1. var el=element(by.id("userName"));
2. var el=element(by.name("passWord"));
3. var el=element(by.buttonText("登入"));                   //文字精确相等
4. var el=element(by.cssContainingText('.btn-danger', '删除'));   //文字包含
5. var el=element(by.xpath('//a[contains(text(),"Grid")]'));      //支援xpath
6. var el=element(by.className("myclass’"));      <span class=" myclass’">ddd</span>
7. var el=element(by.model(""));
8. var el=element(by.binding(""));
9. var el=element(by.repeater(""));

元素數組定位

var els=element.all(by.name("price"));

var els = element.all(by.css(‘myclass’)).get(0);

var els = element.all(by.css(’myclass’)).first();

var els = element.all(by.css(’myclass’)).last();

var els = element.all(by.css(’myclass’)).count();

元素是否在頁面上已出現

element(by.css(’myclass’)).isPresent();  //元素是否在頁面已出現。

定位API優先次序總結 

優先次序	8種定位	css	xpath
1	id	[id=””]	[@id=””]
2	name	[name=””]	[@name=””]
3	文字 (包括按鈕文字和超連結文字)	不能	[text()=””]
4	部分文字 (包括按鈕部分文字和超連結部分文字)	不能	[contains(text(),””)]
5	tag type	xxx 例如：	//xxx
6	class name	.xxx	[@class=””]
7	css	--	--
8	xpath	--	--
9	多屬性值定位	[name=””][value=””]	[@name=”” and @value=””]
10	Protractor特有	cssContainingText()	[@class=”” and text()=””]
11	Xpath最常用	//div[@class=”” and value=”” and text()=””] Tag + className + 屬性值+ 文字 因為比css多一項“文字”，是以比css強大，但是比css速度慢。
12	Css最常用	//div.xxx[value=””] Tag + className + 屬性值 因為比xpath少一項“文字”，是以比xpath弱一點，但是比xpath速度快。

等價的Css和Xpath

Css	Xpath
等價的Class name	div.111	等價的是： //div[contains(@class,”111”)] 而不是： //div[@class=”111”]
下任意多層	.111 .222	//div[@class=”111”]//div[@class=”222”]
下一層	.111>.222	//div[@class=”111”]/div[@class=”222”]
模糊比對	span[title*=”abc”]	//span[contains(@title,”abc”)]
input[title^=”abc”]	//input[starts-with(@title,”abc”)]
input[title$=”abc”]	//input[ends-with(@title,”abc”)]
多屬性比對	a[.xyz][title=”abc”][value=”123”]	//a[@class=”xyz” and @title=”abc” and @value=”123”]
第n個元素	Li:first-child	--
Li:nth-child(2)	--
Li:last-child	--
Li:first-of-type	Li[1]
Li:nth-of-type(2)	Li[2]
Li:last-of-type	Li[3]
有某屬性的元素	*[title]	//*[@title]
找弟弟	div.class1 + div	//div[@class=”class1”]//following-sibling::div[1]
不包含not	div[.name1][not([style=”display”])]	//div[@class=”name1” and not(@style=”display”)]
多個選擇連接配接	Apple[title=””], orange[price=””]	無