Webdriver之API詳解(3) /「干貨」webdriverapi用法分享

言

前面兩天一直在分享webdriver api的用法，今天呢還是繼續(xù)分享webdriver api的用法，廢話就不多說了，直接進入主題吧。

一、操作多選的選擇列表

被測HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作多選列表</title>
</head>
<body>
    <select name="fruit" size="6" multiple=true>
        <option id="peach" value="taozi">桃子</option>
        <option id="watermelon" value="xigua">西瓜</option>
        <option id="orange" value="juzi">橘子</option>
        <option id="kiwifruit" value="nihoutao">獼猴桃</option>
        <option id="maybush" value="shanzha">山楂</option>
        <option id="litchi" value="lizhi">荔枝</option>
    </select>
</body>
</html>

調(diào)用API實例代碼

      def testMultipleOptions(self):
          from selenium.webdriver.support.ui import Select
          import time
          self.driver.get(r'file:///C:/Users/v-xug/Desktop/multipleOptions.html')
          select_element = Select(self.driver.find_element_by_xpath('//select'))
          # 通過序號選擇第一個元素
          select_element.select_by_index(0)
          # 通過文本選擇山楂
          select_element.select_by_visible_text('山楂')
         # 通過選項的value屬性值選擇value=獼猴桃
         select_element.select_by_value('nihoutao')
         # 打印所有選中文本
        for option in select_element.all_selected_options:
             print(option.text)
         # 再次選中3個選項
         select_element.select_by_index(1)
         select_element.select_by_value('juzi')
         select_element.select_by_visible_text('荔枝')
         # 取消3個選項
         select_element.deselect_by_index(0)
         select_element.deselect_by_value('nihoutao')
         select_element.deselect_by_visible_text('山楂')

  桃子
  獼猴桃
  山楂
  .
  ----------------------------------------------------------------------
  Ran 1 test in 10.988s
  
  OK
  
  Process finished with exit code 0

說明

運行這段代碼看到的效果是，先選擇3個選項并打印被選擇的選項的文本值，再次選中3個選項并取消之前被選中的3個選項，對于可以多選的操作列表，上面的幾個方法是很實用的，當(dāng)然實際中可能遇見各種不同的情況，還需多積累經(jīng)驗對不同問題用不同方法。

二、操作可以輸入的下拉列表（輸入的同時模擬按鍵）

被測HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作可輸入下拉列表，輸入的同時模擬按鍵</title>
</head>
<body>
    <div style="position:relative;">
        <input list="pasta" id="select">
        <datalist id="pasta">
            <option>Bavette</option>
            <option>Rigatoni</option>
            <option>Fiorentine</option>
            <option>Gnocchi</option>
            <option>Tagliatelle</option>
            <option>Penne lisce</option>
            <option>Pici</option>
            <option>Pappardelle</option>
            <option>Spaghetti</option>
            <option>Cannelloni</option>
            <option>Cancl</option>
        </datalist>
    </div>
</body>
</html>

調(diào)用API實例代碼

      def testInputSelect(self):
          self.driver.get(r'file:///C:/Users/v-xug/Desktop/inputselect.html')
          from selenium.webdriver.common.keys import Keys
          inputselect = self.driver.find_element_by_id('select')
          inputselect.clear()
          import time
          time.sleep(1)
          # 輸入的同時按下箭頭鍵
          inputselect.send_keys('c', Keys.ARROW_DOWN)
          time.sleep(1)
          inputselect.send_keys(Keys.ARROW_DOWN)
          time.sleep(1)
          inputselect.send_keys(Keys.ENTER)
          time.sleep(3)

說明

運行這段代碼可以看到輸入框輸入c的同時下拉選項會篩選出數(shù)據(jù)，且選中篩選出的第一項，但是在某些瀏覽器中不會看到效果(我寫完運行時看到的效果就沒有)。keys模塊提供了很多其他的模擬按鍵，可以通過dir()查看Keys的功能

