CSS Selectors 樣例

css selector 通常有以下幾種方式確定元素：

下文所涉及的HTML代碼：

<!DOCTYPE html>
<html>
<head>
	<titile>Css selector 說明</title>
	<style>
		div{width: 100%;line-height:20px;
			margin-top:10px;background-color:orange;}
			
		/* [id]{background-color: red;} */
		
		[id="two"]{background-color: blue;}
		[class~="c2"]{font-size: 36px;color:white; background-color: yellow;}
		[class|="five"]{font-size: 36px;color:white; background-color: gray;}
		[id^="six"]{font-size: 36px;color:white; background-color: pink;}
		[id$="ree"]{background-color:steelblue;} 
	</style>

</head>
<body>
	<div id='one'>1</div>
	<div id='two'>2</div>
	<div id="three">3</div>
	<div id="c1 c2 c3" id="four">4</div>
	<div class="five-test">5</div>
	<div id="six test">6</div>
	<div> 
		<label class="hidden-label" for="Email">Test ID selector: </label>
		<input id="Email" type="email" autofocus="" placeholder="Enter your email" name="Email" spellcheck="false" value=""> 
	</div>
	<div> 
		<label class="hidden-label" for="Email">Test Class selector: </label>
		<input id="Passwd-hidden" class="password" type="password" spellcheck="false"> 
	</div>
	<div>
		<label class="hidden-label" for="Test attribute">Test attribute: </label>
		<input id="Test_attribute" class="inputtext" type="test email" tabindex="1" value="" name="test email">
	</div>
	<div>
		<label class="hidden-label" for="Test SUB-STRING MATCHES">Test SUB-STRING MATCHES: </label>
		<input id="Test_ID_001" >
	</div>
	<div id="buttonDiv" class="small">
		<label class="hidden-label" for="Test SUB-STRING MATCHES">Test Child Elements: </label>
		<input id="Child Elements" >
	</div>
	<div>
		<label class="hidden-label" for="Test nth-child">Test nth-child: </label>
		<ul id="automation">
		   <li>Selenium</li>
		   <li>Appium</li>
		   <li>Sikuli</li>
		</ul>
	</div>
	<div>
		<label class="hidden-label" for="Test inner-STRING">Test inner-STRING MATCHES: </label>
		<button id="test-button" ><span>test1_button</span></button>
		<button id="test2-button" ><span>test2_button</span></button>
	</div>
	<div><a herf="just a test">link</a></div>
</body>
</html>

測試Python代碼（將上邊代碼保存爲 test_css_selector.html）：

dr = webdriver.Chrome(r"your path/chromedriver.exe")
# 將上邊代碼保存爲 test_css_selector.html
dr.get(r"file:///your path/test_css_selector.html")
dr.find_element_by_css_selector("input#Email").send_keys("test ID selector")
# dr.find_element_by_css_selector("#Email").send_keys("test ID selector")
# dr.find_element_by_css_selector("input.password").send_keys("test class selector")
dr.find_element_by_css_selector(".password").send_keys("test class selector")

ID 選擇器

在CSS中，#表示選擇ID屬性，語法爲：css=<HTML tag><#><ID屬性值>或 css=<#><ID屬性值>；例子：css="input#Email" 或 css="#Email"

HTML：

<div> 
    <label class="hidden-label" for="Email">Test ID selector: </label>
    <input id="Email" type="email" autofocus="" placeholder="Enter your email" name="Email" spellcheck="false" value=""> 
</div>

代碼：

# python 代碼
dr.find_element_by_css_selector("input#Email").send_keys("test ID selector")
# dr.find_element_by_css_selector("#Email").send_keys("test ID selector")
# Java 代碼
# driver.findElement(By.cssSelector("input#Email"));
# driver.findElement(By.cssSelector("#Email"));

Class 選擇器

在CSS中，.表示選擇class屬性，語法爲：css=<HTML tag><.><class屬性值>或 css=<.><class屬性值>；例子：css="input.password" 或 css=".password"

HTML：

<div> 
    <label class="hidden-label" for="Email">Test Class selector: </label>
    <input id="Passwd-hidden" class="password" type="password" spellcheck="false"> 
</div>

代碼：

# python 代碼
dr.find_element_by_css_selector("input.password").send_keys("test class selector")
# dr.find_element_by_css_selector(".password").send_keys("test class selector")
# Java 代碼
# driver.findElement(By.cssSelector("input.password"));
# driver.findElement(By.cssSelector(".password"));

Attribute 和Sub-String 選擇器

屬性選擇器說明如下：

