2. 程式人生 > >Web自動化 - 選擇操作元素 2

Web自動化 - 選擇操作元素 2

阿新 • • 發佈：2018-04-06
tutorial data- 語法 開發 drive 看到了 OS CP 運用

文章轉自 白月黑羽教Python

前面我們看到了根據 id、class屬性、tag名 選擇元素。

如果我們要選擇的 元素 沒有id、class 屬性， 這時候我們通常可以通過 CSS selector 語法選擇元素。

CSS Selector 語法選擇元素

HTML中經常要 為 某些元素 指定顯示風格，比如 前景文字顏色是紅色， 背景顏色是黑色， 字體是微軟雅黑等。

那麽CSS必須告訴瀏覽器：要 選擇哪些元素 ， 來使用這樣的顯示風格。

CSS Selector 語法就是用來選擇元素的。

既然它能選擇元素，正好我們web 自動化也要選擇元素， 所以selenium規範就把 CSS Selector 也納入到選擇元素的方法中了。

只要 CSS Selector 的語法是正確的， Selenium 就可以選擇到該元素。

通過 CSS Selector 選擇單個元素的方法是

find_element_by_css_selector(CSS Selector參數)

選擇所有元素的方法是

find_elements_by_css_selector(CSS Selector參數)

CSS Selector 選擇元素非常靈活強大， 大家可以從下面的例子看出來。

Web自動化 - 選擇操作元素 2

本文目錄

  • CSS SELECTOR 語法選擇元素
    • 根據 TAG名、ID、CLASS 選擇元素
    • 選擇 子元素 和 後代元素
    • 混合運用
    • 驗證 CSS SELECTOR

前面我們看到了根據 id、class屬性、tag名 選擇元素。

如果我們要選擇的 元素 沒有id、class 屬性， 這時候我們通常可以通過 CSS selector 語法選擇元素。

CSS Selector 語法選擇元素

HTML中經常要 為 某些元素 指定顯示風格，比如 前景文字顏色是紅色， 背景顏色是黑色， 字體是微軟雅黑等。

那麽CSS必須告訴瀏覽器：要 選擇哪些元素 ， 來使用這樣的顯示風格。

CSS Selector 語法就是用來選擇元素的。

既然它能選擇元素，正好我們web 自動化也要選擇元素， 所以selenium規範就把 CSS Selector 也納入到選擇元素的方法中了。

只要 CSS Selector 的語法是正確的， Selenium 就可以選擇到該元素。

通過 CSS Selector 選擇單個元素的方法是

find_element_by_css_selector(CSS Selector參數)

選擇所有元素的方法是

find_elements_by_css_selector(CSS Selector參數)

CSS Selector 選擇元素非常靈活強大， 大家可以從下面的例子看出來。

根據 tag名、id、class 選擇元素

CSS Selector 同樣可以根據tag名、id 和 class 選擇元素，

根據 tag名 選擇元素的 CSS Selector 語法非常簡單，直接就是tag名，

比如 要選擇 所有的tag名為div的元素，就可以是這樣

elements = driver.find_elements_by_css_selector(‘div‘)

等價於

elements = driver.find_elements_by_tag_name(‘div‘)

根據id 選擇元素的語法是在id號前面加上一個井號： #<id值>

比如 這個網址

有下面這樣的元素：

<input type="text" id=‘searchtext‘ />

就可以使用 #searchtext 這樣的 CSS Selector 來選擇它。

比如，我們想在 id 為 searchtext 的輸入框中輸入文本 你好 ，完整的Python代碼如下

from selenium import webdriver

driver = webdriver.Chrome(r‘d:\webdrivers\chromedriver.exe‘)

