整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          selenium之css定位小結

          大部分人在使用selenium定位元素時,用的是xpath定位,因為xpath基本能解決定位的需求。css定位往往被忽略掉了,其實css定位也有它的價值,css定位更快,語法更簡潔。
          這一篇css的定位方法,主要是對比上一篇的xpath來的,基本上xpath能完成的,css也可以做到。兩篇對比學習,更容易理解。

          CSS 選擇器:

          常見符號:

          #表示 id選擇器
          .表示 class選擇器
          >表示子元素,層級
          一個空格也表示子元素,但是是所有的后代子元素,相當于 xpath 中的相對路徑

          一、css:屬性定位

          1.css可以通過元素的id、class、標簽這三個常規屬性直接定位到

          2.如下是百度輸入框的的html代碼:

          <input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

          3.css用#號表示id屬性,如:#kw

          4.css用.表示class屬性,如:.s_ipt

          5.css直接用標簽名稱,無任何標示符,如:input

          二、css:其它屬性

          1.css除了可以通過標簽、class、id這三個常規屬性定位外,也可以通過其它屬性定位

          2.以下是定位其它屬性的格式
          [name=wd] [autocomplete='off'][maxlength='255']

          三、css:標簽

          css頁可以通過標簽與屬性的組合來定位元素
          input.s_ipt input#kw input[id='kw']

          四、css:層級關系

          //form的id屬性
          form#form>span>input
          //form的class屬性
          form.fm>span>input

          五、css:索引

          css也可以通過索引nth-child(1)來定位子元素,直接翻譯過來就是第幾個小孩
          總結:選擇標簽后,找第幾個小孩即可
          Select控件第三個Opel
          #select>select>option:nth-child(3)
          CheckBox第一個Volvo
          #checkbox>input:nth-child(1)

          CheckBox第二個Saab
          #checkbox>input:nth-child(4)
          RadioBox第二個Saab
          #radio>input:nth-child(4)


          通過索引nth-of-type(2)來定位子元素,按照分類指定

          選擇select的saab
          #select>select>option:nth-of-type(2);

          選擇 id 為 radio 的 div 下的第 1 個子節點
          div#radio>input:nth-of-type(4)+label

          選擇id 為radio 的div 下的第4 個input 節點之后挨著的 label
          節點
          div#radio>input:nth-of-type(4)~label

          六、css:邏輯運算

          css同樣也可以實現邏輯運算,同時匹配兩個屬性,這里跟xpath不一樣,無需寫and關鍵字
          [type='checkbox'][name='checkbox1']

          css語法遠遠不止上面提到的,還有更多更強大定位策略,有興趣的同學可以繼續深入研究!

          如覺得文章對您有幫助,還請幫忙轉發!

          一章講了selenium提供了多種元素定位方法,今天學習元素定位之css定位

          CSS定位:

          CSS(Cascading Style Sheets)是一種語言,它用來描述HTML和XML文檔的表現。CSS使用選擇器來為頁面元素綁定屬性。這些選擇器可以被selenium用作另外的定位策略。

          CSS可以較為靈活的選擇空間的任意屬性,一般情況下定位速度要比XPath快,但對于初學者來說學習起來稍微有點難度,下面我們就詳細地介紹CSS的語法與使用。

          選擇器

          例子

          描述

          .class

          .intro

          class選擇器,選擇class=’intro’的所有元素

          #id

          #firstname

          Id選擇器,選擇id=’firstname’的所有元素

          *

          *

          選擇所有元素

          element

          p

          所有<p>元素

          Element > element

          div > input

          選擇父元素為<div>的所有<input>元素

          Element + element

          div + input

          選擇同一級中緊接在<div>元素之后的所有<input>元素

          [attribute=value]

          [target=_blank]

          選擇target=’_blank’的所有元素

          下面同樣以百度輸入框和搜索按鈕為例介紹CSS定位的用法。

          <span class=’bg s_ipt_wr’>

          <input id=’kw’ class=’s_ipt’ sutocomplete=’off’ maxlength=’100’ value=’’ name=’wd’

          </span>

          <span class=’bg s_ipt_wr’>

          <input id=’su’ class=’bg s_btn’ type=’submit’ value=’百度一下’

          </span>

          ...

          1)通過class屬性定位:

          find_element_by_css_selector(‘.s_ipt’)

          find_element_by_css_selector(‘.bg s_btn’)

          find_element_by_css_selector()方法用于CSS語言定位元素,點號(.)表示通過class屬性來定位元素。

          2)通過id屬性定位:

          find_element_by_css_selector(‘#kw’)

          find_element_by_css_selector(‘#su’)

          井號(#)表示通過id屬性來定位元素

          3)通過標簽名定位:

          find_element_by_css_selector(‘input’)

          在CSS語言中,用標簽名定位元素不需要任何符號標識,直接使用標簽名即可。但我們前面已經了解了,標簽名重復的概率非常大,所以通過這種方式很難找到想要的元素。

          我們可以通過以下幾種方式來使標簽名查找方式生效:

          1、通過父子關系定位:

          find_element_by_css_selector(‘span>span’)

          上面的寫法表示有父親,它的標簽名為span,查找它的所有標簽名交input的子元素

          2、通過屬性定位:

          find_element_by_css_selector(“[autocomplete=off]”)

          find_element_by_css_selector(“[name=’kw’]”)

          find_element_by_css_selector(“[type=’submit’]”)

          在CSS當中也可以使用元素的任意屬性,只要這些屬性可以唯一標識這個元素。對于屬性值來說,可加引號,也可以不加,但注意和整個字符串的引號進行區分。

          3、組合定位:

          我們當然可以把上面的定位策略組合起來使用,這就大大加強了定位元素的唯一性。

          find_element_by_css_selector(“span.bg s_ipt_wr>input.s_ipt”)

          find_element_by_css_selector(“span.bg s_ipt_wr>input#su”)

          有一個父元素,它的標簽名叫span;它有一個class屬性值叫bg s_ipt_wr;它有一個子元素,標簽名叫inout,并且這個子元素的class屬性值叫s_ipt。好吧,我們要找的就是具有這么多特征的一個子元素。

          一篇文章說了HTML,現在再來說一說CSS,所謂CSS是指層疊樣式表 (Cascading Style Sheets),通過引入樣式表,從而極大的提高了工作效率。

          搭配視頻觀看效果更佳~~

          Web前端開發零基礎入門HTML/CSS/JavaScript

          https://www.ixigua.com/6907467670300393988


          什么是CSS?

          Cascading Style Sheet

          層疊樣式表語言(不是編程語言,屬于樣式表語言,沒有變量、數據類型、控制語句...)

          CSS其實是專門用來修飾HTML的,讓HTML更好看。

          CSS是HTML的化妝品。

          CSS是為HTML服務的,所以HTML還是主體,CSS是依附在HTML上的,

          所以進行CSS的開發,我們還是需要新建html/htm文件。

          在HTML中怎么嵌入CSS樣式呢?

          第一種方式:內聯定義

          第二種方式:定義內部樣式塊對象

          第三種方式:鏈入外部樣式表文件(這種方式最常用!)

          關于選擇器的優先級:

          • 標簽選擇器優先級最低。
          • 其次是類選擇器。
          • 最高優先級是id選擇器。

          CSS設置背景(background)

          • 背景顏色 background-color
          • 背景圖片 background-image
          • 背景重復 background-repeat:repeat-x/repeat-y
          • 背景位置 background-position:bottom/left/top/right/center
          • 背景關聯 background-attachment:fixed/scroll

          綜合寫法:

          .tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

          CSS設置文本格式

          通過文本屬性,您可以改變文本的顏色、字符間距,對齊文本,裝飾文本,對文本進行縮進,等等。

          文本縮進 :Text-indent:2em

          文本對齊方式:Text-align:left/right/center/ justify

          文本修飾:Text-decoration:underline/line-through/overline/none

          字符間距:Word-spacing:px/em 英文單詞之間的間隔;

          Letter-spacing:px/em漢字和英文字母之間的間隔;

          文本轉換:Text-transform:uppercase/lowercase/ capitalize

          行與行間距:Line-height:px/%

          垂直對齊圖像: vertical-align:text-top/text-bottom

          文本陰影:text-shadow:水平偏移,垂直偏移 顏色

          字體

          字體類型:font-family:”sans-serif”;

          字體樣式:font-style:normal ;

          字體大小:font-size:20px/3.75em/100%;默認大小為16px,字體為宋體

          字體加粗:font-weight:normal;

          字體的轉變:font-variant:normal/smallcaps;

          CSS鏈接

          鏈接的四種狀態

          a:link {color:#FF0000;}     /* 未被訪問的鏈接 */
          a:visited {color:#00FF00;}  /* 已被訪問的鏈接 */
          a:hover {color:#FF00FF;}    /* 鼠標指針移動到鏈接上 */
          a:active {color:#0000FF;}   /* 正在被點擊的鏈接 */

          【注意】當為鏈接的不同狀態設置樣式時,請按照以下次序規則:

          a:hover 必須位于 a:link 和 a:visited 之后

          a:active 必須位于 a:hover 之后

          去掉a鏈接默認的下劃線

          text-decoration:{none/underline}

          a:link {text-decoration:none;}
          a:visited {text-decoration:none;}
          a:hover {text-decoration:underline;}
          a:active {text-decoration:underline;}

          創建鏈接塊

          display:block;

          列表樣式

          在一個無序列表中,列表項的標志 (marker) 是出現在各列表項旁邊的圓點。在有序列表中,標志可能是字母、數字或另外某種計數體系中的一個符號。

          要修改用于列表項的標志類型,可以使用屬性 list-style-type:

          ul {list-style-type : square;}

          上面的聲明把無序列表中的列表項標志設置為方塊。

          列表項圖像

          你可能想對各標志使用一個圖像,這可以利用 list-style-image 屬性做到:

          ul li {list-style-image : url(xxx.gif);}

          列表標志位置

          ul{
            list-style-position:inside;
            }

          CSS表格

          表格邊框

          table,th,td{border:1px solid red;}

          折疊邊框

          border-collapse:collapse;

          • 表格的寬度和高度

          width,height

          • 表格的文字水平對齊

          text-align:center/right/left;

          • 表格的文字垂直對齊

          vertical-align:bottom;

          • 表格的內邊距

          padding

          • 表格的背景顏色

          background

          盒子模型

          margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的。

          根據上, 右, 下, 左的順時針規則, 簡寫為

          margin: 40px 40px 40px 40px;

          為便于記憶, 請參考下圖:

          當上下, 左右margin值分別一致, 可簡寫為:

          margin: 40px 40px;

          前一個40px代表上下margin值, 后一個40px代表左右margin值.

          當上下左右margin值均一致, 可簡寫為:

          margin: 40px;

          padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, content與border之間的距離

          【注意】當你想讓兩個元素的content在垂直方向(vertically)分隔時, 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 在此建議你盡量使用padding-top/bottom來達到你的目的, 這是因為css中存在Collapsing margins(折疊的margins)的現象.

          邊框

          • 邊框樣式:border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
          • 邊框寬度:border-width
          • 邊框顏色:border-color

          綜合寫法:

          border:1px solid red;

          輪廓(outline)

          可以按順序設置如下屬性:

          • outline-color
          • outline-style
          • outline-width

          CSS所有尺寸

          • 寬度

          width/min-width/max-width

          • 高度

          height/min-height/max-height

          • 行高

          line-height

          display顯示類型

          隱藏元素—–display:none或者visibility:hiddden

          display通常可以設置為none、inline、block

          visibility通常可以設置為hidden、visible

          二者的區別在于display會將元素隱藏掉,并且位置不再被占據,而visibility則是占據原來的位置。

          CSS塊級元素和內聯元素—-display:block/inline/inline-block;

          CSS定位(position)

          position 屬性值的含義:

          static

          元素框正常生成。塊級元素生成一個矩形框,作為文檔流的一部分,行內元素則會創建一個或多個行框,置于其父元素中。

          relative

          元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留。

          absolute

          元素框從文檔流完全刪除,并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉,就好像元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。

          fixed

          元素框的表現類似于將 position 設置為 absolute,不過其包含塊是視窗本身。

          CSS浮動

          設置浮動:float:left/right;

          清除浮動:clear:both/left/right/null;

          浮動的兩個影響因素:1、文檔流 2、顯示類型

          元素內容溢出

          • 溢出滾動條

          overflow:scroll(不管是否溢出都會有滾動條)、auto(自動添加)

          • 溢出隱藏

          overflow:hidden;

          CSS的相關特性

          1、繼承性

          它不僅允許樣式應用于某個特定的html標簽元素,而且還可引用于其后代;

          2、CSS層疊

          當有相同權重的樣式存在時,會根據這些CSS樣式的前后順序來決定,處于最后面的CSS樣式會被應用,后面的CSS樣式會覆蓋前面的樣式。

          總而言之:內聯樣式表(標簽內部)>嵌入樣式表(當前文件中)>外部樣式表(外部引入文件)


          主站蜘蛛池模板: 亚洲香蕉久久一区二区三区四区| 国产精品一区二区三区高清在线 | 内射少妇一区27P| 国产av一区二区三区日韩| 日韩精品免费一区二区三区| 鲁丝片一区二区三区免费| 国产一区二区三区国产精品| 91视频一区二区| 无码精品国产一区二区三区免费 | 国产免费一区二区三区不卡| 无码精品人妻一区二区三区AV| 2021国产精品视频一区| 亚洲av福利无码无一区二区| 中文字幕精品一区二区三区视频| 精品无码一区二区三区水蜜桃| 亚洲综合激情五月色一区| 99久久人妻精品免费一区| 亚洲视频一区调教| 人妻无码视频一区二区三区| 无码精品人妻一区二区三区免费看| 国产韩国精品一区二区三区| 一区免费在线观看| 久久AAAA片一区二区| 99精品久久精品一区二区| 免费看一区二区三区四区| 国内精品无码一区二区三区| 久久精品一区二区三区四区 | 亚洲熟女乱色一区二区三区| 日本无卡码一区二区三区| 亚洲综合无码一区二区痴汉 | 麻豆一区二区在我观看| 亚洲乱码国产一区三区| 无码一区二区三区老色鬼| 国产精品自拍一区| 午夜视频在线观看一区| 无码AV一区二区三区无码| 亚洲一区二区三区影院| 国产精品高清一区二区三区不卡| 亚拍精品一区二区三区| 国产乱码精品一区二区三区四川| 国产伦精品一区二区|