三、操作單選框

被測HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作單選框</title>
</head>
<body>
    <form>
        <input type="radio" name="fruit" value="berry" />草莓</input>
        <br />
        <input type="radio" name="fruit" value="watermelon" />西瓜</input>
         <br />
        <input type="radio" name="fruit" value="orange" />橙子</input>
    </form>
</body>
</html>

調(diào)用API實例代碼

      def testRadio(self):
          import time
          self.driver.get(r'file:///C:/Users/v-xug/Desktop/radio.html')
          # 定位到草莓選項
          time.sleep(2)
          berry = self.driver.find_element_by_xpath("//input[@value='berry']")
          berry.click()
          # 斷言是否被選中
          self.assertTrue(berry.is_selected())

        if berry.is_selected():
             # 如果被選中了重新選擇西瓜選項
             watermelon = self.driver.find_element_by_xpath("//input[@value='watermelon']")
             watermelon.click()
             # 斷言草莓未被選中
             self.assertFalse(berry.is_selected())
             # 查找所有的選項
             options = self.driver.find_elements_by_xpath("//input[@name='fruit']")
             # 遍歷所有的選項，如果找到orange且未被選中，那么就選中這項
             for option in options:
                 if option.get_attribute('value')=='orange':
                     if not option.is_selected():
                         option.click()

四、操作復(fù)選框

被測HTML代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作復(fù)選框</title>
</head>
<body>
    <form name="form1">
        <input type="checkbox" name="fruit" value="berry" />草莓</input>
        <input type="checkbox" name="fruit" value="watermelon" />西瓜</input>
        <input type="checkbox" name="fruit" value="orange" />橙子</input>
    </form>
</body>
</html>

調(diào)用API實例代碼

      def testCheckBox(self):
          self.driver.get(r'file:///C:/Users/v-xug/Desktop/checkbox.html')
          # 選中一個選項并取消
          berry = self.driver.find_element_by_xpath("//input[@value='berry']")
          berry.click()
          # 斷言是否被選中
          self.assertTrue(berry.is_selected())
          # 取消選中
          if berry.is_selected():
             berry.click()
         # 遍歷所有的選項并選中所有的選項
         options = self.driver.find_elements_by_xpath("//input[@name='fruit']")
         for option in options:
             if not option.is_selected():
                 option.click()

五、斷言頁面源碼中的關(guān)鍵字

被測地址

http://www.baidu.com

實例代碼

  def testAssertIn(self):
         self.driver.get('http://www.baidu.com')
         self.driver.find_element_by_id('kw').send_keys('linux超')
         self.driver.find_element_by_id('su').click()
         import time
         time.sleep(4)
         self.assertIn('linux超', self.driver.page_source, msg='頁面源碼中不存在該關(guān)鍵字')

說明

有時候會出現(xiàn)頁面存在要斷言的關(guān)鍵字，但是結(jié)果仍然斷言失敗，這有可能是由于頁面沒有加載完全就開始斷言語句，導(dǎo)致要斷言的內(nèi)容在頁面源碼中找不到。

六、對當(dāng)前瀏覽器窗口截屏

被測地址

http://www.baidu.com

1     def testScreenShot(self):
2         self.driver.get('http://www.baidu.com')
3         try:
4             # 使用get_screenshot_as_file(filename)方法，對瀏覽器當(dāng)前打開的頁面截圖，并保存在當(dāng)前目錄下
5             self.driver.get_screenshot_as_file('baidu.png')
6         except IOError as e:
7             print(e)

截圖

說明

調(diào)用截屏函數(shù)get_screenshot_as_file()截圖成功后會返回True，如果發(fā)生了IOError異常，會返回False。函數(shù)中傳遞的參數(shù)可以是絕對路徑也可以是相對路徑；當(dāng)自動化測試過程中，未實現(xiàn)預(yù)期結(jié)果，可以將頁面截圖保存，方便更快速地定位問題。

七、拖拽頁面元素

被測地址