driver.get(‘http://www.python3.vip/doc/tutorial/python/code/sample1.html‘)

element = driver.find_element_by_css_selector(‘#searchtext‘)
element.send_keys(‘你好‘)

根據class 選擇元素的語法是在 class 值 前面加上一個點： .<class值>

比如 這個網址

要選擇所有的class 屬性值為 animal的元素 動物 除了這樣寫

elements = driver.find_elements_by_class_name(‘animal‘)

還可以這樣寫

elements = driver.find_elements_by_css_selector(‘.animal‘)

因為是選擇 所有的 ，所以用 find_elements 而不是 find_element

選擇 子元素 和 後代元素

HTML中， 元素 內部可以包含其他元素， 比如 下面的一個HTML片段

<div id=‘container‘>
    
    <div id=‘layer1‘>
        <div id=‘inner11‘>
            <span>內層11</span>
        </div>
        <div id=‘inner12‘>
            <span>內層12</span>
        </div>
    </div>

    <div id=‘layer2‘>
        <div id=‘inner21‘>
            <span>內層21</span>
        </div>
    </div>
    
</div>

Web自動化 - 選擇操作元素 2

本文目錄

  • CSS SELECTOR 語法選擇元素
    • 根據 TAG名、ID、CLASS 選擇元素
    • 選擇 子元素 和 後代元素
    • 混合運用
    • 驗證 CSS SELECTOR

前面我們看到了根據 id、class屬性、tag名 選擇元素。

如果我們要選擇的 元素 沒有id、class 屬性， 這時候我們通常可以通過 CSS selector 語法選擇元素。

CSS Selector 語法選擇元素

HTML中經常要 為 某些元素 指定顯示風格，比如 前景文字顏色是紅色， 背景顏色是黑色， 字體是微軟雅黑等。

那麽CSS必須告訴瀏覽器：要 選擇哪些元素 ， 來使用這樣的顯示風格。

CSS Selector 語法就是用來選擇元素的。

既然它能選擇元素，正好我們web 自動化也要選擇元素， 所以selenium規範就把 CSS Selector 也納入到選擇元素的方法中了。

只要 CSS Selector 的語法是正確的， Selenium 就可以選擇到該元素。

通過 CSS Selector 選擇單個元素的方法是

find_element_by_css_selector(CSS Selector參數)

選擇所有元素的方法是

find_elements_by_css_selector(CSS Selector參數)

CSS Selector 選擇元素非常靈活強大， 大家可以從下面的例子看出來。

根據 tag名、id、class 選擇元素

CSS Selector 同樣可以根據tag名、id 和 class 選擇元素，

根據 tag名 選擇元素的 CSS Selector 語法非常簡單，直接就是tag名，

比如 要選擇 所有的tag名為div的元素，就可以是這樣

elements = driver.find_elements_by_css_selector(‘div‘)

等價於

elements = driver.find_elements_by_tag_name(‘div‘)

根據id 選擇元素的語法是在id號前面加上一個井號： #<id值>

比如 這個網址

有下面這樣的元素：

<input type="text" id=‘searchtext‘ />

就可以使用 #searchtext 這樣的 CSS Selector 來選擇它。

比如，我們想在 id 為 searchtext 的輸入框中輸入文本 你好 ，完整的Python代碼如下

from selenium import webdriver driver = webdriver.Chrome(r‘d:\webdrivers\chromedriver.exe‘) driver.get(‘‘) element = driver.find_element_by_css_selector(‘#searchtext‘) element.send_keys(‘你好‘)

根據class 選擇元素的語法是在 class 值 前面加上一個點： .<class值>

比如 這個網址

要選擇所有的class 屬性值為 animal的元素 動物 除了這樣寫

elements = driver.find_elements_by_class_name(‘animal‘)

還可以這樣寫

elements = driver.find_elements_by_css_selector(‘.animal‘)

因為是選擇 所有的 ，所以用 find_elements 而不是 find_element

選擇 子元素 和 後代元素

HTML中， 元素 內部可以包含其他元素， 比如 下面的一個HTML片段

<div id=‘container‘> <div id=‘layer1‘> <div id=‘inner11‘> <span>內層11</span> </div> <div id=‘inner12‘> <span>內層12</span> </div> </div> <div id=‘layer2‘> <div id=‘inner21‘> <span>內層21</span> </div> </div> </div>

id 為 container 的div元素 包含了 id 為 layer1 和 layer2 的兩個div元素。 這種包含是直接包含， 中間沒有其他的包含層次了。 所以 id 為 layer1 和 layer2 的兩個div元素 是 id 為 container 的div元素 的 直接子元素

而 id 為 layer1 的div元素 又包含了 id 為 inner11 和 inner12 的兩個div元素。 這種包含關系也是直接子元素 關系

id 為 layer2 的div元素 又包含了 id 為 inner21 這個div元素。 這種包含關系也是直接子元素 關系

而對於 id 為 container 的div元素來說， id 為 inner11 、inner12 、inner22 的元素 和 上面的兩個span 元素 都不是 它的直接子元素， 因為中間隔了 幾層。

雖然不是直接子元素， 但是 它們還是在 container 的內部， 可以稱之為它 的 後代元素

後代元素也包括了直接子元素， 比如 id 為 layer1 和 layer2 的兩個div元素 是 id 為 container 的div元素 的 直接子元素，同時也是後代子元素

如果 元素1 是 元素2 的 直接子元素， CSS Selector 選擇子元素的語法是這樣的

元素1 > 元素2

中間用一個大於號 （我們可以理解為箭頭號）

最終選擇的元素是 元素2

也支持更多層級的選擇， 比如

元素1 > 元素2 > 元素3 > 元素4

就是選擇 元素1 裏面的子元素 元素2 裏面的子元素 元素3 裏面的子元素 元素4 ， 最終選擇的元素是 元素4

如果 元素1 是 元素2 的 後代元素， CSS Selector 選擇後代元素的語法是這樣的

元素1   元素2

中間是一個或者多個空格隔開

最終選擇的元素是 元素2

也支持更多層級的選擇， 比如

元素1   元素2   元素3  元素4

最終選擇的元素是 元素4

混合運用

CSS selector的強大之處 就是上面的方法可以混合使用

比如， 我們要選擇 下面的 html 中的元素 <span class=‘copyright‘>版權</span>

<div id=‘bottom‘>
    <div class=‘footer1‘>
        <span class=‘copyright‘>版權</span>
        <span class=‘date‘>發布日期：2018-03-03</span>
    </div>
    <div class=‘footer2‘>
        <span>備案號
            <a href="http://www.miitbeian.gov.cn">蘇ICP備88885574號</a>
        </span>
    </div>        
</div>

CSS selector 表達式就是

div.footer > span.copyright

也可以更簡單：

.footer > .copyright

當然 這樣也是可以的：

.footer  .copyright

因為子元素同時也是後代元素

驗證 CSS Selector

那麽我們怎麽驗證 CSS Selector 的語法是否正確選擇了我們要選擇的元素呢？

當然可以像下面這樣，寫出Python代碼，運行看看，能否操作成功

element = driver.find_element_by_css_selector(‘#searchtext‘) 
element.input(‘輸入的文本‘)

如果成功，說明選擇元素的語法是正確的。

但是這樣做的問題就是：太麻煩了。

當我們進行自動化開發的時候，有大量選擇元素的語句，都要這樣一個個的驗證，就非常耗時間。

由於 CSS Selector 是瀏覽器直接支持的，可以在瀏覽器開發者工具欄中驗證。

比如我們使用Chrome瀏覽器打開

按F12 打開 開發者工具欄

如果我們要驗證 下面的表達式

#bottom > .footer2  a

能否選中 這個元素

<a href="http://www.miitbeian.gov.cn">蘇ICP備88885574號</a>

可以這樣做：

點擊 Elements 標簽後， 同時按 Ctrl 鍵 和 F 鍵， 就會出現下圖箭頭處的 搜索框

技術分享圖片

我們可以在裏面輸入任何 CSS Selector 表達式 ，如果能選擇到元素， 右邊的的紅色方框裏面就會顯示出類似 2 of 3 這樣的內容。

of 後面的數字表示這樣的表達式 總共選擇到幾個元素

of 前面的數字表示當前黃色高亮顯示的是 其中第幾個元素

上圖中的 1 of 1 就是指 ： CSS selector

#bottom > .footer2  a

在當前網頁上共選擇到 1 個元素， 目前高亮顯示的是第1個。

如果我們輸入 .plant 就會發現，可以選擇到3個元素

技術分享圖片技術分享圖片

訪問 白月黑羽教Python 查看更多教程

Web自動化 - 選擇操作元素 2

相關推薦

Web自動化 - 選擇操作元素 2

tutorial data- 語法 開發 drive 看到了 OS CP 運用 文章轉自 白月黑羽教Python 前面我們看到了根據 id、class屬性、tag名 選擇元素。 如果我們要選擇的 元素 沒有id、class 屬性， 這時候我們通常可以通過 CSS

Web自動化 - 選擇操作元素 1

click 列表 文章 ebe ssa href 數字 錯誤 nor 文章轉自 白月黑羽教Python 所有的 UI （用戶界面）操作 的自動化，都需要選擇界面元素。 選擇界面元素就是:先讓程序能找到你要操作的界面元素。 先找到元素，才能操作元素。

web自動化2-selenium基本操作之元素定位

main .com blog text lin div spa wid 操作 id driver.find_elenment_by_id("kw") name driver.find_element_by_name("kw") class name diver.find

【Web自動化測試——代碼篇四】常用方法——常見元素操作

fin pack 百度輸入 submit .get ted baidu 百度搜 內容 瀏覽器這個大框架我們都能控制，區區頁面小元素又能奈我們何！！！之前的【Web自動化測試——代碼篇二】條條大路找元素 已經講述了許多獲取元素的方法，在此基礎上我們來認識幾個元素最常見的相關操

Selenium Java Web 自動化實踐總結（六）元素操作例項

先上介面和html程式碼，頁面包含按鈕，單選框，複選框，下拉框，輸入框這幾種頁面常用元素 html程式碼如下 <html> <head>演示用html</head> <body> <br><br><br>

WEB自動化頁面元素常用操作

一：以Chrome為例 1、引入webdriver from selenium import webdriver 2、開啟驅動程式與Chrome建立連線 driver=webdriver.Chrome() 3、訪問需要測試的網站,以百度為例 driver.get

python - web自動化測試 - 元素操作 - 窗口切換

port Coding and miss 元素 觸發 cep import 列表 # -*- coding:utf-8 -*- ‘‘‘ @project: web學習 @author: Jimmy @file: 元素操作-切換.py @ide: PyCharm Comm

一隻自動化測試小白的學習記錄——Python+Selenium+Sublime 運用API、元素定位、元素操作方法、滑鼠鍵盤事件實現入門Web自動化測試

題外話：之前做一些自動化測試的入門實驗都是用的Python的IDLE進行編寫的，正兒八經的好處（可以一行一行地執行，因此能夠直觀地看到對於網頁測試的每一步變化，也能夠明確地知道在哪一步出了錯），不知所云的壞處(沒有一下子執行指令碼程式的成就感?????（黑人嚴肅臉）) 。於是

Web自動化必會知識：「Web基礎、元素定位、元素操作、Selenium執行原理、專案實戰+框架」

1.web 基礎-html、dom 物件、js 基本語法 Dom 物件裡面涉及元素定位以及對元素的修改。因為對元素操作當中涉及的一些 js 操作，js 基本語法要會用。得要掌握前端的基本用法。為什麼要元素定位？因為找到這個元素，就能告訴程式碼要找誰要做什麼。 2.元素定位 四大基本元素定位：id name c

【python+selenium的web自動化】- 元素的常用操作詳解(一)

如果想從頭學起selenium，可以去看看這個系列的文章哦！ https://www.cnblogs.com/miki-peng/category/1942527.html ​ **本篇主要內容：1.元素的基本操作；2.等待操作；3.iframe操作；4.alert彈出框** ​ **下篇主要內容

【python+selenium的web自動化】- 元素的常用操作詳解(二)

如果想從頭學起selenium，可以去看看這個系列的文章哦！ https://www.cnblogs.com/miki-peng/category/1942527.html ​ **本篇主要內容：1.滑鼠操作；2.鍵盤操作；3.下拉框操作；4.js處理** ​ **上篇主要內容：1.元素的基本操作

web自動化8-selenium簡單操作方法

bdr url isp nbt web selenium attr () 尺寸 1. 控制窗口大小 form selenium import webdriver driver = webdriver.Chrome() driver.get("http://www.ba

web自動化測試---css方式定位頁面元素

class 進行 lec web 輸入框 python 百度 inpu 直接 　　css方式定位的方法也有很多，相較於xpath更靈活一點，下面就介紹下使用方法（以百度輸入框為例） 1、通過tag來定位，可以寫成如下： driver.find_element_by_css

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操作元素，自定義屬性

器） user 對比 style 按鈕 ont mp3 url -- 大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔 博客園：ht

Selenium Java Web 自動化實踐總結（五）元素的Actions

  1.sendKeys（）：往輸入框中輸入資訊  用法1：driver.find（..）. sendKeys('abc')  //輸入普通按鍵  用法2：driver.find（..）. sendKeys(Keys.ENTER)  //

1121Selenium web自動化測試經驗分享-模擬鍵盤操作的三種類；推薦使用pykeyboard包

在Web自動化測試中，有時候會用鍵盤來輸入內容，沒那麼常用，但分享下我爬的坑。 第一個：keys模組 WebDriver中對鍵盤的操作都封裝在Keys類中； 一直到20號前 我還沒接觸過下面講的pykeyboard模組，所以一直有幾個問題沒能搞定： 1.CTRL + 數字鍵 切換

基於MVC4+EasyUI的Web開發框架經驗總結（14）--自動生成圖示樣式檔案和圖示的選擇操作

在很多Web系統中，一般都可能提供一些圖示的選擇，方便配置按鈕，選單等介面元素的圖示，從而是Web系統介面看起來更加美觀和協調。但是在系統中一般內建的圖示樣式相對比較有限，而且硬編碼寫到樣式表裡面，這樣給我們擴充套件使用有很多的不方便。基於這個原因，我想如果能夠獨立一個模組，自動根據圖示生成圖示CSS樣式檔案

從零開始學 Web 之 jQuery（五）操作元素其他屬性，為元素繫結事件

一、操作元素的寬和高 1、方法一 元素.css("width"); 元素.css("height"); 最後得到的是字串型別的，比如 200px。 如果我們在設定為原來寬高2倍的時候，就要先把獲取的寬高轉換成數字型別，再乘以2，這樣操作比較麻煩，有沒有簡單的方法呢？ 2、方法二 元素.width(屬性

web自動化測試框架selenium呼叫JavaScript程式碼常用操作解析

        在做web專案時，通常需要開發一些自動化用例，自動化用例執行可以設定觸發條件，也可以定時執行，在每次程式碼發生變更的情況下，自動觸發自動化用例執行，可以及時檢測修改程式碼是否引入新的問題，提高產品的自信度。在開發web端自動化用例程式碼時，目前大多采用主流的s