CSS Selector 是一种模式匹配语法,可以通过元素的属性、类名、ID 等来定位元素。以下是一些常用的 CSS Selector 定位示例:
1、通过 ID 定位:
使用 # 符号后跟元素的 ID 来定位。 示例:#username,表示定位 ID 属性为 "username" 的元素。
2、通过 Class 定位:
使用 . 符号后跟元素的 class 名称来定位。 示例:.submit-button,表示定位 class 属性为 "submit-button" 的元素。
3、通过标签名定位:
直接使用元素的标签名来定位。 示例:input,表示定位所有 <input> 元素。
4、通过属性定位:
使用方括号 [attr=value] 来定位具有指定属性和属性值的元素。 示例:input[type="text"],表示定位所有 type 属性为 "text" 的 <input> 元素。
5、通过层级关系定位:
使用空格来表示层级关系,例如 div span 表示定位 <div> 元素下的所有 <span> 元素。 示例:div.form-group input,表示定位 <div> 元素中具有 class 为 "form-group" 的元素下的所有 <input> 元素。
6、通过组合定位:
使用 , 来组合多个 CSS Selector,表示匹配其中任何一个选择器。 示例:input[type="text"], input[type="password"],表示定位所有 type 属性为 "text" 或 "password" 的 <input> 元素。
表格:
以下为部分示例:
<h2 data-v-042af283="" class="fl">济南市</h2>
h2[class='fl']
<div data-v-042af283="" class="clearfix checkLocalAdviceListHead"><h2 data-v-042af283="" class="fl">济南市</h2></div>
div h2[class='fl']
<li data-v-042af283="">
<div data-v-042af283="" class="clearfix checkLocalAdviceListHead">
<h2 data-v-042af283="" class="fl">济南市</h2></div><p data-v-042af283="" class="leaderNameInfo"></p><!---->
<div data-v-042af283="" class="leaveMessNum">
<span data-v-042af283="">年度总留言:<span data-v-042af283="" class="active">2002</span>条</span>
<div data-v-042af283="" class="split"></div>
<span data-v-042af283="">年度总回复:<span data-v-042af283="" class="active">1746</span>条</span><!----></div></li>
li div h2[class='fl']
li span:nth-child(1) > .active
li span:nth-child(3) > .active
<li id="advice5000"><h1>外交部</h1><h2>外交部部长</h2><div style="margin-right: 156px; display: flex; justify-content: left; align-items: center; padding-top: 15px; height: 45px;"><p class="leaderNameInfo" style="margin-top: 0px; margin-right: 10px;">王毅</p><!----></div><div class="checkAdviceListBtn"><button type="button" class="el-button el-button--danger el-button--mini is-plain"><!----><!----><span>查看留言</span></button><button type="button" class="el-button el-button--danger el-button--mini"><!----><!----><span>我要留言</span></button></div></li>
li h1
li h2
li p[class="leaderNameInfo"] 或 li p.leaderNameInfo
百度示例:
# 通过id定位,id名前加#
find_element_by_css_selector("#kw")
# 通过class定位,class名前加.
find_element_by_css_selector(".s_ipt")
# 通过标签定位
find_element_by_css_selector("input")
# 通过其它属性定位
find_element_by_css_selector("[name='wd']")
# 标签和属性组合定位
find_element_by_css_selector("input#kw")
find_element_by_css_selector("input.s_ipt")
find_element_by_css_selector("input[name='wd']")
find_element_by_css_selector("[name='wd'][autocomplete='off']")
# 通过父级定位子级元素
find_element_by_css_selector("from#form>span[@class='bg s_ipt_wr']>input")
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class elementLocalization {
public static void main(String[] args) {
String chromePath=System.getProperty("user.dir")
+"\\driver\\chromedriver.exe";
System.setProperty("webdriver.chrome.driver", chromePath);
WebDriver driver=new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://www.baidu.com");
try {
WebElement element=null; //定义一个Web对象对象
// element=driver.findElement(By.cssSelector(".s_ipt"));//CSS样式名称定位百度搜索输入框
element=driver.findElement(By.cssSelector("#kw"));//CSSID定位百度搜索输入框
element=driver.findElement(By.cssSelector("div,a"));//CSS定位所有div对象和a对象
element=driver.findElement(By.cssSelector("div a"));//CSS定位div标签内所有的a对象
element=driver.findElement(By.cssSelector("div>a"));//CSS定位父对象是div的所有a对象
element=driver.findElement(By.cssSelector("div+a"));//CSS定位紧接在<div> 对象之后的所有<a> 对象
element=driver.findElement(By.cssSelector("[target='_blank']"));//选择target="_blank" 的所有对象。
element=driver.findElement(By.cssSelector("a[name='tj_trnews'][class='mnav']"));//定位A标签中name='tj_trnews'并且class='mnav'的对象
element=driver.findElement(By.cssSelector("a[href^='http']"));//选择a标签对象中href 属性值以"http" 开头的每个<a> 对象。
element=driver.findElement(By.cssSelector("a[href$='.com']"));//选择a标签对象中href属性值以".com"结尾的对象
element=driver.findElement(By.cssSelector("a[href*='news']"));//选择a标签对象中href属性值中包含news的对象
element=driver.findElement(By.cssSelector("a:nth-last-child(2)"));//选择属于其父对象的首个<a> 对象的每个<a> 对象。
element=driver.findElement(By.cssSelector("html body div#wrapper div#head div.head_wrapper div.s_form div.s_form_wrapper.soutu-env-nomac.soutu-env-index form#form.fm span.bg.s_ipt_wr.quickdelete-wrap input#kw.s_ipt"));//通过css绝对路径定位
} catch (Exception e) {
System.out.println("定位失败");
}
}
}