http://jqueryui.com/resources/demos/draggable/scroll.html

調(diào)用API實例代碼

      def testDragDrop(self):
          import time
          self.driver.get(r'http://jqueryui.com/resources/demos/draggable/scroll.html')
          element1 = self.driver.find_element_by_id('draggable')
          element2 = self.driver.find_element_by_id('draggable2')
          element3 = self.driver.find_element_by_id('draggable3')
          from selenium.webdriver import ActionChains
          action = ActionChains(self.driver)
          # 把第一個元素拖拽到第二個元素的位置
         action.drag_and_drop(element1, element2).perform()
         # 把第三個元素拖拽10個像素，拖拽2次
         for i in range(2):
             action.drag_and_drop_by_offset(element3,10,10).perform()
             time.sleep(2)
         action.release()

說明：ActionChains模塊在前面已經(jīng)涉及到過了，所有的和鼠標(biāo)操作有關(guān)的動作都需要使用此模塊模擬

八、模擬鍵盤單個按鍵操作

被測地址

http://www.sogou.com

調(diào)用API實例代碼

      def testSingleKey(self):
          import time
          self.driver.get('http://www.sogou.com')
          query = self.driver.find_element_by_id('query')
          # 導(dǎo)入模擬按鍵模塊
          from selenium.webdriver.common.keys import Keys
          # 輸入框發(fā)送一個f12按鍵
          query.send_keys(Keys.F12)
          time.sleep(2)
         # 輸入框中輸入搜索內(nèi)容并按下回車鍵
         query.send_keys('selenium')
         query.send_keys(Keys.ENTER)
         time.sleep(2)

說明

有些電腦運行這個代碼可能看不到效果，因為有的電腦的F12鍵是需要和Fn組合才能生效的。

總結(jié)

今天的整理到此結(jié)束，說實話我不知道對讀到我文章的人幫助有多大，但是對我個人而言是又經(jīng)歷了一次知識的梳理。把之前忘記的也都慢慢的想起來了，雖然每個實例看著都挺簡單的，其實耗費了我很多精力和時間，因為我想讓讀到我文章的人只看一次代碼只運行一次實例就能知道實現(xiàn)的是什么功能，能把這個功能應(yīng)用到復(fù)雜的測試場景中。其實這也是我自己的一次自我總結(jié)吧！

最后喜歡的小伙伴可以點贊收藏評論加關(guān)注喲。

具欄用來展示和方便用戶完成當(dāng)前頁面的主要操作，俗稱操作欄。

典型應(yīng)用場景

原型畫法（無交互）

工具欄通常包含多個操作按鈕。位于屏幕底部。

①先畫工具欄背景，從默認(rèn)元件庫拖動“矩形2”到工作區(qū)位置（0,617），修改尺寸為（375,50）。

②再畫操作，從默認(rèn)元件庫拖動“鏈接按鈕”到工具欄，雙擊輸入文字“操作”，移動到合適位置。

③再畫2個操作按鈕。

④生成原型HTML并在瀏覽器中查看效果。

原型畫法（有交互）

工具欄的常見交互效果：

固定位置不隨著頁面內(nèi)容而移動。方法同狀態(tài)欄。
每個操作按鈕有不同的交互，需要單獨設(shè)置。

高保真原型畫法

接下來以“淘寶APP-商品詳情-工具欄”為案例，講解高保真原型的詳細(xì)畫法。

⑤先畫工具欄背景。從默認(rèn)元件庫拖動“矩形2”到工作區(qū)位置（0,617），修改尺寸為（375,50）。

⑥再畫店鋪文字。從默認(rèn)元件庫拖動“文本標(biāo)簽”到工具欄，雙擊輸入文字“店鋪”，修改字體尺寸為12。然后從默認(rèn)元件庫拖動“圖片”到工具欄，縮放到20*20，移動它們到合適位置。