選擇器類型	選擇器說明
`[attr]`	表示選擇帶有attr命名屬性的所有元素
`[attr=value]`	表示選擇帶有attr命名屬性，且屬性值爲value的元素
`[attr~=value]`	表示選擇帶有attr命名的屬性，且該屬性是一個一空格作爲分隔符的值列表，至少有一個值爲value
`[attr\|=value]`	表示選擇以attr命名屬性，且屬性值爲value或者以value-爲前綴開頭
`[attr^=value]`	表示帶有以attr命名的屬性，且屬性值是以value開頭的元素
`[attr$=value]`	表示帶有以attr命名的屬性，且屬性值是以value結尾的元素
`[attr*=value]`	表示帶有以attr命名的屬性，且屬性值包含有value的元素

默認代碼：

<!DOCTYPE html>
<html>
<head>
	<titile>Css selector 說明</title>
	<style>
		div{width: 100%;line-height:40px;
			margin-top:20px;background-color:orange;}
	</style>
</head>
<body>
	<div id='one'>1</div>
	<div id='two'>2</div>
	<div id="three">3</div>
	<div class="c1 c2 c3" id="four">4</div>
	<div class="five-test">5</div>
	<div id="six test">6</div>
</body>
</html>

效果圖：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-auHGeKBR-1589011413301)(C:\Users\liul8\Desktop\1.png)]$

修改style代碼如下：

	<style>
        div{width: 100%;line-height:40px;
            margin-top:20px;background-color:orange;}
        [id]{background-color: red;}
        [id="two"]{background-color: blue;}
        [class~="c2"]{font-size: 36px;color:white; background-color: yellow;}
        [class|="five"]{font-size: 36px;color:white; background-color: gray;}
        [id^="six"]{font-size: 36px;color:white; background-color: pink;}
        [id$="ree"]{background-color:steelblue;} 
	</style>

修改後的效果圖：

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fWEcNG4N-1589011413327)(C:\Users\liul8\Desktop\2.png)]$

在CSS中，Attribute 選擇器的語法可參考上邊的說明，css=input[id='Test attribute']：

HTML：

<div id="c1 c2 c3" id="four">4</div>
<div class="five-test">5</div>
<div>
    <label class="hidden-label" for="Test attribute">Test attribute: </label>
    <input id="Test attribute" class="inputtext" type="test email" tabindex="1" value="" name="test email">
</div>
<div>
    <label class="hidden-label" for="Test SUB-STRING MATCHES">Test SUB-STRING MATCHES: </label>
    <input id="Test_ID_001" >
</div>
<div>
    <label class="hidden-label" for="Test nth-child">Test nth-child: </label>
    <ul id="automation">
        <li>Selenium</li>
        <li>Appium</li>
        <li>Sikuli</li>
    </ul>
</div>

代碼：

dr.find_element_by_css_selector("input[type='test email']").send_keys("test attribute selector")
# dr.find_element_by_css_selector("input[id='Test_attribute'][type='test email']").send_keys("test attribute selector")
# dr.find_element_by_css_selector("input#Test_attribute[type='test email']").send_keys("test attribute selector")
#dr.find_element_by_css_selector("input.inputtext[type='test email']").send_keys("test attribute selector")
# sub-string
dr.find_element_by_css_selector("input[id^='Test_I']").send_keys("test sub-string selector")
# dr.find_element_by_css_selector("input[id$='001']").send_keys("test sub-string selector")
#dr.find_element_by_css_selector("input[id*='ID']").send_keys("test sub-string selector")
# print(dr.find_element_by_css_selector("div[id~='c2']").text)
# print(dr.find_element_by_css_selector("div[class|='five']").text)
# 選擇id值包含Test且不包含attribute的屬性
dr.find_element_by_css_selector("input[id*='Test']:not([id*='attribute'])").send_keys("test contains sub-string selector")
# 定位子元素
dr.find_element_by_css_selector("div#buttonDiv input").send_keys("test child element")
# 定位多個子元素
print(dr.find_element_by_css_selector("ul#automation li:last-child").text)
print(dr.find_element_by_css_selector("ul#automation li:nth-of-type(2)").text)
# 也可以直接用[attribute=value]進行定位
print(dr.find_element_by_css_selector("[id='two']").text)
print(dr.find_element_by_css_selector("[id^='tw']").text)

Inner-String 選擇器

語法：css=tag:contains("inner text")，但是經過試驗，不能用，貌似已經棄用這種方法了，會提示錯誤：invalid selector: An invalid or illegal selector was specified，沒辦法只能用xpath了

參考：

https://www.w3.org/TR/CSS21/selector.html%23id-selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

https://www.w3school.com.cn/cssref/css_selectors.asp

CSS Selectors 樣例

ID 選擇器

Class 選擇器

Attribute 和Sub-String 選擇器

Inner-String 選擇器

參考：

sqlite 免費的可視化工具

使用 WebDriverManager 遇到的問題

經典排序算法（一）--- 冒泡排序

xlsxwriter 簡單用法

Mac 搭建Appium自動化測試環境

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結