然后從阿里巴巴矢量圖標(biāo)庫網(wǎng)站http://www.iconfont.cn/collections/index搜索“店鋪”，找到合適的圖標(biāo)，下載svg格式。再雙擊店鋪圖片，導(dǎo)入該svg圖標(biāo)。并盡量縮放到當(dāng)時設(shè)置的尺寸20*20。

如：需修改圖標(biāo)的顏色，請選中并右鍵“轉(zhuǎn)換SVG圖片為形狀”，然后設(shè)置它的填充色為紅色#ff0000。

⑦再畫客服和收藏。方法同上。

⑧再畫加入購物車。從默認(rèn)元件庫拖動“矩形3”到工具欄的合適位置，修改尺寸到合適大小，雙擊輸入文字“加入購物車”。修改文字顏色為#ffffff，修改填充色為橙色#ffa501，設(shè)置圓角半徑100并取消選中“應(yīng)用到右邊兩個邊框”。

⑨再畫立即購買。修改文字顏色為#ffffff，修改填充色為紅色#fc4537。設(shè)置圓角半徑100并取消選中“應(yīng)用到左邊兩個邊框”。

⑩生成原型HTML并在瀏覽器中查看效果。

添加到APP元件庫

不同場景下的工具欄功能，操作不一樣，位置是一樣，樣式相對固定。

作者根據(jù)多年P(guān)M經(jīng)驗，總結(jié)出2種常用的“工具欄”，添加到APP元件庫。

工具欄（文字）

工具欄（圖標(biāo)）

注意事項

工具欄很少和標(biāo)簽欄共存于一個頁面中。
工具欄最好有單獨的填充色，方便和頁面其他內(nèi)容區(qū)分。
有時候很容易把工具欄誤認(rèn)為標(biāo)簽欄，兩者的區(qū)別是標(biāo)簽欄是承載APP整體的功能模塊，而工具欄只是用來承載某一頁面的常見操作。

家在平時的工作、學(xué)習(xí)和生活中，網(wǎng)絡(luò)可以說是時時刻刻伴隨著我們的生活。大家需要個什么資料啥的，只要打開電腦上網(wǎng)一搜，就可以找到我們想要的文字、圖片和視頻啥的。特別是對于文字工作者，碰到喜歡的文字和好看的文章就想把它復(fù)制保存下來。但往往大多數(shù)優(yōu)秀的文章都是收費的。當(dāng)大家遇到網(wǎng)頁上的文字無法復(fù)制的時候，怎么辦呢？今天我就教大家一個小技巧，不用花一分錢就可以復(fù)制你想要的文字。

首先，我們按F12鍵，如圖1所示：

然后，我們再按F1鍵。如圖2所示：

最后，我們把如圖2的滾動條拉到底，找到“Debugger”選項。如圖3所示：

在其子選項我們選中“Disable JavaScript”。然后關(guān)閉掉當(dāng)前的窗口。大家就可以隨心所欲了，想怎么復(fù)制就怎么復(fù)制。

大家學(xué)會了嗎？是不是很簡單啊！喜歡的話就給小編點個贊吧！

在線咨詢

上一篇：大神60行JS代碼實現(xiàn)的網(wǎng)頁鋼琴按鍵特效，代碼>點開文章拷貝拿走
下一篇：Adobe2023全家桶全部免費下載和安裝，包括歷史版本

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Webdriver之API詳解(3) /「干貨」webdriverapi用法分享

言

一、操作多選的選擇列表

二、操作可以輸入的下拉列表（輸入的同時模擬按鍵）

三、操作單選框

四、操作復(fù)選框

五、斷言頁面源碼中的關(guān)鍵字

六、對當(dāng)前瀏覽器窗口截屏

七、拖拽頁面元素

八、模擬鍵盤單個按鍵操作

總結(jié)

典型應(yīng)用場景

原型畫法（無交互）

原型畫法（有交互）

高保真原型畫法

添加到APP元件庫

工具欄（文字）

工具欄（圖標(biāo)）

注意事項

您的項目需求